Что такое CSS? - Internet (WEB-программирование) - Программирование - Каталог статей

Таблица стилей документа представляет собой набор правил, ассоциированных с документом HTML и определяющих его отображение. Каждое правило в таблице стилей состоит из селектора и блока объявлений. Блок объявлений всегда отделяется от селектора пробелом и заключается в фигурные скобки. Селектор определяет область применения стилевого правила, а блок объявлений содержит одно или несколько объявлений, которые отделяются друг от друга точкой с запятой.

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

P {font-family: arial; color: red}

В приведенном примере свойству font-family, определяющему вид шрифта, присваивается значение arial, а свойству color, определяющему цвет шрифта, – значение red. Поскольку блок объявлений соотносится с селектором P, то областью применения данного стилевого правила будут являться все элементы <P>…</P>.

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

Универсальные селекторы. Универсальные селекторы позволяют применить стилевое оформление сразу ко всем элементам на странице. Например, следующее правило устанавливает сплошную границу толщиной 1 пиксел для каждого элемента на странице:

* {border: 1px solid;}

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

P {font-size: 1.2em; margin: 10px 20px;}

Приведенное выше правило будет применяться ко всем элементам <P>…</P>.

Селекторы классов. Напомним, что Спецификация HTML 4.01 предусматривает для всех элементов специальный атрибут class, который позволяет особым образом отметить некоторые структурные элементы в документе, например

<P class="important">...</P>

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

P.important {padding-left: 20px;}

В приведенном примере стилевое правило будет применяться только к тем элементам <P>…</P>, атрибут class которых имеет значение important.

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

.important {padding-left: 20px;}

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

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

<DIV id="header">...</DIV>

Главное отличие идентификаторов от классов заключается в том, что каждое значение атрибута id должно быть уникальным. Идентификаторы в селекторах указываются после имен элементов и предваряются символом #:

DIV#header {width: 1000px;}

Данное стилевое правило будет применяться к единственному экземпляру элемента <DIV>…</DIV>, которому назначен атрибут id со значением header. Если в селекторе используется идентификатор без указания конкретного элемента, то такое стилевое правило будет применяться к единственному экземпляру любого элемента, значение id которого равно header:

#header {width: 1000px;}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила. Например, запись

соответствует всем параграфам со значением class равным warning;

соответствует элементу DIV со значением атрибута id равным example;

P.info, LI.highlight{}

соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

Группировка селекторов

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

P, UL {font-size: 1.2em; line-height: 1.5em;}

В приведенном примере для двух элементов P и UL назначается одинаковый размер шрифта и межстрочный интервал. Синтаксис каскадных таблиц стилей позволяет легко группировать не только простейшие селекторы с именами элементов, но также и другие типы селекторов. В некоторых случаях подобная группировка позволяет значительно сократить размер CSS-файла.

Дополнительные селекторы CSS

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

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

IMG[alt] {border: 1px solid;}

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

IMG[src="image.jpg"] {border: 1px solid;}

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

H1 > STRONG {color: blue;}

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

<DIV>
 <STRONG>Первый потомок элемента DIV</STRONG>
 <P>Второй потомок элемента DIV 
 <STRONG>Единственный потомок элемента P</STRONG>.
 </P>
</DIV>

В этом фрагменте элемент DIV является предком всех других элементов: двумя его потомками являются элементы STRONG и P. Элемент P имеет один элемент-потомок - еще один STRONG. Можно использовать селектор потомков для выбора только первого элемента STRONG, находящегося непосредственно внутри DIV следующим образом:

DIV > STRONG { ... }

Если вместо этого использовать селектор нижележащих элементов, то будут выбраны оба элемента STRONG:

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

H1 + P { ... }

Псевдоклассы

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

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

a:link {color: red;}
a:visited {color: green;}

В приведенном выше примере первое стилевое правило будет применяться к непосещенным ссылкам в документе, а второе - к посещенным.

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

Псевдокласс :hover применяется к соответствующему элементу в случае, когда пользователь навел курсор мыши на этот элемент, но не активировал его щелчком мыши.

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

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

CSS не определяет, к каким именно элементам могут применяться указанные псевдоклассы. Однако современные браузеры поддерживают их только применительно к HTML-элементам A, т.е. к ссылкам, например:

A:link {color: red} 
A:visited {color: blue} 
A:hover {color: yellow} 
A:active {color: green}

Псевдокласс :first-child. Данный псевдокласс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка любого вида и делает его текст жирным:

LI:first-child {font-weight: bold;}

Псевдокласс :lang. Псевдокласс :lang позволяет выбирать элементы, язык которых был задан как определенный язык с помощью атрибута lang. Например, следующий элемент

<P lang="en-US">London is a capital of Great Britan.<P>

можно было бы выбрать с помощью кода

p:lang(en-US) { ... }

Псевдоэлементы

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

P:first-letter {
 font-weight: bold;
 font-size: 200%
 }

Первая буква каждого параграфа будет теперь жирной и на 200% больше остального текста параграфа.

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

P:first-line {font-weight: bold;}

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

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

Включение таблиц стилей в HTML-документ

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

Внешние таблицы стилей

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

...
<HEAD>
 <LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
...

В элементе LINK можно дополнительно указать типы устройств, на которые распространяется данная таблица стилей, например:

<LINK rel="stylesheet" href="style.css" type="text/css"
 media="screen, print">

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

Внутренние таблицы стилей

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

...
<HEAD>
 <STYLE type="text/css">
 H1 {text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1>Этот заголовок имеет указанный выше стиль</H1>
</BODY>

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

Таблицы стилей элементов

Последним способом задания стилей является определение таблицы стилей отдельного элемента путем задания его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:

<H1 style="text-align: center">

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

Наследование

Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам. Наследуются не все свойства CSS: например, поля не наследуются, так как маловероятно, что элементу-потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в Спецификации CSS (http://www.w3.org/TR/CSS21/propidx.html). Однако следует помнить, что значения, заданные в виде процентных величин, не наследуются никогда.

Пусть, например, элемент H1 содержит элемент EM:

<H1>Этот заголовок <EM>очень важен</EM>!</H1>

Если элементу EM не присвоен цвет, то он унаследует цвет своего предка, т.е. элемента H1. Для задания стиля отображения элементов по умолчанию, достаточно задать стиль элемента BODY. Все остальные элементы являются потомками этих элементов, поэтому они будут наследовать их свойства.

Для свойств, которые не наследуются по умолчанию, можно определить принудительное наследование, используя ключевое слово inherit. Например, следующее правило заставит все параграфы наследовать все свойства фона от своих предков:

P {background: inherit;}

Принудительное наследование не предназначено для постоянного использования. Оно может быть полезно для отмены объявления в конфликтующем правиле. Однако данный вид наследования необходимо использовать с осторожностью, так как, например, Internet Explorer, включая версию 7, не поддерживает это ключевое слово.

Каскадирование

Сам термин CSS означает Каскадные таблицы стилей (Cascading Style Sheets), поэтому нет ничего удивительного, что каскадирование является его важной характеристикой. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяется к одному элементу. Например, поверх стилевых спецификаций, примененных к какой-нибудь отдельной веб-странице, может действовать стилевой файл, общий для всех страниц веб-сайта.

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

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

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

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

Таблица стилей автора является таблицей стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил к соответствующему документу HTML или включил в него.

Как правило, вес правил таблицы автора больше, чем вес правил таблицы пользователя, а вес правил таблиц автора и пользователя больше, чем вес правил таблицы агента пользователя.

Для того, чтобы правила пользовательской таблицы стилей могли перекрывать авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы стилей, имеющее такой атрибут, имеет больший вес, чем соответствующее правило авторской таблицы стилей. Например, если в пользовательской таблице определено следующее ниже правило, то не имеет значения, что определил автор веб-страницы, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере - все будет выводиться шрифтом Comic Sans MS.

* {
 font-family: "Comic Sans MS" !important;
}

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

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

Синтаксис CSS