<span>

<p:first-letter>

П

</p:first-letter>ервые

</span>

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

Обратите внимание, что теги псевдоэлементов: 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:first-line>

<p:first-letter>

Не

</p:first-letter>который текст,

</p:first-line>

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

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

Псевдоэлементы: 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}

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

Правило @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 не следует использовать пикселы;