HTML. СОЗДАНИЕ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
Упражнения

Содержание

Вступление
Упражнение 1. Создание простейшего гипертекстового документа
Упражнение 2. Таблица
Упражнение 3. Рисунки
Упражнение 4. Гиперссылки.
Упражнение 5. Оформление электронной книги
Упражнение 6. Фреймы
Упражнение 7. Каскадные таблицы стилей
Приложение 1. Цвета в WEB
Приложение 2. Таблица цветов (140 оттенков)
Пример фреймов

Вступление

Цель предлагаемых упражнений – научить создавать простейшие документы в формате HTML (гипертекстовые документы) и связывать эти документы гиперссылками. Предлагается семь упражнений. В первом упражнении строится простейший гипертекстовый документ. Во втором создаётся таблица.

В третьем упражнении усложняется документ, созданный в первом упражнении. К нему добавляются текст и рисунки, используются цвета и шрифты.

В четвёртом упражнении создаётся меню для просмотра созданных ранее документов. В пятом упражнении нужно разметить главу книги, обеспечив возможность с помощью гиперссылок переходить из содержания главы в любой её раздел.

В шестом упражнении создаётся страница, состоящая из нескольких прямоугольных областей (фреймов). В каждый фрейм загружается отдельный HTML-дкумент.

Целью седьмого упражнения является изучение способов применения каскадных таблиц стилей (CSS) для разметки страниц сайта.

Для набора HTML-документа подходит любой текстовый редактор, например, Блокнот. Рекомендуется специализированный бесплатный редактор Notepad++. Просмотреть получившийся документ можно в любом браузере.

При создании нового файла любой текстовый редактор устанавливает кодировку символов по умолчанию.

Упражнение 1.
Создание простейшего гипертекстового документа

Сначала нужно создать «каркас» документа. Делается это следующим образом. Напечатайте открывающий и закрывающий теги создаваемого документа:

<HTML>
</HTML>

Вставьте между этими тегами ещё две пары обязательных тегов:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Любой гипертекстовый документ должен содержать эти теги и именно в таком порядке. Между тегами <HEAD> </HEAD> вставьте тег<META> и парный тег <TITLE></TITLE>.

При создании нового файла любой текстовый редактор устанавливает кодировку символов по умолчанию. Браузер при открытии HTML-документа также устанавливае его кодировку. Эта кодировка должна быть такой же, как при создании HTML-документа в редакторе. Если кодировки не совпадут, то русские буквы в браузере отобразятся неправильно. Предпложим, что создаваемый документ имеет кодировку windows-1251.

В тег <META> вставьте название кодировки, а между тегами <TITLE></TITLE>:

- название документа:
<META charset="windows-1251">
<TITLE>Из Пушкина</TITLE>

Текст заголовка Из Пушкина появляется при просмотре в верхнем левом углу окна браузера и не входит в состав собственно документа.

Между тегами <BODY></BODY> должен находиться размеченный текст документа. Самый простой способ разметки – указать, что надо выводить текст без дополнительной разметки. Для этого используется пара тегов <PRE></PRE>. Вставьте эти теги между тегами <BODY></BODY>:

<BODY>
<PRE>
</PRE>
</BODY>

Напечатайте между тегами <PRE></PRE> следующий текст:

 . . . . . . .
 Толпою нимф окружена,
 Стоит Истомина; она,
 Одной ногой касаясь пола, 
 Другою медленно кружит,
 И вдруг прыжок, и вдруг летит,
 . . . . . . .

Документ готов. Сохраните его в вашем каталоге под именем Упр1.HTML и откройте любым браузером . На экране браузера должен появиться введённый вами отрывок из «Евгения Онегина».

Упражнение 2.Таблица

Создайте в текстовом редакторе новый файл. Как и в упражнении 1, создайте из тегов каркас HTML-документа. Введите между тегами <TITLE></TITLE> название документа «Погода». Документ должен выглядеть примерно так

ВЕСНА

Месяц Средние показатели
Температура Атмосферное давление
Март -3 754
Апрель +1 758
Май +10 763

Заголовок «ВЕСНА» набран крупными буквами, расположен посередине строки и имеет специфический цвет (темно-красный?) . Для вывода заголовков используются теги <H1>, <H2> …<H6>. Чем больше цифра, тем мельче шрифт. Для размещения заголовка посередине строки используется атрибут align со значением «center».

Для задания цвета используется тег <FONT> с атрибутом «color». Строка, задающая заголовок, размещается сразу после открывающего тега <BODY> и выглядит так:

<H1
align="center"><font color=#700000 >ВЕСНА
</font></H1>

Введите эту строку.

Примечание. Параметры шрифта можно задавать с помошью каскадных таблиц стилей (см. Упражнение 7. Каскадные таблицы стилей).

Требует пояснение способ задания цвета. В HTML цвет задаётся тремя способами. Наиболее распространённые цвета указываются по имени, например,

color=”red”.

Чтобы передать один из 16777217 возможных оттенков цветов, используется шестнадцатеричный код. Например, код самого яркого оттенка жёлтого цвета - #FFFF00. Примеры задания различных оттенков приведены в приложении.

Удобно задавать цвет с помощью функции rgb(красный, зелёный, синий), где красный, зелёный, синий - оттенки красного, зелёного или синого цветов, задаваемые десятичным числом в диапазоне от 0 до 255. Например, жлтый задаётся так:

color=rgb(255,255,0)

Описание таблицы начинается тегом <TABLE> и заканчивается тегом </TABLE>. Для рассматриваемой таблицы используется следующий тег

<TABLE border=1 cellspacing=2 bgcolor=#07FFFF>

Атрибуты border и cellspacing задают толщину и форму рамки. После окончания формирования данного документа поэкспериментируйте со значениями этих атрибутов. Атрибут bgcolor задаёт цвет фона таблицы.
В HTML-файле таблица описывается последовательно строка за строкой, а внутри строки – клетка за клеткой. Строка начинается тегом <TR>. Закрывающий тег </TR> необязательный. Клетка начинается тегом <TD>. Закрывающий тег </TD> необязательный. Если клетка служит заголовком строки или столбца, то вместо <TD> используется тег <TH>. Например, четвёртая (считая заголовок, состоящий из двух строк) строка рассматриваемой таблицы описывается так:

<TR>
<TD>Апрель
<TD ALIGN="center">+1
<TD ALIGN="center">758

Для объединения клеток по вертикали, т.е. клеток соседних строк, используется атрибут тегов <TD> или <TH> rowspan=n, где n – число объединяемых клеток. Атрибут задаётся только в описании первой из объединяемых клеток, а объединяемые клетки в следующих строках пропускаются.

Для объединения клеток одной строки используется атрибут тегов <TD> или <TH> colspan=n, где n – число объединяемых клеток. Атрибут задаётся только в описании первой из объединяемых клеток, а описания следующих объединяемых клеток строки пропускаются. Первая и вторая строки рассматриваемой таблицы описываются так:

<TR>
   <TH rowspan=2> Месяц
   <TH colspan=2> Средние показатели
<TR>
   <TH> Температура
   <TH> Атмосферное давление

Пользуясь полученными сведениями, закончите создание таблицы «Погода». Сохраните получившийся документ в вашем каталоге под именем Упр2.htm и откройте любым браузером. Проверьте правильность отображения таблицы.

Упражнение 3. Рисунки

Откройте в редакторе «Блокнот» файл Упр1.htm, созданный в упражнении 1, и вставьте в этот документ заголовок и два рисунка так, чтобы документ приобрёл вид

Заголовок «Из Евгения Онегина» вставьте так же, как и заголовок «ВЕСНА» в упражнении 2.
Для добавления рисунков нужно создать таблицу из одной строки и трёх столбцов. Чтобы рамки были невидимыми, задайте параметры таблицы

border=0 cellspacing=0

Во вторую клетку таблицы поместите текст отрывка. В первую и третью клетки нужно поместить ссылки на рисунки. Оба рисунка находятся в том же каталоге, что и файл, который вы сейчас читаете. Чтобы проще были ссылки на рисунки в HTML-документе скопируйте файлы Pushkin.jpg и Balet.jpg в свой каталог (туда где находятся файлы Упр1.htm и Упр3.htm).
В первую клетку поместите ссыку:

<IMG SRC=Pushkin.jpg hspace=30>

Атрибут hspace задаёт отступ рисунка от края клетки.
В третью клетку поместите ссылку на Balet.jpg.
Сохраните получившийся документ в вашем каталоге под именем Упр3.htm и откройте любым браузером . Проверьте правильность отображения таблицы.

Упражнение 4. Гиперссылки.

В этом упражнении нужно создать HTML-документ, содержащий ссылки на документы, созданные в предыдущих упражнениях. Документ должен иметь примерно такой вид:

Темы упражнений

В трёх первых упражнениях были рассмотрены структура HTML-документа, способы создания таблиц и вставки в документ таблиц. Были созданы следующие документы:

  • Простейший документ
  • Таблица
  • Картинки

При щелчке левой кнопкой мышки по выделенному синим цветом названию документа этот документ появится в окне браузера. Гиперссыка на «Простейший документ» в HTML-документе описана так:

<A HREF="Упр1.htm">Простейший документ</A>

Здесь используется пара тегов <A></A>. Атрибут HREF= «имя файла» служит для задания имени открываемого файла. Между тегами помещается текст или ссылка на рисунок, при щелчке по которому происходит переход к указанному файлу.

Все три ссылки объединены в ненумерованный список. Весь ненумерованный список ограничивается тегами <UL></<UL>. Элемент списка начинается непарным тегом <LI>. Например, список

размечается так:

<UL>
<LI>Проблемы
<LI>Радости
<LI>Тревоги
</UL>

Последовательность создания описанного документа:

Вставьте в HTML-документы, созданные в упражнениях 1-3, гиперссылки на вызвавший их документ, т.е. ссылки для возврата.

Самостоятельно с помощью гиперссылок создайте сайт «Река Нева», состоящий из трёх страниц:

Каждая страница – это HTML-документ, размещённый в отдельном файле. Общее описание должно содержать гиперссылки на два других документа и иметь вид

Река Нева

Нева вытекает из Ладожского озера и впадает в Финский залив, короткая (всего 74 км) и очень многоводная (годовой сток 74 куб.км). По многоводности Нева уступает в Европе только Волге, Дунаю, Северной двине и Печоре.

  • Карта бассейна Невы
  • Характеристики бассейна Невы

Страница «Карта бассейна Невы» должна быть  маленьким HTML-файлом, состоящим из заголовка, гиперссылки для возврата общему описанию и ссылки на файл «Bas_Nev.jpg», содержащий карту бассейна Невы. Файл «Bas_Nev.jpg» хранится в том же каталоге HTML_упр, что и читаемый вами файл «Упражнения_HTML.html».

Страница «Характеристики бассейна Невы» должна представлять собой таблицу и ссылку «Возврат» для возвращения к общему описанию:

Составные части бассейна реки Невы

Номер
части
(см.карту)

Части невского бассейна

Площадь бассейна
кв.км %
от всего
бассейна
I Бассейн реки Свири 84400 30,1
II Бассейн реки Вуоксы 68700 24,4
III

Бассейн реки Волхов

80200 28,6
IV Собственный бассейн Ладожского озера (без самого озера) 24670 8,7
V Ладожское озеро (вместе с островами) 18130 6,4
VI Собственный бассейн реки Невы (между истоком и устьем ) 5000 1,8
  Весь бассейн 281000 100

Возврат

Упражнение 5. Оформление электронной книги

С книгой, хранящейся в электронном виде, удобно работать (особенно, если это учебник или техническая документация) , если эта книга снабжена гиперссылками, позволяющими мгновенно переходить от одного раздела книги к другому. Небольшая книга может храниться в одном файле. Для того чтобы загрузка файла длилась не слишком долго, большую книгу делят на несколько файлов.

В этом упражнении предстоит разметить первую часть описания языка ФОРТРАН, состоящую из девяти небольших разделов. Разделы 2 и 3 делятся на подразделы. Документ хранится в двух файлах:

Откройте, щёлкнув по ссылке, и скопируйте оба файла в свой каталог. Переименуйте их в FORTRAN1.htm и FORTRAN2.htm.
Разделим процесс разметки на 4 этапа:

  1. вставка обязательных тегов («скелета»),
  2. разметка заголовков и текстов разделов и подразделов,
  3. создание ссылок,
  4. придание документу окончательного вида.

Первый и второй этапы одинаковы для обоих файлов

Первый этап. Порядок разметки на первом этапе:

Второй этап. Заголовки данного документа делятся на 3 уровня. Название документа – заголовок первого уровня. Все названия разделов и заголовок «Содержание» отнесём ко второму уровню, а названия подразделов – к третьему. Вставьте перед началом заголовка i-го ( i =1,2,3) уровня тег <Hi>, а после конца - </Hi>. Заголовки первого и второго уровня разместите по центру строки. Разметка названия документа выглядит так:

<CENTER><H1> ФОРТРАН</H1>
<H1>ЧАСТЬ I. ОБЗОР ЯЗЫКА. </H1></CENTER>

Перед началом текста каждого раздела и подраздела вставьте тег <PRE>, а в конце тег </PRE>.

Сохраните размеченные файлы и просмотрите их любым браузеромом. Если заголовки слишком крупные, поменяйте цифру в теге заголовка на большую, например <H3></H3> замените на <H4></H4>.

Третий этап. Сначала нужно расставить метки в тех местах документа, в которые нужно переходить по гиперссылкам. Эти места – заголовки разделов и подразделов. Примеры вставки меток в заголовки (выделено жирным курсивом) :

<A name="m0"></A>
<H3 align=CENTER>ОБ ЭТОЙ ЧАСТИ </H3>
<A name="m1"></A><H3 align=CENTER>1. МЕТАКОМАНДЫ МС-ФОРТРАНА</H3>
<A name="m22"></A><H4>2.2.Подпрограмма</H4>

Для удобства имена меток составлены из буквы m и номера раздела или подраздела (без точки).

После расстановки меток в обоих файлах нужно все пункты оглавления (содержания) превратить в гиперссылки. Нам понадобятся гиперссылки на метки, расположенные в том же фале, что и сама гиперссылка, и гиперссылки на метки в другом файле. Примеры гиперссылок (выделено жирным курсивом) :

а) в том же файле

<A HREF="#m0">Об этой части</A><BR>
<A HREF="#m1">1. МЕТАКОМАНДЫ МС-ФОРТРАНА</A><BR>
<A HREF="#m22">2.2.Подпрограмма</A><BR>

б) в другом файле

<A HREF="Fortran2.htm#m8">8. СТРОКИ</A><BR>

После создания гиперссылок документом удобно пользоваться. Снова сохраните размеченные файлы и просмотрите их любым браузеромом, пользуясь гиперссылками.

Четвёртый этап.        Теперь нужно разметить две таблицы и несколько нумерованных и ненумерованных списков.

Разметка таблиц:
В начале и в конце таблицы поставьте соответственно теги <TABLE> и </TABLE>.
В начале строки поставьте тег <TR>
В начала клеток шапки (заголовка) таблицы. поставьте теги <TH>. В начала остальных клеток<  поставьте тег <TD>/.

Разметка ненумерованных списков:
Ненумерованный список открывается и закрывается тегами <UL> и </UL>.
Перед элементом списка ставится тег <LI>

Разметка нумерованных списков:
Нумерованный список открывается и закрывается соответственно тегами <OL type=” тип нумерации”> и </OL>.
Перед элементом списка ставится тег <LI>. Виды нумерации приведены в таблице:

тип нумерации Последовательность нумерации
type=”1” 1, 2, 3, 4,
type=”i” i, ii, iii, iv, ...
type=”I” I, II, III, IV, ...
type=”a” a, b, c, d, ...
type=”A” A, B, C, D, ...

После разметки таблиц и списков тщательно проверьте (отладьте) ваш сайт и покажите преподавателю.

Упражнение 6. Фреймы

Во всех предыдущих упражнениях в рабочую область окна браузера загружался только один HTML-документ. Можно разделить рабочую область окна браузера на несколько прямоугольных частей (фреймов) и в каждую часть загружать свой HTML-документ. Каждый фрейм можно рассматривать как клетку таблицы, занимающей всю рабочую область. Для задания расположения и размеров фреймов служит тег <FRAMESET>. В каждый фрейм с помощью тега <FRAME>загружается HTML-документ.

Для формирования страницы, состоящей из N фреймов, требуется не менее N+1 HTML-документов: хотя бы по одному на каждый фрейм и главный HTML-документ, в котором задаётся разбиение на фреймы.

Пример 6.1

Разместим шесть фреймов одинакового размера в виде таблицы из двух строк и трёх столбцов. Ниже приведён текст главного HTML-документа для этой задачи:

	<html>
	<head>
	<meta http-equiv="pragma" content="no-cache"> 
	<title>6 фреймов</title>
	</head>
	<FRAMESET ROWS='33%,33%,*' cols='50%,50%'>
		<FRAME src="frame1.html" name="f1">
		<FRAME src="frame2.html" name="f2">
		<FRAME src="frame3.html" name="f3">
		<FRAME src="frame4.html" name="f4">
		<FRAME src="frame5.html" name="f5">
		<FRAME src="frame6.html" name="f6">
	</frameset>
	</html>
Выполнить пример 6.1

Пример 6.2

Создадим четыре фрейма: два горизонтальный во всю ширину экрана, и между ними - два вертикальных так, как показано на рисунке:

Фрейм 1
МЕНЮ Фрейм 3
Фрейм 4
Фрейм 5
Фрейм 3
Фрейм 6

Для решения этой задачи потребуется два тега <FRAMESET>. С помошью первого тега задаются три строки. В первой и третьей строках размещается по одному HTML-документу (frame1.html,frame6.html). Вторая строка с помощью вложенного тега <FRAMESET> разбивается на две колонки (клетки). В левую колонку при открытии страницы загружается HTML-документ frameMenu.html , содержащий меню для загрузки в правую колонку HTML-документов frame3.html, frame4.html, frame5.html. Ниже приведены тексты главного HTML-документа и frameMenu.html.

Текст главного HTML-документа для примера 6.2

	<html>
	<head>
	<meta http-equiv="pragma" content="no-cache"> 
	<title></title>
	</head>
	<FRAMESET ROWS='20%,70%,10%'>
		<FRAME src="frame1.html" name="f1">
		<FRAMESET COLS='15%,*'>
			<FRAME src="frameMenu.html" name="f2">
			<FRAME src="frame3.html" name="f3">
		</FRAMESET>
		<FRAME src="frame6.html" name="f6">
	</frameset>
	</html>

Текст HTML-документа frameMenu.html

	<html>
	<head>
	<title>МЕНЮ </title>
	</head>
	<body>
	<H3>МЕНЮ</h3>
	<A href="frame3.html" target="f3">Фрейм 3</a><BR>
	<A href="frame4.html" target="f3">Фрейм 4</a><BR>
	<A href="frame5.html" target="f3">Фрейм 5</a>
	</body>
	</html>

В HTML-документе frameMenu.html пункты меню сделаны в виде ссылок. Атрибут target тега <A ...> служит для указания имени фрейма в который нужно загрузить указанный в ссылке HTML-документ.

Выполнить пример 6.2

Самостоятельно создайте сайт, отличающийся от рассмотренного в упражнении 4 сайта «Река Нева» тем, что HTML-документы с описанием Невы, картой и описанием бассейна Невы поочерёдно загружаются в один фрейм. Рабочая область браузера должна быть разделена на три фрейма и выглядеть сразу после загрузки сайта примерно так:

Река Нева

  • Описание Невы
  • Характеристики бассейна Невы
  • Карта бассейна Невы

Описание Невы

Нева вытекает из Ладожского озера и впадает в Финский залив, короткая (всего 74 км) и очень многоводная (годовой сток 74 куб.км). По многоводности Нева уступает в Европе только Волге, Дунаю, Северной Двине и Печоре.

Упражнение 7. Каскадные таблицы стилей

Содержание

Задание
Общие понятия
Синтаксис стилей
Селекторы
Простые селекторы
Универсальный селектор
cелекторы типа
cелекторы класса
Id-селекторы
селекторы атрибутов
псевдоклассы
псевдоэлементы
Сложные селекторы
cелекторы потомков
дочерние cелекторы
cмежные селекторы-родственники
Приоритеты стилей
Приоритеты селекторов

Задание

Используя каскадные таблицы стилей (CSS), в размеченную в упражнение 5 электронную книгу ФОРТРАН необходимо внести следующие изменения.

  1. Назначить Arial в качестве основного шрифта (гарнитуры) всего документа. Размер шрифта 14pt, цвет - rgb(0, 51, 102).
  2. Ссылки в Оглавлении должны иметь следующие свойства:
  3. Шрифт таблиц и списков должен быть на 10% меньше основного.

Указания. Все сведения, необходимые для выполнения упражнения, содержатся в изложенном ниже описании CSS. В частности, примеры разметки ссылок приведёны в разделе Псевдоклассы. Практически любую справку по CSS можно найти на сайте http://htmlbook.ru/css/. Полное описание CSS2 на русском языке находится на сайте Каскадные Таблицы Стилей, уровень 2. Спецификация CSS2.

Общие понятия

В ранних версиях HTML внешний вид документа задавался тегами и содержащимися в них атрибутами. Начиная с версии HTML 4.0 появилось ещё одно средство придания документу нужного вида - каскадные таблицы стилей (CSS) В примере 7.1 рассмотриватся простейший HTML-документ, в котором примененяется CSS.

Пример 7.1

В окно браузера нужно вывести 5 окрашенных в разные цвета строк. Цвета задаются с помощью CSS. Описания стилей размещены тремя способами:

Текст HTML-документа для примера 7.1

	<HTML>
	<HEAD>
		<LINK  rel='stylesheet' type='text/css' href='color1.css'>
		<STYLE>@import "color.css";
		h1,h2,h3 {color:red;}
		h2 {color:green;}
		h3 {color:blue;}
		</style>
	</head>
	<BODY>
	<H1>Заголовок 1</h1>
	<H2>Заголовок 2</h2>
	<H3>Заголовок 3</h3>
	<P>Текст каштанового цвета
	</p>
	<H3 style="color:yellow;background-color:#559955;width:140px;text-align:center">
	Заголовок 4</h3>	
	</body>
	</html>

Файл color.css состоит из одной строчки:
       h1,p {color:maroon ;},
которая задаёт каштановый цвет текстов, заключённых в теги h1 и p.

Файл color1.css тоже состоит из одной строчки:
       h1,p {color:green;},
но задаёт зелёный цвет

Выполнить пример 7.1

При описании CSS используется термин элемент. HTML-документ состоит из элементов (абзацев, гиперссылок, таблиц и т.д.).Элемент состоит из начального тега, содержимого и конечного тега. Начальный и конечный теги содержат название элемента. Например, элемент STYLE ограничен тегами <STYLE> и </STYLE> и содержит описания стилей. Элементы с одинаковым названием различаются по Id или по имени начального тега.

В примере 7.1 тексты Заголовок 3 и Заголовок 4 помещены в элементы H3. Стиль обоих элементов H3 описан в элементе STYLE. Кроме того, стиль текста Заголовок 4 описан в атрибуте style тега H3. Из нескольких стилей, относящихся к одному тегу, примененяется стиль, имеющий наивысший приоритет. Стиль, описанный в атрибуте style, имеет более высокий приоритет, чем описанный в элементе STYLE, поэтому Заголовок 4 окрашивается в жёлтый цвет, заданный в атрибуте style.

Стиль элементов H1 и P, задаётся в двух отдельных файлах. Кроме того, стиль элемента H1 задаётся в элементе STYLE с помощью селектора типа H1. Из нескольких вариантов стиля одного элемента выбирается указанный последним (ниже всех), поэтому для элемента H1 будет выбран стиль с селектором типа H1.

К элементу P будет применён стиль из файла color.css, так как он указан после файла color1.css.

Последовательность стилей, имеющих разные приоритеты и описывающих один и тот же элемент образуют каскад. Этим объясняется название CSS - каскадные таблицы стилей.

Синтаксис стилей

1. Синтаксис стиля, задаваемого непосредственно в теге:

	<имя_тега style="блок_описаний">

Например, размер и цвет шрифта в теге <DIV> задаётся так:

	<DIV style="font-size:20px;color:#559955">

2. Описание стилей, помещённое в элемент STYLE или в отдельный файл, имеет следующий синтаксис:

	селектор{блок_описаний} селектор{блок_описаний}
	. . . 
	селектор{блок_описаний}

Элемент STYLE размещается в шапке HTML-документа, т.е. между тегами <HEAD> и </head>. Файлу со стилями принято давать расширение css.

3. Синтаксис блока описаний:

	свойство_стиля: список_значений; свойство_стиля: список_значений;...;свойство_стиля: список_значений;

4. После любого блока описаний можно поместить комментарий. Синтаксис комментария:

		/* Текст комментария */

Пример задания шрифта и отступов абзаца:

	P { font-family: 'Monotype Corsiva', Arial, serif;/*шрифты*/
		padding: 0 2px 0 3px; /* отступы сверху, справа, снизу и слева */
	  }

Через запятую перечисляются значения одного свойства. В примере перечислены три шрифта в порядке очерёдности их применения. Сначала браузер попытается применить шрифт Monotype Corsiva. Если его нет то - Arial. Если отсутствуют оба первых шрифта, то будет использован serif.

Через пробел перечисляются разные свойства (подсвойства) составного свойства. Приведённое в примере свойство padding объединяет свойства padding-top, padding-right, padding-bottom и padding-left. Задать только отступ слева можно так:

	padding-left: 5px;

Селекторы

Селекторы используются при описании стилей в отдельном файле или элементе STYLE и служат для указания одного или нескольких элементов, к которым нужно применить стиль. Селекторы имеют множество разновидностей. Если для элемента задано несколько стилей, то по разновидности селектора определяется приоритет стиля. Вид селектора варьируется от очень простого, например,

	h2 {color:red;} ,
         до очень сложного, например,
	.table caption + thead tr:first-child th,
	.table caption + thead tr:first-child td,
	.table colgroup + thead tr:first-child th,
	.table colgroup + thead tr:first-child td,
	.table thead:first-child tr:first-child th,
	.table thead:first-child tr:first-child td 
	{ border-top: 0;} .

Сложный селектор - это последовательность простых селекторов, разделённых символами
"," (запята), пробел, "+", "<"

Простые селекторы

Рассмотрим следующие простые селекторы:

Универсальный селектор * (звёздочка) означает, что стиль применяется ко всем элементам HTML-документа. Зададим единый для всего документа размер шрифта:

	* {font-size:14px;}

Селектор типа (тега) - это название элемента (тега), к которому применяется стиль. Элементов с одним названием, в HTML-документе может быть несколько, например, несколько элементов DIV. Если один и тот же стиль применяется к элементам с разными названиями, например, к элементам H1 и H2, то соответствующие селекторы типа перечисляются через запятую. Зададим для элементов H1 размер шрифта и для элементов H1 и H2 цвет текста и фона:

	h1 {font-size: 16pt;} /* Относится ко всем тегам h1 */
	h1,h2 {color:#ffff90; background-color:#3B908F;} /* Относится ко всем тегам h1 и h2 */

Селектор класса применяется в тех случаях, когда стиль нужно задать отдельным элементам. Синтаксис селектора класса:

	название_элемента.имя_класса {блок_описаний}
	или
	.имя_класса {блок_описаний}

Теги, к которым применяется стиль с селектором класса имеют специалный атрибут class:

	<название_атрибута class=имя_класса>

Зададим красный цвет текста одному из трёх элементов DIV:

	. . .
	<STYLE>div.cvet {color:red;}</style>
	. . .
	<BODY>
	. . .
	<DIV > . . .</div>
	
	<DIV class=cvet> . . .</div>
	. . .
	<DIV> . . .</div>

Id-селекторы служат для задания стиля элементу с указанным Id. Синтаксис Id-селектора:

		название_элемента#Id_элемента{блок_описаний}
	или
		#Id_элемента{блок_описаний}

Пример использования Id-селектора:

	. . .
	<STYLE>h1#zag1 {color:green;}</style>
	. . .
	<BODY>
	. . .
	<H1 Id="zag1">Зелёный карандаш</h1> <!--Заголовок зелёного цвета-->
	
	<H1> . . .</h1><!--Цвет заголовка по умолчанию-->
	. . .

Селекторы атрибутов служат для выбора стиля по названию атрибута. Выше уже были рассмотрены два селектора атрибутов: class и Id. При задании селекторов всех других атрибутов название атрибута нужно заключать в квадратные скобки:

	[название атрибута] {описание стиля}

Пример 7.2. Задания стилей для элементов с атрибутами title и align.

	<HTML>
	<HEAD>
		<STYLE> [title] {color:red;}
			[align]{background:blue;color:white;}
		</style>
	</head>
	<BODY>
		<P title='Новое'>Зубная паста "Чудо"</p>
		<H3 title='Фирма "Шанс"'>Товары для бритья</h3>
		<P align=center>Шампунь</p>
	</body>
	</html>

В примере имеется два элемента P. Текст, содержащийся в элементе P с атрибутом title, имеет красный цвет, а текст в элементе P с атрибутом align, окрашен в белый цвет на синем фоне. В красный цвет окрашен и тект злемента H3 с атрибутом title.

Выполнить пример 7.2

Псевдоклассы служат для применения стиля к элементу в момент изменения состояния последнего. Синтаксис псевдоклассов:

	название_элемента:Псевдокласс {блок_описаний}

Если название элемента опущено, то псевдокласс действует на все элементы документа.

Пример задания цвета ссылки в зависимости от её состояния:

	A:link    { color: red }    /* непосещённые ссылки */
	A:visited { color: blue }   /* посещённые ссылки   */
	A:hover   { color: yellow } /* пользователь провёл над */
	A:active  { color: lime }   /* активные ссылки    */

Заметьте, что A:hover обязательно нужно размещать после селекторов A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' селектора A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь либо активирует ссылку, либо проведёт над ней курсор.

Пример подчеркивания и изменения цвета ссылки при наведении на нее курсора и задания с помощью псевдокласса белого цвета и запрета подчеркивания непосещённой ссылки:

	A:hover { text-decoration: underline; /* подчёркивание ссылки при наведении на неё курсора*/
				color:	#77ff2f; /*Цвет ссылки */ } 
	A:link{color:white;text-decoration: none; /*запрет подчёркивания*/}

Псевдоэлементы в отличие от псевдоклассов определяются не синтаксически, а семантически.

Примером псевдоэлемента может служить первая буква абзаца, стиль которой задаётся следующим образом:

	P:first-letter{font-size:24px; color:red; font-family: 'Monotype Corsiva',  serif;}

Пример 7.3. Селектор типа P задаёт стиль всего абзаца, а псевдоэлемент P:first-letter задаёт стиль первой буквы абзаца.

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	<HTML>
	 <HEAD>
	  <TITLE>Псевдоэлементы</TITLE>
	  <STYLE type="text/css">
	   P              { font-size: 12pt; line-height: 12pt }
	   P:first-letter { font-size: 200%; font-style: 'Monotype Corsiva',Arial;
	                    font-weight: bold; float: left;color:#76FF55 }
	  </STYLE>
	 </HEAD>
	 <BODY>
	  <P>Жили-были старик со старухой.</P>
	 </BODY>
	</HTML>

Выполнить пример 7.3

Сложные селекторы

Рассмотрим следующие сложные селекторы:

Селектор потомков применяется в тех случаях, когда стиль нужно применить к элементу, являющемуся потомком другого элемента. Селектор предка отделяется от селектора потомка пробелом:

	селектор_предка селектор_потомок {блок_описаний}

Например, для окрашивания в синий цвет текста содержащегося в элементах SPAN, находящихся внутри элементов TD, т.е. ячеек таблиц, стиль задаётся так:

	td span {color:blue}

Селекторы потомков действуют на всех потомков, то есть на детей, внуков, правнуков и т.д. Если в ячейке таблицы находится другая таблица, то приведённый выше селектор будет действовать и на её ячейки.

Дочерние селекторы действуют только на детей и имеют следующий синтаксис:

	родитель > ребёнок {блок_описаний}

В следующем примере слово ЗЕЛЁНЫЙ в первом элементе span будет зелёного цвета, а во втором, вложенном в элемент P, то есть во внуке элемента DIV, будет чёрным, так как на внука дочерний селектор не действует.

	. . .
	<STYLE> 
		div>span {color:#00ff00;}
	</style>
	. . . 
	<DIV>Цвет - <SPAN>ЗЕЛЁНЫЙ</span>
		<P>Цвет - <SPAN>ЗЕЛЁНЫЙ</span></p>
	</div>

Cмежные селекторы-родственники используются для применения стиля к элементу только в том случае, если этот элемент расположен сразу после определённого элемента. Синтаксис стиля со смежными селекторами-родственниками:

	селектор1 + селектор2 {блок_описаний}

В следующем примере уменьшается вертикальное пространство, разделяющее следующие подряд заголовки H1 и H2:

	H1 + H2 { margin-top: -5mm }   

Приоритеты стилей

Значение свойства одного и того же элемента может встречаться многократно в файлах с расширением .css, элементах STYLE и атрибутах style. В зависимости от места и способа описания стиль имеет разные приоритеты. При загрузке HTML-документа браузер читает подряд все стили, содержащиеся в самом документе и во внешних файлах, и создаёт одну общую CSS. Из всех стилей, относящихся к одному элементу, браузер выбирает стиль с самым высоким приоритетом. Чем ниже в HTML-документе описан стиль, тем выше при прочих равных его приортет. Стили, размещённые в атрибуте style имеют более высокий приоритет, чем стили в файлах и элементе STYLE, так как атрибут style находится в самом элементе (ближе к объекту применения стиль разместить невозможно).

Для задания абсолютного приоритета, не зависящего от места описания стиля, служит правило !important. Если в примере 7.1 добавить в файл color1.css это правило:

	h1,p {color:#00ff00  ! important;},
 

то элементы h1 и p окрасятся в ярко-зелёный цвет.

Приоритеты селекторов

Рассмотрим два одинаковых стиля, задаваемые разными селекторами

	p.class1{color:red}
	p {color:#00ff00}
	
 

Из них будет выбран первый, так как приоритет селектора класса выше, чем селектора типа. Перечислим селекторы в порядке возрастания приоритетов: