Псевдоэлементы ::before и ::after
Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом.
Псевдоэлемент ::before используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.
Пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза.
В примере указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Выбрали все элементы <div> с классом omg и добавили перед ними определенную фразу. Перед абзацами (элементы <p>) также добавляется определенная фраза.
к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.
| …
 …
…
|
Псевдоэлемент ::after выступает прямой противоположностью ::before и добавляет содержимое после определенного элемента, а не до. Он также используется вместе со свойством content, которое используется для вставки сгенерированного контента.
Задание для самостоятельного выполнения.
Для предыдущего примера измените код таким образом, чтобы после каждого блока с изображением и после каждого абзаца будет генерироваться (добавляться) определенная фраза.
Применение псевдоэлементов ::before и ::after позволяют добавлять перед элементами не только текстовую информацию, но даже изображения, счетчики, разноцветные буллиты, которые используются в маркированных списках и так далее.
|
|
|
Псевдо-классы
Стилевая информация обычно подключается к элементам на основе их положения в дереве документа. Этой модели достаточно в большинстве случаев, однако имеются и распространенные исключения, например, нельзя найти в дереве документа информацию о первой строке абзаца. Спецификация CSS вводит понятия псевдо-классов и псевдо-элементов для применения стилевой информации за пределами дерева документа.
В настоящее время в CSS 3 существует более тридцати псевдоклассов.
Псевдоклассы в отличие от псевдоэлементов добавляются к селекторам с одним двоеточием:
селектор:псевдокласс { /* одинарное двоеточие */ CSS свойство: значение;}
Фокус на элементе
Псевдокласс :focus производит выбор элементов, которые в настоящий момент находятся в фокусе (допускается использовать на элементы, которые принимают события клавиатуры или другие данные, вводимые пользователем).
Пример использования псевдокласса
В данном примере мы создали два элемента <input>, первый с типом text (однострочное текстовое поле), а второй с типом password (поле с паролем).
Если пользователь производит выбор элементов <input> (поле получает фокус), то поле получает стиль, который мы задали, а если поле теряет фокус, то стиль возвращается на первоначальный.
|
|
|
| …
 …
…
|
Стилизация ссылок
Псевдокласс :link задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). Как правило, используется с псевдоклассом :visited, который определяет стиль для посещённых пользователем ссылок.
| В этом примере с использованием псевдокласса :link мы указали, что ссылки (элементы <a>) по которым пользователь не переходил подсвечиваются оранжевым цветом. … a:link { background-color: orange; } … <p>Не посещённые ссылки:</p> <a href = "https://ru.wikipedia.org/wiki/ Квантовая _ механика " >Квантовая_механика</a> <a href = "https://ru.wikipedia.org/wiki/ Начертательная _ геометрия " >Начертательная_геометрия</a> … |
Псевдокласс :visited задаёт стиль всем ссылкам, по которым пользователь производил переход (посещенные ссылки).
| В этом примере с использованием псевдокласса :visited мы указали, что ссылки (элементы <a>) по которым пользователь производил переход имеют красный цвет. … a:visited { color: orange; } … <p>Cсылки, которые Вы уже посещали:</p> <a href = "https://ru.wikipedia.org/wiki/Квантовая_механика" > Квантовая_механика</a> <a href = "https://ru.wikipedia.org/wiki/Начертательная_геометрия" > Начертательная_геометрия</a> … |
Псевдокласс :active используется для выбора активного элемента - элемента на который в данный момент пользователь кликнул мышкой. Стиль для элемента применится и будет работать пока удерживается кнопка мыши.
|
|
|
| …
 …
 …
|
Псевдокласс :hover используется для стилизации любого элемента, на который в данный момент указывает курсор мыши. Чаще всего используют данный псевдокласс с ссылками, кнопками, в меню навигации и таблицами.
Дата добавления: 2020-04-25; просмотров: 208; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!