HTML: Популярный самоучитель
Шрифт:
11.10. Псевдоклассы текста
Помимо гиперссылок, еще как минимум два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML-элементе.
Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML-элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.
Итак, для создания буквицы, показанной на рис. 11.10, используется
Рис. 11.10. Заглавная буква страницы
<HTML>
<HEAD>
<TITLE>Первая буква</TITLE>
<STYLE type = "text/css">
P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}
</STYLE>
</HEAD>
<BODY>
<P class = "first_par">Первая буква этого текста будет большой и красивой буквой синего цвета.
Все последующие абзацы будут начинаться по-обычному
</BODY>
</HTML>
Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML-элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML-элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.
Рис. 11.11. Особое оформление первых строк абзацев
Текст HTML-документа, показанного на рис. 11.11, приведен ниже (пример 11.7).
<HTML>
<HEAD>
<TITLE>Первая строка</TITLE>
<STYLE type = "text/css">
P:first-line {font-weight:bold; color:blue}
P.big {font-size:150%}
P.small {font-size:75%}
</STYLE>
</HEAD>
<BODY>
Абзац, оформленный шрифтом по умолчанию. ...
<P class = "big">Абзац, оформленный шрифтом большого размера. ...
<P class = "small">Абзац, оформленный шрифтом малого размера. ...
</BODY>
</HTML>
Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML-элементов. При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.
11.11. Создание CSS для различных устройств
При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.
Сами таблицы стилей создаются как обычно, то есть в CSS-файле или внутри HTML-элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).
Атрибут media может принимать в качестве
• all – таблица подходит для любого устройства;
• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);
• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);
• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);
• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;
• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;
• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);
• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);
• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.
Теперь рассмотрим небольшой пример документа, который по-разному отображается, например, на экране монитора и при выводе на печать (самые доступные режимы при применении только ПК) (пример 11.8).
<HTML>
<HEAD>
<TITLE>Использование встроенной таблицы стилей</TITLE>
<!– Определение таблицы стилей для вывода на печать–>
<STYLE type = "text/css" media = "print">
H1 {color: black; font-family: newroman; text-align: center}
H2, H3 {color: black; font-family: newroman; text-align: center}
P {font-style: normal; font-weight: normal; color: black}
</STYLE>
<!– Определение таблицы стилей для монитора–>
<STYLE type = "text/css" media = "screen">
BODY {background-color: black}
H1 {color: red; font-family: arial; text-align: center}
H2, H3 {color: yellow; font-family: courier; text-align: left}
P {font-style: italic; font-weight: bold; color: white}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
Текст абзаца
<H2>Заголовок второго уровня</H2>
Текст абзаца
<H3>Заголовок третьего уровня</H3>
Текст абзаца
</BODY>
</HTML>
На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).
Рис. 11.12. Страница в окне браузера
При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.
Рис. 11.13. Страница в окне предварительного просмотра
Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.