p:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
span { text-transform: uppercase }
</style>
</head>
<body>
<p><span>Первые</span> несколько слов из книги
"Самоучитель по HTML и CSS".</p>
</body>
</html>
Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.
Рис. 7.1. Стиль заглавной буквы
Приведу последовательность функциональных тегов:
<p>
<span>
<p:first-letter>
П
</p:first-letter>ервые
</span>
несколько слов из статьи в журнале "Экономист".
</p>
Обратите внимание, что теги псевдоэлементов: 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 код применительно к такому абзацу:
<p>Некоторый текст, разделенный на две строки</p>
Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
<p>
<p:first-line>
<p:first-letter>
Не
</p:first-letter>который текст,
</p:first-line>
разделенный на две строки
</p>
Обратите внимание, что элемент: 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. А пока, если вы внимательно читали, с уверенностью можно сказать, что, открыв любую таблицу стилей, вы с легкостью в ней разберетесь.