Псевдоклассы и псевдоэлементы в CSS и примеры их использования

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

К оглавлению

Содержание:

Медиа-запросы в CSS
Псевдоклассы в CSS
Псевдоэлементы CSS

Медиа-запросы в CSS

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

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

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

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

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

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

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

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

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

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

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

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

a:link{...} /* для ссылки непосещенной */
a:visited{...} /* для посещенной ссылки */
a:active{...} /* для активной ссылки, в момент щелчка */
a:link{...} /* для ссылки непосещенной */ a:visited{...} /* для посещенной ссылки */ a:active{...} /* для активной ссылки, в момент щелчка */
* active — псевдокласс не только для гиперссылки

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

элемент:hover{...} /* по наведению курсора на элемент */
элемент:hover{...} /* по наведению курсора на элемент */

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

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

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

Выполнение:

<style type="text/css">

.el1:focus { outline: thick solid black } 
.el1:active { outline: thick solid red }

</style> 
</head>
<body> 
<input type="text" class="el1" value="щелкни по мне">

Результат:

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

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

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

Пример: Для первой строки параграфа применить курсивный стиль шрифта, первую букву абзаца сделать красным цветом

Выполнение:

<style type="text/css">

.f1:first-letter {color: red}
.f1:first-line {font-style: italic}

</style> 
</head> 
<body> 
<p class="f1">К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. 
К этому тексту применен стиль. К этому тексту применен стиль.
</p>

Результат:

Псевоэлементы, генерирующие содержимое:
элемент:before {content:""}/* генерирует текст перед элементом */
элемент:after {content:""} /* генерирует текст после элемента */
элемент:before {content:""}/* генерирует текст перед элементом */ элемент:after {content:""} /* генерирует текст после элемента */

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

Выполнение:

<style type="text/css">

p.new:after{
	content: "- Ого!"
	}

</style> 
</head>
<body> 
<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>

Результат:

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

Выполнение:

<style type="text/css">

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

</style>
</head> 
<body> 
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>

Результат:

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

Текст:

<body> 
<h1>Стих 1</h1>
<p>
Вопрос такой: зачем все это мне?<br/>
Но, не найдя ответа на подходе,<br/>
Я понял, что пришедшее извне<br/>
Стремительно вовне же и уходит.
</p><p>
Другой вопрос — как быть? Но тут<br/>
Ответ просился сам: бездействуй!<br/>
(Угли недолго проживут<br/>
В костре, где все без происшествий.)
</p><p>
Вот так и жду, не шевелясь,<br/>
Когда уйдут из сердца лица,<br/>
Ушедшие однажды с глаз,<br/>
Чтоб никогда не возвратиться.
</p>
<hr>
<h1>Стих 2</h1>
<p>
Обещай, что вернешься Домой.<br/>
Эти зимы меня одолеют.<br/>
Я смотрю на тебя и не смею<br/>
Прикоснуться холодной рукой.
</p><p>
Обещай, что не будешь скучать.<br/>
Нам обоим запомнятся годы<br/>
Нашей странной и глупой свободы,<br/>
Научившей любить и прощать.
</p><p>
Обещай, что в далеком краю,<br/>
Если станет тебе одиноко,<br/>
Ты прочтешь эти добрые строки<br/>
Про бескрайнюю Нежность мою.
</p><p>
И поселится в сердце покой.<br/>
Нет тебя мне на свете дороже.<br/>
Обещай,<br/>
что когда-нибудь все же<br/>
ты конечно вернешься Домой.
</p>
<hr>
</body>

Необходимые правила:

p:first-line{…}
p:first-letter{…}
p {…}
h1{
	text-transform:…;
	border-bottom-style:...;
	border-bottom-color:...;
    }
hr {…}

Свойства:
text-transform
border-bottom-style
border-bottom-color
Оформление шрифта

Итоговое изображение:

К оглавлению