Чтение онлайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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