HTML, XHTML и CSS на 100%
Шрифт:
Например, рассмотрим этот 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
Псевдоэлементы: 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 – устройств, использующих набор символов с фиксированной шириной, например телетайпов, терминалов или портативных
• tv – устройств типа телевизора, для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране и возможность передачи звука.
Следует отметить, что названия типов устройств не зависят от регистра.
Как правило, для схожих устройств задаются схожие правила CSS, поэтому все устройства в CSS разбиты по типам. В табл. 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 работают и в таблицах стилей разработчика.