Псевдоклассы текста

Дата добавления: 2015-07-09; просмотров: 659; Нарушение авторских прав

Два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML элемент е.

Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 5).

Итак, для создания буквицы, показанной на рис. 5, используется приведенный в примере 4 HTML-код.

Рис. 5. Заглавная буква страницы

Пример 4. Создание буквицы

<HTML>

<HEAD>

<TITLE>Первая буква</TITLE>

P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}

</STYLE>

</HEAD>

<BODY>

<P class = "first_par">Первая буква этого текста будет большой и красивой буквой синего цвета.

<P>Все последующие абзацы будут начинаться по-обычному

</BODY>

</HTML>

Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку. Место разрыва первой строки зависит от ширины окна браузера или ширины HTML элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 6.

Рис. 6. Особое оформление первых строк абзацев

Текст HTML документа, показанного на рис. 6, приведен ниже (пример 5).

Пример 5. Особое оформление первых строк абзацев

<HTML>

<HEAD>

<TITLE>Первая строка</TITLE>

P:first-line {font-weight:bold; color:blue}

P.big {font-size:150%}

P.small {font-size:75%}

</STYLE>

</HEAD>

<BODY>

<P>Абзац, оформленный шрифтом по умолчанию. ...

<P class = "big">Абзац, оформленный шрифтом большого размера. ...

<P class = "small">Абзац, оформленный шрифтом малого размера. ...

</BODY>

</HTML>

Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML элементов . При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.

<== предыдущая лекция	\|	следующая лекция ==>
Использование элементов DIV и SPAN	\|	Таблицы