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

Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдокдассы. Список доступных псевдоэлементов:

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

В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не поддерживают CSS3, допустимо использование одного двоеточия ::before.

Стилизуем текст, используя псевдоэлементы first-letter и first-line:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            ::first-letter { color:red; font-size: 25px; }
            ::first-line { font-size: 20px; }
        </style>
    </head>
    <body>
        <p>Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.</p>
    </body>
</html>
Читать далее

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно +1	Как всё будет выглядеть в блоге: Псевдоэлементы Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдокдассы Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/12830764/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Псевдоэлементы </a> <div class="insert-intro" style="font-family:trebuchet MS;">Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдокдассы </div> </div> Псевдоэлементы <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/12830764/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Псевдоэлементы</a> <div style="font-family:trebuchet MS;">Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдокдассы </div> </div>

webguru

09.11.2016

В избранное Пожаловаться Просмотров: 433

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

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

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

Комментарии временно отключены

Открытая группа
38977 участников