18

Лабораторная работа № 2 применение каскадных таблиц стилей (cascade style sheets)

Цель работы: приобрести навыки по настройке web-страниц с использованием каскадных таблиц стилей.

Теоретические сведения Базовые селекторы

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

Таблица 1 Базовые селекторы таблиц стилей

Формат селектора	Название селектора	Элемент, стилизуемый селектором на HTML-странице
a	Тег	Все HTML-теги указанного типа. Под a в столбце 1 понимается имя любого из тегов языка HTML.
.имя_класса	Класс	Все HTML-теги, значение атрибута class которых содержит имя указанного класса.
a.имя_класса	Зависимый класс	Все теги этого типа, значение атрибута class которых содержит имя указанного класса.
#идентификатор	Идентификатор	HTML-тег, атрибуту id которого присвоено значение указанного идентификатора.
a#идентификатор	Зависимый идентификатор	HTML-тег этого типа, атрибуту id которого присвоено значение указанного идентификатора.
*	Универсальный	Все HTML-теги.

Контекстная стилизация

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

Контекстная стилизация приближает CSS к традиционному программированию, позволяя применять стили к элементам, если они удовлетворяют определенным критериям.

Вложенность элементов веб-страницы

Когда одни теги располагаются внутри других контейнерных тегов, образуется дерево вложенности элементов, представленными этими тегами, например:

<h2><strong>Глава 2</strong> Озеро слез<h2>

При вложенности тегов внешний элемент (в примере - <h2>) называется родительским (parent), а внутренний элемент (в примере - <strong>) называется дочерним (child). Дочерний элемент и все его дочерние элементы называются потомками (descendents) родительских элементов. Элементы того же родителя называются сестринскими элементами (siblings), а два дочерние элементы, следующие рядом друг за другом, называются соседними сестринскими (adjacent siblings) элементами.

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

Комбинаторные селекторы таблиц стилей

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

Таблица 2 Комбинаторные селекторы таблиц стилей

Формат селектора	Название селектора	Условие стилизации элемента
a b	Выбор потомков	b является потомком a.
a > b	Выбор дочерних элементов	b является дочерним для a.
a + b	Выбор смежных сестринских элементов	Сестринский элемент b непосредственно следует за сестринским a.
a ~ b	Выбор любых сестринских элементов	Сестринский элемент b следует за другим сестринским a, но между ними могут быть сестринские элементы другого типа.
.имя_класса_1.имя_класса_2	Множественные классы	Элемент, значение атрибута class которого имена обоих классов.

Используя комбинаторные селекторы можно применять стили к тегам, основываясь на их отношениях к другим тегам, классам и идентификаторам.