Контекстные селекторы

Таблицы стилей CSS

CSS(Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки [1]. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа [2]. До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS) документа. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [3]. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3 [4].

Основными преимуществами использования CSS являются:

· несколько дизайнов страницы для разных устройств просмотра;

· уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;

· простота последующего изменения дизайна;

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

Недостатками использования CSS являются:

· различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;

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

Термин «Каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:

· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля – обычного, курсивного или полужирного.

· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)

· Выравнивание для текста, изображений, таблиц и других элементов.

· Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.

Рекомендация W3C по CSS2, принята 12 мая 1998 года. Она построена на CSS1 с сохранением обратной совместимости. В данной CSS2 добавлены следующие возможности:

· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.

· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).

· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).

· Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.

· Расширенный механизм селекторов.

· Указатели.

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

Рабочая версия CSS2.1 W3C от 8 сентября 2009 года. Она построена на CSS2 и содержит исправления ошибок.

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

CSS при отображении страницы может быть взята из различных источников:

· Авторские стили в виде:

o внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;

o встроенных стилей – блоков CSS внутри самого HTML-документа;

o inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;

· Пользовательские стили:

o локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;

· Стиль браузера:

o стандартный стиль, используемый браузером по умолчанию для представления элементов.

Пример таблицы стилей:

h2 {

font-size: 1.75em;

color: #469;

}

#container {

padding: 0;

}

#column_r_content, #column_l_content {

margin: 10px;

}

p#paragraph1 {

margin: 0;

}

#masthead img {

float: left;

margin: 0;

padding: 0;

}

#navigation a:hover {

color: #000;

text-decoration: none;

border: 1px solid #ed9;

background-color: #ed9;

}

.style_italic {

font-style: italic;

}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover, .style_italic.

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

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">Этот абзац будет выведен курсивом.</p>

Добавление CSS

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS [2, 5].

Таблица связанных стилей

При использовании таблицы связанных стилейописание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK> [5]. Данный тег помещается в контейнер <HEAD>.

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

…

<head>

…

<link rel="stylesheet" type="text/css" href="mysite.css">

<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">

…

</head>

…

Значения параметров тега <LINK> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Таблица глобальных стилей

При использовании таблицы глобальных стилейсвойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы [5]. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.

Пример использования таблицы глобальных стилей:

…

<head>

…

<style type="text/css">

p {

font-size: 110%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

</style>

</head>

Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.

Внутренние стили

Внутренний стильявляется по существу расширением для одиночного тега используемого на веб-странице [5]. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.

Пример использования внутренних стилей:

…

<body>

<p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</h1>

</body>

…

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

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

Базовый синтаксис

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис [2, 5]:

Селектор { свойство1: значение; свойство2: значение; ... }

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.

Селекторы тегов

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде [2, 5]:

Тег { свойство1: значение; свойство2: значение; ... }

Пример изменения стиля тега параграфа:

…

<head>

…

<style type="text/css">

p {

font-size: 110%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

</style>

</head>

В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.

Классы

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий [2, 5]:

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса".

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

…

<head>

…

<style type="text/css">

p {

font-size: 110%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

p.Color {

color: navy;

}

</style>

</head>

<p>Пример использования селектора тегов.</p>

<p class="Color">Пример использования класса.</p>

Результат данного примера показан на Рис. 3.1.

Рис. 3.1. Результат использования классов c тегами

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

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу.

Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.

Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий [2, 5]:

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

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

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

…

<head>

…

<style type="text/css">

#help {

position: absolute;

left: 160px;

top: 50px;

width: 225px;

height: 180px;

background: #f0f0f0;

}

</style>

</head>

В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id.

Результат данного примера показан на Рис. 3.2.

Рис. 3.2. Результат использования идентификатора

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

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.

Контекстный селекторсостоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий [2, 5]:

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.

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

…

<head>

…

<style type="text/css">

P B {

font-weight: bold;

color: navy;

}

</style>

</head>

<div><b>Жирное начертание текста</b></div>

<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>

В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста, как показано на Рис. 3.3.

Рис. 3.3. Результат использования контекстных селекторов

Замечание. Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа [5]. Рассмотрим пример отношения элементов:

<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>

Теги <VAR> и <B> представляют собой соседние элементы.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:

Селектор 1 + Селектор 2 { Описание правил стиля }

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

Соседние селекторыудобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.

Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.

Дочерние селекторы

Дочерним селекторомсчитается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий [2, 5]:

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

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

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

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.