Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27377 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

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

E-mail

Close

Изучаем CSS - Уроки верстки сайтов

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

Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }
Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента.
Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить
сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по
отдельности, как показано ниже.
 .foo:first-letter { color: red }
 .foo:first-line {font-style: italic}
В CSS3 чтобы различать псевдоклассы и псевдоэлементы, перед именем псевдоэлемента ставится два двоеточия (::after). Internet Explorer игнорирует подобную запись, остальные браузеры корректно её понимают.

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

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

:after

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

Верстка веб-сайтов с помощью css
Результат примера показан на рис. 1.38.

Верстка веб-сайтов с помощью css

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

:before

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

Верстка веб-сайтов с помощью css

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

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

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

:first-letter

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

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

Верстка веб-сайтов с помощью css

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

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

:first-line

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

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

В примере 1.62 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Верстка веб-сайтов с помощью css

Результат примера показан на рис. 1.41.
Верстка веб-сайтов с помощью css
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
источник: designjunkie.ru

Комментарии:

У Вас недостаточно прав для добавления комментариев.
Возможно, Вам необходимо зарегистрироваться на сайте или пройти авторизацию.

КОММЕНТАРИИ

You are here СТАТЬИ - Псевдоэлементы