Методические указания по использованию каскадных таблиц стилей css 2 Введение

• Название: Методические указания по использованию каскадных таблиц стилей css 2 Введение
• Дата: 15.03.2023
• Размер: 0.8 Mb.
• Имя файла: metodichka_po_css.pdf
• Тип: Методические указания; #991590
• страница: 1 из 3

ГБОУ СПО «Пермский промышленно-
коммерческий колледж»
Практические работы по
дисциплине
«Web-технологии»
Методические указания по использованию
каскадных таблиц стилей CSS

2
Введение
Каскадные таблицы стилей/Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов.
CSS совершенно необходим каждому, работающему с web-дизайном.
Этот учебник поможет вам начать работать с CSS всего через несколько часов. Он разъясняет всѐ очень доходчиво и научит вас сложной этой технологии.
Изучение CSS увлекает. Читая этот учебник, выделяйте достаточное количество времени для экспериментов с изученным в каждом уроке материалом.
Использование CSS требует знания основ HTML. Если вы не знаете HTML, то начните с Учебника HTML, прежде чем перейти к CSS.
Какое программное обеспечение необходимо иметь?
Не используйте при работе с этим учебником такие программы, как FrontPage,
DreamWeaver или Word. Эти продвинутые программы не помогут вам в изучении
CSS. Наоборот, они сильно ограничат ваше продвижение в этом направлении.
Вам понадобится бесплатный и простой текстовый редактор.
Например, Microsoft Windows поставляется с программой Notepad. Она обычно находится в Accessories меню Пуск, в Programs. Вы можете также использовать простой текстовый редактор, например Pico для Linux или Simple Text для
Macintosh.
Простой текстовый редактор идеально подходит для изучения HTML и CSS, поскольку он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.
С этим учебником можно использовать любой браузер. Мы советуем иметь новейшую версию браузера.
Браузер и простой текстовый редактор - вот всѐ, что вам необходимо.
Давайте начнѐм!

3
Урок 1: Что такое CSS?
Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом уроке вы узнаете, что такое CSS и что он может сделать для вас.
CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.
Что можно делать с помощью CSS?
CSS это язык стилей, определяющий отображение HTML-документов. Например,
CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите, и увидите!
HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).
Прочитав лишь несколько уроков этого учебника, вы сможете создавать собственные таблицы стилей и использовать CSS для придания вашему web-сайту великолепного вида.
В чѐм разница между CSS и HTML?
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
Сначала язык HTML использовался только для вывода структурированного текста.
Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя
HTML-тэги, такие как и
По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как
, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.
Это также привело к тому, что оригинальные тэги структурирования, такие как
, стали всѐ больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как , поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

4
CSS был создан для исправления этой ситуации путѐм предоставления web- дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами.
Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.
Какие преимущества даст мне CSS?
Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества
CSS: управление отображением множества документов с помощью одной таблицы стилей; более точный контроль над внешним видом страниц; различные представления для разных носителей информации (экран, печать, и т. д.); сложная и проработанная техника дизайна.
В следующем уроке мы поближе познакомимся с тем, как реально работает CSS и как вам начать работу.

5
Урок 2: Как работает CSS?
Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:
body {background-color: #FF0000;}
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

6
Но где размещать CSS-код? Именно этим вопросом мы и займѐмся сейчас.
Применение CSS к HTML-документу
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style
. Красный цвет фона можно установить так:


This is a red page

7

This is a red page

8


Эта ссылка указывает браузеру, что он должен использовать правила отображения
HTML-файла из
CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами
Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла -
HTML-файл и CSS-файл - такого содержания:
default.htm


Моя первая таблица стилей

10
Урок 3: Цвет и фон
В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства: color background-color background-image background-repeat background-attachment background-position background
Цвет переднего плана: свойство 'color'
Свойство color описывает цвет переднего плана элемента.
Например, представьте, что мы хотим сделать все заголовки документа тѐмно- красными.
Все заголовки обозначаются
HTML-элементом
В нижеприведѐнном коде цвет элемента

устанавливается красным. h1 {
color: #ff0000;
}
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения
(rgb(255,0,0)).
Свойство 'background-color'

11
Свойство background-color описывает цвет фона элемента.
В элементе

размещается всѐ содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу

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

и

body {
background-color: #FFCC66;
} h1 { color: #990000;
background-color: #FC9804;
}
Заметьте, что устанавливает два свойства для

, разделяя их точкой с запятой.
Фоновые изображения [background-image]
CSS-свойство background-image используется для вставки фонового изображения.
Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щѐлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.

12
Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге

и укажите местоположение рисунка. body { background-color: #FFCC66;
background-image: url("butterfly.gif");
} h1 { color: #990000; background-color: #FC9804;
}
NB: Обратите внимание, что мы специфицируем место, где находится файл как
url("butterfly.gif"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя,например, url("../images/butterfly.gif"), или даже на файлы в
Internet, указывая полный адрес файла : url("http://www.html.net/butterfly.gif").
Повторение/мультипликация фонового изображения
[background-repeat]

13
Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.
В таблице указаны четыре значения background-repeat
Значение
Описание
Background-repeat: repeat-x
Рисунок повторяется по горизонтали background-repeat: repeat-y
Рисунок повторяется по вертикали background-repeat: repeat
Рисунок повторяется по горизонтали и вертикали background-repeat: no-repeat
Рисунок не повторяется
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код: body { background-color: #FFCC66; background-image: url("butterfly.gif");
background-repeat: no-repeat;
} h1 { color: #990000; background-color: #FC9804;
}

14
Блокировка
фонового
изображения
[background-
attachment]
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.
В таблице указаны два значения background-attachment
. Щѐлкните на примере, чтобы почувствовать разницу между scroll и fixed.
Значение
Описание
Background-attachment: scroll
Изображение прокручивается вместе со страницей - разблокировано
Background-attachment: fixed
Изображение блокировано
Например, следующий код фиксирует изображение. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat;
background-attachment: fixed;
} h1 { color: #990000; background-color: #FC9804;
}

15
Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана.
Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position
. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:
В таблице дано несколько примеров.
Значение
Описание
background-position:
2cm
2cm
Рисунок расположен на 2 cm слева и на 2 cm сверху background-position:
50%
25%
Рисунок расположен по центру и на четверть экрана сверху background-position: top right
Рисунок расположен в правом верхнем углу страницы

16
В примере кода фоновое изображение располагается в правом нижнем углу экрана: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed;
background-position: right bottom;
} h1 { color: #990000; background-color: #FC9804;
}
Сокращѐнная запись [background]
Свойство background входит в состав всех свойств, перечисленных в этом уроке.
С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращѐнном виде, что облегчает чтение таблиц.
Например, посмотрите на эти строки: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed;

17 background-position: right bottom;
Используя background
, того же результата можно достичь одной строкой кода: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Порядок свойств этого элемента таков:
[background-color]
|
[background-image]
|
[background-repeat]
|
[background- attachment]
|
[background-position]
Если свойство отсутствует, оно автоматически получает значение по умолчанию.
Например, если background-attachment и background-position нет в данном примере: background: #FFCC66 url("butterfly.gif") no-repeat; то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.
Резюме
В этом уроке вы уже познакомились с техникой, отсутствующей в HTML. Ещѐ интереснее будет в следующем уроке, где мы рассмотрим широкие возможности
CSS при описании шрифтов.

18
Урок 4: Шрифты
В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств: font-family font-style font-variant font-weight font-size font
Семейство шрифта [font-family]
Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.
Для категоризации шрифтов используются два типа имѐн: имя семейства/family- name и общее/родовое семейство/generic family. Эти два термина объясняются далее.
Family-name
Пример family-name (часто называемое просто "шрифт") это, например,
"Arial", "Times New Roman" или "Tahoma".
Generic family
Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".
Разницу можно также проиллюстрировать так:

19
При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.
Список шрифтов может выглядеть так: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Заголовки

будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.
Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.
Стиль шрифта [font-style]
Свойство font-style определяет normal, italic или oblique. В примере все заголовки

будут показаны курсивом italic.

20 h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}
Вариант шрифта [font-variant]
Свойство font-variant используется для выбора между вариантами normal и small-
caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:
Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра. h1 {font-variant: small-caps;} h2 {font-variant: normal;}
Вес шрифта [font-weight]
Свойство font-weight описывает, насколько толстым, или "тяжѐлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}

21
Размер шрифта [font-size]
Размер шрифта устанавливается свойством font-size
Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространѐнные и удобные единицы измерения. Вот примеры: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт
доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.
Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet
Explorer. Попробуйте сами - прекрасное свойство, как вы полагаете?

22
Сокращѐнная запись [font]
Используя сокращенную запись font
, можно указывать все свойства шрифта в одном стилевом правиле.
Например, вот четыре строки описания свойств шрифта для
: p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

23
Используя сокращѐнную запись, код можно упростить: p {
font: italic bold 30px arial, sans-serif;
}
Порядок свойств font таков: font-style
| font-variant
| font-weight
| font-size
| font-family
Резюме
Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь. В следующем уроке мы разберѐмся с текстом.

24
Урок 5: Текст
Форматирование и установка стиля текста - ключевая проблема для любого web- дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства: text-indent text-align text-decoration letter-spacing text-transform
Отступы [text-indent]
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам
: p { px;
}
Выравнивание текста [text-align]
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях
HTML. Текст может быть выровнен left, right, centred или justify.
В примере текст заголовочных ячеек таблицы

выравнивается вправо, а в ячейках данных

- по центру. Кроме того, нормальные параграфы - justify: th { text-align: right; 25 } td { text-align: center; } p { text-align: justify; } Декоративный вариант [text-decoration] Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере подчѐркнуты, - имеют черту над текстом, а - перечѐркнуты. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; 26 } Интервал между буквами [letter-spacing] Интервал между буквами текста можно специфицировать свойством letter- spacing . Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах и 6px - в заголовках , то используется такой код: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } Трансформация текста [text-transform] Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде. Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform: capitalize Капитализирует каждое слово. Например: "john doe" станет "John Doe". uppercase 27 Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE". lowercase Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe". none Трансформации нет - текст отображается так же, как в HTML-коде. Для примера мы используем список имѐн. Все имена выделены с помощью (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром. Видите, HTML-код в этом примере в действительности записан в нижнем регистре. h1 { text-transform: uppercase; } li { text-transform: capitalize; } Резюме В течение трѐх последних уроков вы вы изучили несколько CSS-свойств, но их - множество. В следующем уроке мы рассмотрим работу со ссылками. 28 Урок 6: Ссылки Всѐ изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчѐркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы. Что такое псевдокласс? Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга. Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом . В CSS мы также можем использовать a в качестве селектора: a { color: blue; } Ссылка может иметь разные состояния. Например, еѐ уже посетили/visited или ещѐ нет. Можно использовать псевдоклассы для установки разных стилей посещѐнных и непосещѐнных ссылок. a:link { color: blue; } a:visited { color: red; 29 } Используйте |a:link| и |a:visited| для непосещѐнных и посещѐнных ссылок, соответственно. Активные ссылки имеют псевдокласс a:active , и a:hover , когда указатель - над ссылкой. Мы рассмотрим каждый их этих четырѐх псевдоклассов на примерах и с объяснениями. Псевдокласс: link Псевдокласс :link используется для ссылок на страницы, которые пользователь ещѐ не посещал. В примере кода непосещѐнные ссылки - синие. a:link { color: #6699CC; } Псевдокласс: visited Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещѐнные ссылки - фиолетовые. a:visited { color: #660099; } 30 Псевдокласс: active Псевдокласс :active используется для активных ссылок. В примере активные ссылки имеют жѐлтый фон. a:active { background-color: #FFFF00; } Псевдокласс: hover Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши. Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так: a:hover { color: orange; font-style: italic; } Пример 1: Эффект при нахождении указателя над ссылкой Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover 31 Пример 1a: Расстояние между буквами Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing . Это можно применить для ссылки: a:hover { letter-spacing: 10px; font-weight:bold; color:red; } Пример 1b: UPPERCASE и lowercase В Уроке 5 мы рассмотрели свойство text-transform , которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте! Пример 2: Удаление подчѐркивания ссылок 32 Обычный вопрос - как удалить подчѐркивание ссылок? Вы должны точно определить, нужно ли убрать подчѐркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчѐркнутые ссылки и знают, что по ним нужно щѐлкать. Даже моя мама знает это! Если вы уберѐте подчѐркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт. Вообще-то удалить подчѐркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчѐркивания текста. Для удаления подчѐркивания просто установите в text-decoration значение none. a { text-decoration:none; } Альтернативно можно также установить text-decoration , наряду с другими свойствами, для всех четырѐх псевдоклассов. a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } 33 a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; } Резюме В этом уроке вы узнали о том, что такое псевдоклассы, используя некоторые свойства из предыдущих уроков. Это должно показать вам, какие возможности заложены в CSS. В следующем уроке мы научим вас определять свойства конкретных элементов и групп элементов. 34 Урок 7: Идентификация и группирование элементов (class и id) Иногда вам нужно будет применить особый стиль к определѐнному элементу или конкретной группе элементов. В этом уроке мы подробно разберѐм, как можно использовать class и id для специфицирования свойств выбранных элементов. Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке. Группирование элементов с помощью class Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким: Виноград для белого вина: Рислинг Шардонэ Пино Блан Виноград для красного вина: Кабернэ Совиньон Мерло Пино Нуар 35 Далее, мы хотим, чтобы ссылки на белое вино были жѐлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими. Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class Попробуем установить классы для предыдущего примера: Виноград для белого вина: Рислинг Шардонэ Пино Блан Виноград для красного вина: Кабернэ Совиньон Мерло Пино Нуар Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно. a { color: blue; 36 } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определѐнному классу, с помощью .имя_класса в таблице стилей документа. Идентификация элемента с помощью id Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id . Каждый id должен быть уникальным. В других случаях используйте атрибут class . Теперь взглянем на пример использования id :