Псевдо элементы css. CSS - Псевдоэлементы. Что такое псевдо-элементы

Цель урока: Рассмотрение понятия «медиа-запросы» для создания отзывчивой верстки. Знакомство с псевдоклассами и псевдоэлементами в CSS. Рассмотрены примеры создания стилей

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

Условием является либо параметры устройства, на котором отображается веб-страница, либо размеры экрана пользователя.

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:

All — все устройста. Может быть screen | print | tv

max-width — медиа функция , которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px:

Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

Медиа-запросы логично размещать после всех описанных стилей

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

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя.

Важно: На псевдокласс указывает наличие двоеточия (:)

Три псевдокласса определены именно для гиперссылки (для тега a):

* active — псевдокласс не только для гиперссылки

Псевдоклассы для всех элементов :

Псевдоклассы для всех элементов управления :

input:focus{...} /* в тот момент, когда элемент получает фокус */ input:active{...}/* в момент активации элемента */

Пример: На странице расположено текстовое поле. Необходимо взять элемент в толстую черную рамку, когда он в фокусе, и в толстую красную, когда он активен

Выполнение:

Результат:

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

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

Псевоэлементы, определяющие новые элементы:

элемент:first-letter {...}/* первая буква или символ элемента */ элемент:first-line {...}/* первая строка элемента */

Выполнение:

К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль.

Результат:

Псевоэлементы, генерирующие содержимое:

элемент:before {content:""}/* генерирует текст перед элементом */ элемент:after {content:""} /* генерирует текст после элемента */

Пример: К содержимому абзаца с классом new добавить дополнительное слово — Ого! .

Выполнение:

Ловля льва в пустыне с помощью метода золотого сечения.

Метод ловли льва простым перебором.

Результат:

Пример: Для маркированного списка убрать маркер и установить вместо него какой-либо символ

Выполнение:

ul { list-style-type: none; /* Прячем маркеры списка */ } li:before { content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */ }

Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса

Результат:

Задание: Скопируйте текст, расположенный ниже, и вставьте в веб-страницу. Используя css либо , создайте следующие правила, чтобы достигнуть эффекта как на итоговом изображении.

Текст:

<body > <h1 > Стих 1</ h1 > Я понял, что пришедшее извне

(Угли недолго проживут

Вот так и жду, не шевелясь, Когда уйдут из сердца лица, Ушедшие однажды с глаз, <hr > <h1 > Стих 2</ h1 > Обещай, что вернешься Домой. Эти зимы меня одолеют. Я смотрю на тебя и не смею

Нам обоим запомнятся годы Научившей любить и прощать.

Обещай, что в далеком краю, Если станет тебе одиноко,

И поселится в сердце покой. Обещай, что когда-нибудь все же ты конечно вернешься Домой. <hr > </ body >

Стих 1

Вопрос такой: зачем все это мне?
Но, не найдя ответа на подходе,
Я понял, что пришедшее извне
Стремительно вовне же и уходит.

Другой вопрос - как быть? Но тут
Ответ просился сам: бездействуй!
(Угли недолго проживут
В костре, где все без происшествий.)

Вот так и жду, не шевелясь,
Когда уйдут из сердца лица,
Ушедшие однажды с глаз,
Чтоб никогда не возвратиться.

Стих 2

Обещай, что вернешься Домой.
Эти зимы меня одолеют.
Я смотрю на тебя и не смею
Прикоснуться холодной рукой.

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

Обещай, что в далеком краю,
Если станет тебе одиноко,
Ты прочтешь эти добрые строки
Про бескрайнюю Нежность мою.

И поселится в сердце покой.
Нет тебя мне на свете дороже.
Обещай,
что когда-нибудь все же
ты конечно вернешься Домой.

Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.

Вот перечень всех псевдоэлеметов:

:first-letter - Стиль первой буквы текстового блока
:first-line - Стиль первой строки текстового блока
:after - Добавляет содержимое после элемента.
:before - Добавляет содержимое до элемента.
::selection - Стиль выделенного пользователем текста.

Так же как и в случае с псевдоклассами , псевдоэлементы используются согласно следующего синтаксиса:

p:first-letter { color:#ff0000}

p - селектор, к которому применяется псевдоэлемент.
:first-letter - после двоеточия собственно псевдоэлемент.
{color:#ff0000} - блок объявления стилей в фигурных скобках.

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

Ну что ж давайте пробежимся по перечисленным псевдоэлементам.

Стиль первой буквы.

Псевдоэлемент first-letter задаёт стиль первой буквы в каком либо текстовом блоке, проще говоря, без особых усилий позволяет сделать "буквицу". Вы заметили, что на этом сайте первые буквы в абзацах отличны цветом и размером от других букв? - это и есть пример работы псевдоэлемента first-letter .

Ну а если Вам этого примера мало можете взглянуть на ещё один:

Псевдоэлемент first-letter.

Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.

Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом..

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

Стиль первой строки.

Псевдоэлемент first-line определяет стиль первой строки в текстовом блоке.

Псевдоэлемент first-line.

Если бы при приеме на работу… … …

Однажды молодой сисадмин … … …

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

Контент.

Псевдоэлементы after и before предназначены для "врезки" в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (:before ) или после (:after ) какого либо элемента с помощью свойства content , которое собственно и определяет содержимое для вставки.

Всё вместе пишется так:

p:after {content: "Конец, а кто слушал молодец!!"; }

Теперь после каждого параграфа будет добавляться надпись: "Конец, а кто слушал молодец!!"

Значением свойства content может быть:

"текст" - собственно любой текст или символы.
"\0410" - юникод.
url(путь) - адрес какого либо объекта.
open-quote - открывающая кавычка.
close-quote - закрывающая кавычка.
no-open-quote - отменяет открывающую кавычку.
no-close-quote - отменяет закрывающую кавычку.
inherit - наследует значение элемента родителя.
none - ничего не добавляется.
normal - для псевдоэлементов before и after тоже самое что и none .
counter - показывает значение счетчика, заданного свойством counter-reset .
attr(атрибут тега) - показывает текст, который является значением атрибута того или иного тега указанного в скобках.

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

Заголовок с сердечком.

Параграфы с добавлением слова "анекдот:" вначале и смайлика в конце:

Если бы при приеме на работу...

Однажды молодой сисадмин...

После рисунка добавляется значение его атрибута: "src" - путь к рисунку:

Цитата в кавычках:

Лёд тронулся, господа присяжные заседатели!

Список с нестандартными маркерами:

Первый
Второй
Третий

Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:

Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными "маркерами" в списке из примера.

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

Спецсимволы HTML (например, спецсимвол: ¶ ), будут отображаться простым текстом (¶ а не ¶ ) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.

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

Псевдоэлемент::selection.

Псевдоэлемент ::selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.

Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент ::-moz-selection который официально не входит в спецификацию CSS.

Псевдоэлемент::selection

Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент::selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.

К данному псевдоэлементу можно применить только следующие CSS свойства: color , background и background-color .

В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями ::first-letter, ::first-line, ::after, ::before, и новый ::selection - таким вот способом разработчики решили оделить пседоэлементы от псевдоклассов . Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например :first-letter и ::first-letter это формально два разных псевдоэлемента.

В правилах стиля для псевдоэлементов допустимо использовать только свойства, относящиеся к шрифту, тексту и его фону.

Псевдоэлементы позволяют задать стиль для части элемента (например, для первой буквы или первой строки абзаца), а также генерировать содержимое, которого нет в HTML-коде документа.

Псевдоэлемент состоит из двух двоеточий (::) и имени. Двойное двоеточие было введено в CSS3 для того, чтобы отделить псевдоэлементы от псевдоклассов . Однако для совместимости с прежними таблицами стилей допускается использовать одинарное двоеточие(:).

Пример

При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

РЕЗУЛЬТАТ:

Пример

За горами, за лесами,
За широкими морями,
Не на небе – на земле
Жил старик в одном селе...

РЕЗУЛЬТАТ:

За горами, за лесами,
За широкими морями,
Не на небе – на земле
Жил старик в одном селе...

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

При добавлении ::before или ::after к блочному элементу их свойство display может принимать значения block, inline, none, list-item. Все остальные будут восприниматься как block.

При добавлении ::before или ::after к строчному элементу их свойство display может принимать значения inline и none. Все остальные будут восприниматься как inline.

Пример

α – альфа
β – бета
γ – гамма

РЕЗУЛЬТАТ:

α – альфа
β – бета
γ – гамма

К выделенному тексту можно применять свойства color, background и background-color.

Firefox понимает этот псевдоэлемент только с префиксом, т.е. ::-moz-selection

Пример

РЕЗУЛЬТАТ:

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

В этой статье мы познакомимся с псевдоэлементами::first-line , ::first-letter , ::after , ::before и научимся их применять на практике.

Псевдоэлементы - это вид селекторов, которые могут задать стиль для элементов, которые явно не определены в структуре документа (::first-line , ::first-letter), а также добавлять контент до и после элементов с применением к нему стилей (::after , ::before).

Рассмотрим следующий код:

Lorem ipsum dolor sit amet. Omnis voluptas nulla vero eos et iusto odio dignissimos. A sapiente delectus, ut aliquid. Aliquid ex ea voluptate velit esse, quam nihil impedit, quo minus. Consequuntur magni dolores eos, qui ratione voluptatem. Nobis est et molestiae consequatur, vel. Delectus, ut aliquid ex ea voluptate velit esse. Suscipit laboriosam, nisi ut labore et dolorum. Provident, similique sunt in ea voluptate velit esse quam.

P::first-letter { font-size:200%; color: red; } p::first-line { font-weight:bold; color: blue; } p::before { content: "Начало. "; } p::after { content: " Конец"; font-weight:bold; color:green; }

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

Примечание: несмотря на то, что в стандарте CSS 3 для указания псевдоэлемента используется именно двойное двоеточие, иногда Вы можете увидеть в силу исторических причин одно двоеточие, которое использовалось для указания псевдоэлементов в стандарте CSS 2.1. Все современные браузеры позволяют использовать как одно двоеточие, так и два для указания того, что дальше следует псевдоэлемент. Единственный браузер, который не понимает знак двойного двоеточия, является Internet Explorer 8.

Псевдоэлемент::first-letter

Псевдоэлемент::first-letter предназначен для задания стиля первому символу в тексте элемента. В основном он используется для увеличения размера этого символа посредством применения к нему свойств CSS и соответствующих значений.

HTML:

Содержимое

CSS: p::first-letter { font-size: 200%; color: red; }

Псевдоэлемент::first-line

Псевдокласс::first-line позволяет установить стиль для первой строки текста блочного элемента.

HTML:

Содержимое

CSS: p::first-line { font-style: italic; color: red; }

Псевдоэлементы::after и::before

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