Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 49


Дата: 2009-02-17

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS

Рецепты HTML и CSS
Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru обновился справочник по CSS до версии 3.2. Добавлен раздел с селекторами, несколько новых @-правил, список селекторов, много-много описаний багов браузеров, соответственно, таблица с браузерами более точная стала, с учетом выхода Internet Explorer 8 RC1. Плюс изменены описания, добавлены значения свойств, которых не было и куча мелких исправлений.

Доступна версия в CHM, PDF, HTML-файлах.

Приобрести справочник можно по адресу htmlbook.ru/books/?id=4

16. Псевдоэлементы

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

Синтаксис использования псевдоэлементов следующий.

Селектор:Псевдоэлемент { Описание правил стиля }

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

.foo:first-letter { color: red }
.foo:first-line {font-style: italic}

Замечание

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

Далее перечислены все псевдоэлементы, их описание и свойства.

after

Применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере 16.1 показано использование псевдокласса after для добавления текста в конец абзаца.

Пример 16.1. Применение псевдоэлемента after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Псевдоэлементы</title>

  <style type="text/css">
   P.new:after {
    content: " - Новьё!"; /* Добавляем после текста абзаца */
   }
  </style>

 </head>
 <body>

  <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
  <p>Метод ловли льва простым перебором.</p>

 </body>
</html>

Результат примера показан на рис. 16.1.

Рис. 16.1

Рис. 16.1. Добавление текста к абзацу с помощью after

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

Замечание

Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.

before

По своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдокласса before.

Пример 16.2. Использование псевдоэлемента before

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Псевдоэлементы</title>

  <style type="text/css">
   UL {
    padding-left: 0; /* Убираем отступ слева */
    list-style-type: none; /* Прячем маркеры списка */
   }
   LI:before {
    content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
   }
  </style>
 </head>

 <body>
  <ul>

   <li>Чебурашка</li>
   <li>Крокодил Гена</li>


   <li>Шапокляк</li>
   <li>Крыса Лариса</li>

  </ul>
 </body>

</html>

Результат примера показан ниже (рис. 16.2).

Рис. 16.2

Рис. 16.2. Изменение вида маркеров с помощью before

В данном примере псевдокласс before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.

first-letter

Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.

Замечание

Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).

Пример 16.3. Использование псевдоэлемента first-letter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Псевдоэлементы</title>
  <style type="text/css">
   P {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 90%; /* Размер шрифта */
    color: black; /* Черный цвет текста */
   }
   P:first-letter {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200%; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>

 <body>

    <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее 
    как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила 
    внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака 
    и пыли. </p>
    <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого 
    не было, и лишь на полу валялась порванная туфля Паши.</p>
 </body>

</html>

Результат примера показан ниже (рис. 16.3).

Рис. 16.3

Рис. 16.3. Создание выступающего инициала

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

first-line

Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.

Замечание

К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.

В примере 16.4 показано использование псевдоэлемента first-line применительно к абзацу текста.

Пример 16.4. Выделение первой строки текста 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Псевдоэлементы</title>
  <style type="text/css">

   P:first-line {
    color: red; /* Красный цвет текста */
    font-style: italic; /* Курсивное начертание */
   }
  </style>

 </head>
 <body>
  <p>Интересно, а существует ли способ действительно практичного применения 
  свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, 
  а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых 
  перспектив, после чего остается только сказать себе, что вот это вот, это самое 
  сделать по-другому, также изящно и эффектно просто невозможно.</p>
 </body>

</html>

Результат примера показан на рис. 16.4.

Рис. 16.4

Рис. 16.4. Результат применения псевдоэлемента first-line

В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.

Вопросы для проверки

1. Какой псевдоэлемент позволяет добавить текст в начало предложения?

  1. after
  2. before
  3. first-line
  4. first-text
  5. first-letter

2. Что делает следующий стиль?

OL LI:first-letter {
color: red;
}

  1. Изменяет цвет первой буквы элемента маркированного списка.
  2. Изменяет цвет первой буквы элемента нумерованного списка.
  3. Изменяет цвет первой строки в маркированном списке.
  4. Изменяет цвет первой строки в нумерованном списке.
  5. Изменяет цвет текста всего списка.

3. Какой селектор написан с ошибкой?

  1. p.new:before
  2. abbr:first-line
  3. p.new.back:after
  4. div:before:first-letter
  5. a:hover:before

Задание

1. Используя псевдоэлементы создайте страницу, показанную на рис. 16.5.

Рис. 16.5

Рис. 16.5

2. Создайте страницу, показанную на рис. 16.6. Для добавления символов используйте следующие коды: \2660, \2663, \2665, \2666.

Рис. 16.6

Рис. 16.6

Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное