Временами кажется, что для того чтобы выжить в современном мире, необходимо знать, как создавать сайты. Даже в школах обучают Но для создания качественного ресурса этого мало. Необходимо еще знать основы каскадной таблицы стилей, в частности псевдоклассы и псевдоэлементы CSS.
Что это такое?
По негласному закону все стили, которые веб-мастер вписывает в CSS-разметку, используются для тех элементов структуры, которые можно увидеть в исходном коде. Однако существуют группы элементов, которые не прописываются в HTML-документе, однако для них тоже нужно задавать стили.
К примеру, в HTML-файле нет ни одно тега, который бы отвечал за дизайн заглавной буквы нового абзаца или области, что находится перед определенным элементом. Да и тегами невозможно показать активность ссылок или изменить изображение, когда курсор мышки наводят на него. Чтобы оформить эти и множество других значений, существуют селекторы CSS: псевдоклассы и псевдоэлементы.
Псевдоклассами называют селекторы, которые влияют на существующие элементы документа. Псевдоэлементами обычно задают и меняют область, которая изначально отсутствовала в исходном файле. Проще говоря, псевдоэлементы задают новые области страницы, которых не было в HTML-разметке, а псевдоклассы определяют состояние объектов при определенных условиях.
После: after
Первое, на что стоит обратить внимание, - псевдоэлементы CSS before и after, так как каждый уважающий себя ресурс использует их для усовершенствования внешнего вида, читабельности и привлекательности сайта. Эти элементы предоставляют возможность добавления новых областей, надписей и стилей до или после исходного документа.
Каждый, наверное, хотя бы раз видел на каком-либо сайте анонсы публикаций, после которых стояли слова: «Новинка», «Новое» или «Шок», «Избранное», «Лучшее», «Супер» и т. д. Эти объекты были заданы при помощи псевдоэлемента
Чтобы создать такую позицию, необходимо добавить в каскадную таблицу стилей такой код:
Здесь словом new задается название нового класса, поэтому перед нужным абзацем в HTML разметке нужно вписать: class="new". Название класса должно находиться между скобками открывающего тега. Если все сделать правильно, то после окончания абзаца на странице браузера появится надпись «Кое-что новенькое».
Естественно, в примере задан скрипт для простой надписи, но никто не говорил, что нельзя менять размер, цвет и позиционирование. Все необходимые параметры можно вписать в класс new после характеристики content. Разделять их нужно точкой с запятой и в конце закрыть фигурную скобку.
До: before
Практически идентичными характеристиками обладает псевдоэлемент С одним небольшим отличием: он предназначен для того, чтобы добавлять необходимые элементы перед объектом. Записывается точно так же, как и after, только со словом before.
Перед очередным абзацем текста можно добавить слова, которые привлекают внимание, а можно просто поместить перед текстом рисунок или элемент Юникода. К примеру, открывающие кавычки или отступы. Чтобы воплотить это в жизнь, необходимо добавить в CSS-разметку новый класс и задать необходимые характеристики. Самое простое решение будет выглядеть следующим образом:
Чтобы сделать отступы в конце документа, необходимо создать псевдокласс after и вместо content: open написать content: close , соответственным образом поменять позиционирование. Если в псевдоклассе before отступ был от левого поля, то в классе after он должен быть от правого. Также в разметку можно добавить изображение (допустим, тех же кавычек), и текст уже не будет смотреться как унылая простыня.
Эпичная сага: first
Большой популярностью в создании новых проектов пользуется и псевдоэлемент CSS first. В частности, это касается проектов с развлекательной и сказочной тематикой, а также веб-ресурсов исторического и научного направления.
Этот псевдоэлемент CSS имеет две характеристики - line и letter:
- Letter - изменяет первую букву того фрагмента текста, к которому его добавляют. Таким образом, он формирует буквицу - элемент, в котором базовая линия находится на несколько строк ниже относительно главного текста. Чтобы задать этот параметр в каскадной таблице стилей, нужно задать характеристики для параграфа. Например, P:first-letter {*** } - и уже между скобками указать все необходимые параметры, такие как цвет, шрифт, размер. Если буквицу необходимо создать только для первого абзаца, тогда создается новый класс (так же, как и в примере с new: after ).
- Line - эта позиция полностью меняет первую строку абзаца. Очень удобно использовать в научных публикациях, если нужно выделить важную информацию. Записывается так же, как и прочие примеры. Но здесь важно помнить, что псевдоэлемент выделяет не предложение, а именно строку. В зависимости от того, каким браузером пользуется пользователь, у него первая строка может быть длиннее или короче, поэтому важно следить за тем, чтобы это выделение не смотрелось нелепо. Именно для таких случаев был создан в CSS псевдоэлемент переноса строки.
Новая строка
По факту этот элемент используется редко, ведь его успешно заменяет тег
. Однако существуют ситуации, когда необходимо задавать разрыв строки именно псевдоэлементами. Для этих целей можно использовать тот же after. Для этого записывается следующий код: after { content: "\A"; white-space: pre;}
. Название класса нужно вписать между скобками открывающего тега, как только он закроется, после него и будет следовать разрыв строки.
Такой вариант отнимает больше времени при конструировании читабельного контента, и если нет необходимости работать с аномально неизведанными браузерами, то лучше ограничиться тегом
.
Синтаксис псевдоклассов
Как уже было сказано, псевдоклассы определяют состояние элементов, с которыми взаимодействует пользователь. В отличие от псевдоэлементов CSS, которые задают невидимые структуре характеристики, мнимые классы ориентированы на Чтобы было понятнее, можно привести небольшой пример. Допустим, на сайте есть список полезных ссылок, пользователь переходит по ним, читает информацию, но спустя время наталкивается на тот контент, который уже видел. Он просто перешел на эту страницу еще раз, ведь ссылок много, и они ничем не отличаются. Чтобы такого не происходило, веб-мастера добавляют псевдокласс, который меняет цвет просмотренной ссылки, тогда пользователь будет точно знать, что он читал, а куда еще не переходил.
Все псевдоклассы записываются в таблицу каскадных стилей простым и проверенным синтаксисом:
- Селектор: Псевдокласс {характеристики стиля: цвет, размер, отступ, позиционирование и т. д.}
Эти классы можно разделить на три основные группы:
- те, что определяют состояние элемента;
- те, что относятся к псевдоэлементам;
- фиктивные классы, определяющие язык контента.
Псевдоклассы и состояние элементов
Рассмотрим же по порядку, какими могут быть псевдоклассы. Для первого подвида характерно изменение состояние элемента в зависимости от его состояния в конкретный момент. Это как было в примере выше: если по ссылке перешли, то она поменяет цвет. Сюда относят такие псевдоклассы:
- :active. Если применить этот псевдокласс, то при нажатии мышкой на отдельный фрагмент он станет активным. Это проявится в изменении цвета, увеличении размера, или появится анимация.
- :link . В основном применяется к ссылкам, которые пользователь еще не посещал. Они остаются неизмененными.
- :focus . Чаще всего используют для текстовых документов, когда пользователь, установив на поле курсор, может поменять цвет текста. Иногда это используют и для изображений. Например, выставляют картинку затененную, но при щелчке она приобретает естественный цвет.
- :hover . Когда пользователь просто наводит мышкой на определенный объект, он может поменять цвет или форму, при этом ему не нужно делать щелчок.
- :visited . В основном этот псевдокласс предназначен для посещенных ссылок, которые меняют свой цвет на фиолетовый по умолчанию.
Новички ошибочно предполагают, что эти псевдоклассы предназначены только для ссылок, но при должном желании и фантазии изменить можно любой элемент сайта.
Специально для псевдоэлементов CSS
К этой группе селекторов относят псевдоклассы, которые могут изменить псевдоэлементы. Таким псевдоклассом является :first-child . В каскадной таблице стилей необходимо создать новый класс для :first-child и задать цвет текста или его размер. Результат будет иметь следующий вид:
- B:first-child { color: red; }
Чаще всего это делают тогда, когда необходимо выделять несколько фрагментов текста жирным шрифтом и только начало абзаца должно отличаться. Поэтому класс называют так же, как и тег, который отвечает за полужирный текст. Если применить это на практике, то благодаря псевдоклассу только первый выделенный полужирным шрифтом фрагмент будет иметь красный цвет, остальные слова будут стандартного черного цвета.
Также :first-child используют, чтобы убрать отступ в первом абзаце, тогда вместо color: red; необходимо будет написать text-indent: 0; , а В заменить на Р (также обозначается тег, который отвечает за начало абзаца).
Язык контента
Псевдокласс :lang в основном применяется к текстам, которые написаны разными языками. Например, если в статье есть цитаты на языке оригинала, то для них можно задать отдельные характеристики. Синтаксис для этого кластера будет иметь следующий вид:
- Название класса:lang (язык) {характеристики текста (цвет, и т.д.)}
Что касается позиции "язык", то он обозначается согласно принятым нормам. Например, английский - en, русский - ru, немецкий - de и т. д. Благодаря этому псевдоклассу можно изменить стиль иностранного текста во всем документе.
Выводы
Псевдоклассы и псевдоэлементы CSS - это один из тех вопросов о каскадной таблице стилей, которые вызывают трудности в понимании. Однако здесь нет ничего сложного, главное - понимать, что псевдокласс - это определенное состояние, что выполняется при оговоренных ранее условиях. Например, при наведении курсора или щелчке мышки. Псевдоэлемент - самостоятельная часть документа, которая не входит в состав HTML-разметки, но может иметь свой стиль. Можно даже сказать, что это виртуальный HTML. Если посмотреть на ситуацию с такой стороны, то все становится предельно простым и понятным, а с такими знаниями уже можно начинать создавать сайты.
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Foo:first-letter { color: red }
.foo:first-line {font-style: italic}
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
:after
Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content , которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца.
Пример 16.1. Применение:after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Ловля льва в пустыне с помощью метода золотого сечения.
Метод ловли льва простым перебором.
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью:after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .
Псевдоэлементы :after и :before , а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before аналогичен псевдоэлементу :after , но вставляет контент до содержимого элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before .
Пример 16.2. Использование:before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
- Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью:before
В данном примере псевдоэлемент :before устанавливается для селектора LI , определяющего элементы списка. Добавление желаемых символов происходит путём задания значения свойства content . Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование:first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан ниже (рис. 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. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента:first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
- :after
- :before
- :first-line
- :first-text
- :first-letter
2. Что делает следующий стиль?
OL LI:first-letter {
color: red;
}
- Изменяет цвет первой буквы элемента маркированного списка.
- Изменяет цвет первой буквы элемента нумерованного списка.
- Изменяет цвет первой строки в маркированном списке.
- Изменяет цвет первой строки в нумерованном списке.
- Изменяет цвет текста всего списка.
3. Какой селектор написан с ошибкой?
- p.new:before
- abbr:first-line
- p.new.back:after
- div:before:first-letter
- a:hover:before
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
В предыдущем разделе этой главы были рассмотрены четыре типа селекторов – селекторы тегов, классов, ID и групп. В этой части мы перейдем к селекторам потомков (которые также называются контекстными селекторами), а также познакомим вас с псевдоклассами и псевдоэлементами CSS.
Селекторы потомков
Когда необходимо придать стиль определенным тегам на всей веб-странице, используются селекторы тегов. Например, чтобы сделать все без исключения ссылки неподчеркнутыми, нужно записать простое правило:
A { text-decoration: none; }
А что делать в том случае, когда нам нужны подчеркнутые ссылки, но только тогда, когда они находятся в теге
Мы могли бы создать отдельный класс и присваивать его нужным ссылкам, но это не совсем верный способ, который требует как дополнительных затрат по времени, так и места в HTML-коде. Гораздо легче использовать селекторы потомков (контекстные селекторы) и записать:
P a { text-decoration: underline; }
Если говорить простыми словами, то мы сейчас указали, что все ссылки , которые находятся в тегах Должны быть подчеркнутыми. А на все остальные ссылки это правило не распространяется. В этом и заключается прелесть селекторов потомков – вы можете изменять стиль, пользуясь вложенностью тегов и их родственными связями. Те, кому пока еще трудно мысленно представить картину связей, могут взглянуть на вспомогательную схему ниже, где показана иерархия HTML-тегов: Иерархия HTML-тегов: родственные связи
Глядя на схему, легко понять родственные связи тегов – можно сказать, здесь всё обстоит так же, как у людей 🙂 : При создании селектора потомков сначала записывается название предка, а затем – название потомка. Рассматривая вышеприведенный пример с подчеркнутыми ссылками, мы могли бы записать селектор потомков несколькими способами: Html body p a {};
body p a {};
p a {};
Все три варианта будут работать, но в данном случае нет смысла записывать имена всех предков, достаточно ограничиться лишь именем родителя. Стоит отметить, что при создании селекторов потомков можно ссылаться не только на название старшего тега, но также и на присвоенный ему класс или идентификатор, что дает еще более гибкие возможности для написания стилей. Записывается это похожим образом:
/*для классов*/
.blogcontent a {
color: blue;
}
/*для идентификаторов*/
#mobilenav a {
font-size: 12px;
}
Обычно стили CSS применяются к тем элементам веб-страницы, которые видны в ее исходном коде. Но существуют случаи, когда необходимо создать стиль для определенного состояния элемента (например, внешний вид посещенной ссылки либо вид ссылки при наведенном на нее курсоре), а также для элемента, который четко не обозначен в структуре страницы. Примером такого элемента может быть первый символ в абзаце или первая строка. С помощью псевдоклассов в CSS можно устанавливать стиль для уже существующих элементов веб-страницы, который будет применяться в случае каких-то действий пользователя. Псевдоэлементы же отличаются тем, что могут определять стиль несуществующего содержимого, а также четко не обозначенных элементов. Вы можете придавать элементам стиль, который будет зависеть от состояния этих элементов. Вот список некоторых псевдоклассов: Как записываются псевдоклассы CSS? Необходимо добавить стиль с названием необходимого элемента + имя псевдокласса. Пример: A:link {
color: red;
}
a:hover {
color: #26A65B;
}
a:visited {
color: #CCC;
}
В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цветаa:link {color: red;}
, ссылка при наведении должна менять цвет на другойa:hover {color: #26A65B;}
, а посещённая ссылка должна иметь третий цветa: visited {color: #CCC;}
. Если псевдоклассы записываются с одним двоеточием, то псевдоэлементы – с двумя. Это было внедрено в CSS3 для того, чтобы различать псевдоклассы и псевдоэлементы между собой. Однако раньше этой разницы не существовало и с псевдоэлементами использовалось одно двоеточие. Сейчас браузеры поддерживают оба варианта написания (но не для всех случаев). Рассмотрим некоторые псевдоэлементы: Пример использования псевдоэлементов: Blockquote::before {
content: "«";
}
blockquote::after {
content: "»";
}
blockquote::selection {
color: #C8F7C5;
background-color: #1E824C;
}
Мы написали стиль для длинных цитат, который добавляет кавычки «ёлочки» в начале и в конце содержимого тега Псевдоклассы и псевдоэлементы
Популярные псевдоклассы CSS
Популярные псевдоэлементы CSS
, а также изменяет цвет и фон выделенного пользователем текста цитаты.
Выводы
В этой главе вы узнали о таких важных и часто используемых в CSS вещах, как селекторы потомков, псевдоклассы и псевдоэлементы. В дальнейшем мы будем часто к ним возвращаться, поэтому запомните основные моменты по пройденной теме:
Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.
Псевдоклассы позволяют создавать стиль для различных состояний элемента веб-страницы.
С помощью псевдоэлементов в CSS можно задать стиль для тех элементов страницы, которые четко не обозначены в структуре документа.
В этой статье мы познакомимся с псевдоэлементами::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 свойства, которые будут применены к данному контенту, т.е. к контенту, который появляется до или после содержимого элемента.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows