HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 7

Введение в таблицы стилей и язык CSS

 

 

7.1. Встраивание CSS в HTML

7.2. Синтаксис CSS

7.3. Селекторы

7.4. Псевдоэлементы и псевдоклассы

7.5. Правило @media

7.6. Правила!important

7.7. Правило @impor

В этой главе вы изучите основы языка CSS. Вы увидите, насколько легко разрабатываются таблицы стилей. Для этого достаточно лишь иметь общие представления о языке HTML, который мы подробно разобрали в предыдущих главах. Язык CSS в настоящее время считается основным средством оформления веб-страниц, пришедшим на смену тегов и атрибутов форматирования. Язык HTML 4 пока еще поддерживает эти средства, но они относятся к числу устаревших и нежелательных. В языке же XHTML оформление веб-страниц допускается только средствами CSS, поэтому если вы хотите, чтобы ваш сайт служил долгие годы, с самого начала создавайте его средствами CSS.

 

7.1. Встраивание CSS в HTML

Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).

Листинг 7.1. Простой HTML-документ

Моя домашняя страница

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:

h1 { color: blue }

Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.

В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.

Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.

Листинг 7.2. CSS внутри HTML-документа

Моя домашняя страница

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если код таблицы стилей находится во внешнем файле, то вы имеете возможность использовать его во всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если вы захотите внести какие-то изменения, то вам придется изменять код на каждой странице. Используя внешние таблицы стилей, вы лишь один раз внесете изменения в CSS-файл таблицы стилей.

Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.

Листинг 7.3. Таблица стилей во внешнем файле

Моя домашняя страница

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Как вы заметили, элемент LINK имеет несколько атрибутов. Рассмотрим их названия и подробное описание:

• rel – тип соединения, который для таблиц стилей задается как stylesheet;

• href – местонахождение таблицы стилей, то есть адрес и имя файла. В нашем примере в листинге 7.3 это my_style.css;

• type – тип присоединяемой таблицы стилей. Поскольку элемент LINK может использоваться для присоединения и других файлов в HTML-документ, то желательно указать тип присоединяемого файла. Для таблиц стиля это значение text/css.

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, добавим в наш пример больше цветов (листинг 7.4), используя элемент STYLE.

Листинг 7.4. Оформление документа

Моя домашняя страница

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом red, в то время как второе – отображение текста, находящегося внутри элемента H1, синим цветом blue. Поскольку для элемента P значение цвета не было задано, то он унаследует цвет от родительского элемента, а именно от основного текста: элемента BODY. Элемент H1 также является дочерним элементом основного текста, но второе правило переопределяет унаследованное им значение.

В CSS существует более 100 различных свойств, одним из которых и является свойство color. Рассмотрим некоторые другие свойства на примере из листинга 7.5.

Листинг 7.5. Различные свойства CSS

Моя домашняя страница

Моя домашняя страница

На этой странице вы найдете информацию обо мне и моих друзьях.

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

Разберем каждую строку отдельно.

• Первая строка для элемента BODY устанавливает семейство шрифтов Some Type. Если этот тип шрифтов недоступен, то браузер будет использовать шрифт SansSerif, который является одним из пяти шрифтов, распознаваемых всеми браузерами. Все дочерние элементы наследуют значение font-fami l y элемента BODY. В последующих главах мы подробно разберем работу со шрифтами.

• Вторая строка устанавливает размер шрифта элемента BODY равным 12 пунктам. Далее мы подробно рассмотрим единицы измерения, которые могут использоваться в CSS, и их различия.

• Третья строка задает размер полей вокруг документа, хотя в ней используется уже другая единица измерения: em.

 

7.2. Синтаксис CSS

 

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

 

Ключевые слова

В CSS, как и в других языках программирования, есть ключевые слова. Помните, что в CSS они не должны заключаться в кавычки («…» или …). Так, например, red – это ключевое слово, а «red» – нет. Для большего понимания приведу еще примеры недопустимого написания:

width: В«autoВ»;

background: "green";

border: "none";

Рассмотрим каждую строку отдельно. Итак, в первой строке ширина должна задаваться автоматически. Для автоматической задачи ширины нужно использовать ключевое слово auto без кавычек. Во второй строке используется ключевое слово green, которое означает название цвета «зеленый», а в третьей – ключевое слово none, означающее, что рамка не будет видна вообще. Как и в предыдущих строках, оно не должно заключаться в кавычки.

 

Комментарии

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

Приведем пример CSS-кода с комментарием:

/* Цвет основного заголовка – синий */

h1 { color: blue }

Из записи в комментарии понятно, что делает данное CSS-правило.

 

Правила@

Правила @ начинаются с ключевого слова @, непосредственно за которым следует идентификатор (например, @import, @page). Каждый из этих идентификаторов далее рассмотрим подробнее.

Все же надо отметить, что браузер с поддержкой CSS будет игнорировать все правила @import, которые находятся внутри блока CSS либо не предшествуют ни одному набору правил. Лучше всего это понять из примера. Рассмотрим неверную таблицу стилей:

@import В«subs.cssВ»;

h1 { color: blue }

@import "list.css";

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

@import В«subs.cssВ»;

h1 { color: blue }

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

@import В«subs.cssВ»;

@media print {

@import "print-main.css";

body { font-size: 10pt }

}

h1 {color: blue }

В этом примере второе правило @import недопустимо, так как оно находится в пределах другого блока @media.

В последующих разделах мы подробно разберем каждое правило @.

 

7.3. Селекторы

 

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

 

Группировка

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

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

h1 { color: red }

h2 { color: red }

h3 { color: red }

Вышеприведенный пример можно значительно упростить, используя правило группировки:

h1, h2, h3 { color: red }

Как отмечалось выше, при группировке селекторы разделяются запятыми.

 

Селекторы потомков

Иногда необходимо задать свойства элементу, который располагается непосредственно внутри какого-то другого элемента, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.

Допустим, внутри HTML-документа есть такой код:

Очень важный заголовок

Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:

h1 { color: red }

em { color: blue }

Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:

h1 em { color: blue }

Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:

body div p span { color: green }

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

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

Пример, представленный выше, можно переписать так:

body * span { color: green }

Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Иными словами, звездочкой считается любой набор селекторов и их потомков.

 

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

Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя такой код:

p.first + p { margin-top: -5mm }

Создайте простую страницу и поэкспериментируйте с данным свойством, и вы быстро освоите, что такое сестринские селекторы в CSS.

 

Селекторы атрибутов

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

• [att] – если для элемента установлен атрибут att независимо от значения этого атрибута.

• [att=val] – когда значение атрибута att данного элемента в точности равно val.

• [att~=val] – если значением атрибута att данного элемента является список слов, разделенных пробелами, одно из которых в точности равно val.

• [att|=val] – когда значением атрибута att элемента является начинающийся со слова val список разделенных дефисом слов. Сопоставление всегда начинается с начала значения атрибута.

Чтобы хорошо разобраться с данным свойством, рассмотрите ряд примеров и подробных комментариев к ним.

Итак, следующее правило CSS сопоставляется всем элементам P, для которых описан атрибут align, независимо от его значения:

p[align] { color: blue; }

В следующем примере селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class в точности равно example:

span[class=example] { color: blue; }

Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В следующем примере селектор сопоставляется всем элементам TABLE, у которых значение атрибута width в точности равно 90 %, а значение атрибута height в точности равно 50 %:

table[width="90%"][height="50%"] { color: blue; }

Следующие селекторы иллюстрируют различия между знаками = и ~=. Первый селектор будет сопоставляться, например, значению copyright copyleft copyall атрибута rel. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно :

a[rel~="copyright"]

a[href="http://www.yoursite.com/"]

Следующее правило скрывает все элементы, атрибут lang которых имеет значение fr, то есть элементы с текстом на французском языке:

*[lang=fr] { display : none }

Следующее правило будет сопоставляться тем значениям атрибута lang, которые начинаются с ru, включая ru, ru-RU и ru-UA:

*[lang|="ru"] { color : red }

 

Селекторы классов

В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (.).

Например, для всех элементов с class~=test информацию о стиле можно определить следующим образом:

*.test { color: red } /* все элементы с class~=test */

или просто

.test { color: red } /* все элементы с class~=test */

Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1с class~=test:

h1.test { color: green } /* элемент H1 с class~=test */

Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором – будет:

Не зеленый цвет

Настоящий зеленый цвет

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

Например, следующее правило сопоставляется любому элементу P, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:

p.test.marine { color: green }

Это правило сопоставляется, если, например, для элемента P задано class = «Test blue aqua marine», и не сопоставляется, если задано class = «test blue».

 

ID-селекторы

Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за которым следует значение атрибута ID.

Например, следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно chapter7:

h1#chapter7 { text-align: center }

В листинге 7.6 правило стиля сопоставляется элементу, у которого значение атрибута ID равно z98y. Иначе говоря, это правило будет сопоставляться элементу P.

Листинг 7.6. ID-селекторы

Глава 7

Текст абзаца

Однако в примере из листинга 7.7 это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно z98y. В этом примере данное правило не сопоставляется элементу P.

Листинг 7.7. ID-селекторы

Глава 7

Текст абзаца

Надо отметить, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе селектор #p123 более специфичен, чем [ID=p123].

 

7.4. Псевдоэлементы и псевдоклассы

 

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

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

Сразу отмечу, что имена псевдоклассов и псевдоэлементов учитывают регистр.

Начнем изучение с псевдокласса: first-child.

 

Псевдокласс :first-child

Псевдокласс: first-child сопоставляется элементу, который является первым дочерним элементом другого элемента.

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

В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним по отношению к элементу DIV. Проще говоря, это правило запрещает отступ для первого абзаца элемента DIV:

div > p:first-child { text-indent: 0 }

Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:

Последний P перед примечанием.

Первый P внутри примечания.

Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2:

Последний P перед примечанием.

Примечание

Первый P внутри примечания.

В следующем примере устанавливается ширина шрифта bold для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:

p:first-child em { font-weight : bold }

Обратите внимание, что, поскольку безымянные блоки не являются частью дерева документа, они не учитываются во время определения первого дочернего элемента. Например, EM в этом примере является первым дочерним элементом по отношению к P:

Это полужирный текст.

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

font-weight : bold

 

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

Обычно браузеры пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы: link и: visited для различения этих типов ссылок и задания им своего стиля:

•:link – применяется, если ссылка не была просмотрена;

•:visited – используется, если ссылка была просмотрена посетителем.

Язык HTML определяет элементы, которые служат точками привязки гиперссылки. В HTML 4 псевдоклассы ссылок применяются к элементам A с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:

a:link { color: red }

:link { color: red }

Если ссылка перейти была просмотрена, то согласно правилу a.external:visited { color: blue } она будет представляться синим цветом.

 

Динамические псевдоклассы

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

•:hover – применяется, когда пользователь с помощью некоторого указывающего устройства (как правило, мыши) выделяет элемент, но не активизирует его. Например, браузер пользователя может применять этот псевдокласс, когда указатель мыши находится поверх поля, генерируемого данным элементом.

•:active – используется, когда элемент активизируется посетителем. Например, между моментами, когда он нажимает кнопку мыши и отпускает ее.

•:focus – применяется, когда элемент находится в центре некоторых событий. Например, обрабатывает события клавиатуры или другие типы ввода текста.

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

a:link { color: red } /* непросмотренные ссылки */

a:visited { color: blue } /* просмотренные ссылки */

a:hover { color: yellow } /* ссылка, над которой в данный момент находится указатель */

a:active { color: white } /* активные ссылки */

Обратите внимание, что правило a: hover должно располагаться после правил a: link и a: visited, так как в противном случае правила каскадирования скроют свойство color правила a: hover. Аналогичным образом благодаря тому, что a: active находится после a: hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Рассмотрим пример сочетания динамических псевдоклассов:

a:focus { background: yellow }

a:focus:hover { background: white }

Во второй строке правило CSS сопоставляется элементам A, которые находятся в псевдоклассах focus и: hover.

 

Псевдокласс :lang

Если в языке HTML-документа определен разговорный язык элемента, то CSS позволяет создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML язык определяется сочетанием атрибута lang, элемента META и, возможно, информацией из протокола (такой, как заголовки HTTP).

Псевдокласс: lang (ru) сопоставляется элементу, использующему язык ru. Здесь ru – код языка. Он сопоставляется аналогично оператору |=. Приведу для примера несколько языков и коды:

• ru – русский;

• en – английский;

• fr – французский;

• de – немецкий;

• jp – японский.

Например, следующие правила расставляют кавычки в HTML-документе, написанном на французском либо немецком языке:

html:lang(fr) { quotes: " " }

html:lang(de) { quotes: " " \2039 \203A }

:lang(fr) > Q { quotes: " " }

:lang(de) > Q { quotes: " " \2039 \203A }

Вторая пара правил фактически задает свойство quotes для элементов Q в соответствии с языком их родительских элементов. Это сделано потому, что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста «а limproviste», расположенного в английском тексте и использующего английские кавычки.

 

Псевдоэлемент first-line

Псевдоэлемент: first-line используется для применения стилей к первой строке абзаца. Например:

p:first-line { text-transform: uppercase }

Представленное выше правило указывает сделать буквы первой строки каждого абзаца заглавными. Однако селектор p: first-line не соответствует ни одному реальному HTML-элементу. Он сопоставляется псевдоэлементу, который браузеры пользователей будут помещать в начало каждого абзаца.

Обратите внимание, что длина первой строки зависит от множества таких факторов, как ширина страницы, размер шрифта и др.

Типичный абзац HTML-документа, как этот:

Это довольно длинный абзац

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

претерпит следующую реорганизацию строк:

!!!

ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА,

который будет разбит на несколько строк.

Первая строка будет отмечена последовательностью

функциональных тегов. Другие строки

будут обрабатываться как обычные строки абзаца.

Он будет «переписан» браузерами пользователей так, чтобы включить последовательность функциональных тегов для: first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства:

Это довольно длинный абзац HTML-документа,

который будет разбит на несколько строк.

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

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

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

последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.

Теперь браузер пользователя сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тегов для: first-line. Получится следующее:

Это

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

Псевдоэлемент: first-line может прикрепляться только к элементам уровня блока. Он подобен строковому элементу, но с некоторыми ограничениями. К псевдоэлементу: first-line применяются следующие свойства: свойства шрифтов, цветов, фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.

 

Псевдоэлемент first-letter

Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он аналогичен перемещаемому объекту.

К псевдоэлементам: first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, text-decoration, vertical-align (если для свойства float установлено значение none), text-transform, line-height, свойства полей, полей в ячейке таблицы, рамок, float, text-shadow и clear.

В следующем примере из листинга 7.8 высота буквицы устанавливается равной высоте двух строк.

Листинг 7.8. Стиль заглавной буквы

Глава 7. Стиль заглавной буквы

Первые несколько слов из книги

"Самоучитель по HTML и CSS".

Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.

Рис. 7.1. Стиль заглавной буквы

Приведу последовательность функциональных тегов:

Рџ

ервые

несколько слов из статьи в журнале "Экономист".

Обратите внимание, что теги псевдоэлементов: first-letter примыкают к содержимому (например, к начальному символу), а открывающий тег псевдоэлемента: first-line вставляется сразу после открывающего тега элемента, к которому он прикрепляется.

Учтите, что в некоторых языках могут существовать специальные правила обращения с определенными сочетаниями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе находятся в псевдоэлементе: first-letter.

В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен 24 пункта. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца – красным. CSS-код примера будет выглядеть следующим образом:

p { color: red; font-size: 12pt }

p:first-letter { color: green; font-size: 200% }

p:first-line { color: blue }

Например, рассмотрим этот CSS код применительно к такому абзацу:

Некоторый текст, разделенный на две строки

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

РќРµ

который текст,

разделенный на две строки

Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.

 

Псевдоэлементы :before и: after

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

h1:before {content: counter(chapno, upper-roman) ". "}

Когда псевдоэлементы: first-letter и: first-line сочетаются с псевдоэлементами: before и: after, они применяются к первой букве или строке элемента, включая вставляемый текст.

p.special:before {content: "Важно! "}

p.special:first-letter {color: gold}

Буква В слова Важно! будет представлена золотистым цветом.

 

7.5. Правило @media

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

Например:

@media print {

body { font-size: 10pt }

}

@media screen {

body { font-size: 12pt }

}

В примере при просмотре документа на экране размер шрифта будет 10 пунктов, а при печати 12 пунктов.

Рассмотрим еще один пример:

@media screen, print {

body { font-size: 14pt }

}

В этом примере и при печати, и при просмотре размер шрифта будет одинаковый – 14 пунктов.

Рассмотрим список всех устройств, поддерживаемых CSS. Значение указывает, что документ предназначен:

• all – для всех устройств;

• aural – речевых синтезаторов;

• braille – устройств чтения азбуки Брайля;

• embossed – печати азбуки Брайля;

• handheld – переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот);

• print – страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати;

• projection – настенных презентаций, например для проекторов или для печати плакатов;

• screen – цветных дисплеев;

• tty – устройств, использующих набор символов с фиксированной шириной, например телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения; для устройств типа tty не следует использовать пикселы;

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

Следует отметить, что названия типов устройств не зависят от регистра.

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

Таблица 7.1. Группы устройств

Значение both в таблице означает, что используются устройства всей группы.

Приведу перевод названий типов устройств:

• без разбивки – continuous;

• с разбивкой – paged;

• визуальные – visual;

• звуковые – aural;

• тактильные – tactile;

• сеточные – grid;

• растровые – bitmap;

• интерактивные – interactive;

• статичные – static.

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

 

7.6. Правила !important

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

Однако для соблюдения баланса объявление!important наделяется преимуществом перед обычным объявлением. Таблицы стилей как разработчика, так и пользователя могут содержать объявления!important, но пользовательские правила!important имеют приоритет над правилами!important разработчика. Эта особенность CSS улучшает возможность доступа к документам, предоставляя пользователям со специальными требованиями (большие размеры шрифтов, сочетания цветов и т. д.) более гибкий контроль над представлением.

Надо отметить, что объявление свойства стенографического типа (например, background) как !important равнозначно объявлению всех содержащихся в нем свойств как !important.

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

/* Из пользовательской таблицы стилей */

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 18pt }

/* Из таблицы стилей разработчика */

p { text-indent: 1.5em !important }

p { font: 12pt sans-serif !important }

p { font-size: 24pt }

 

7.7. Правило @import

Правило @import позволяет импортировать правила стилей из других таблиц стилей. Массив правил @import должен предшествовать всем другим правилам в таблице стилей. После ключевого слова @import должен следовать URL-адрес таблицы стилей, которую необходимо импортировать. Допускается использование строки. В этом случае подразумевается, что она заключена в url(…).

Следующие строки эквивалентны по значению и представляют два варианта синтаксиса правила @import (один с использованием url(…) и один с открытой строкой):

@import В«mystyle.cssВ»;

@import url("mystyle.css");

Вы также можете задать правила @import, зависящие от устройств. Тогда в этих правилах импортирования после URL задается список типов устройств, разделенных запятыми.

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

@import url(В«fineprint.cssВ») print;

@import url("bluish.css") projection, tv;

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

 

Резюме

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