Презентация_4_HTML_CSS_Псевдоклассы_и_псевдоэлементы,_табличная

План урока
Псевдоклассы и псевдоэлементы.
Основные теги для верстки (div и span).

Псевдоклассы и псевдоэлементы

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

Определяющие состояние
:hover – курсор мыши в пределах элемента.
:active – при активации элемента.
:focus – при получении фокуса элемента.
:link – используются для непосещенных ссылок.
:visited – используется для ссылки на страницу, которую уже посетили.

Все непосещенные ссылки на сайте будут синего цвета.

Все посещенные ссылки на сайте будут красного цвета и шрифт текста Arial.

При наведении на ссылки цвет изменится на белый, а шрифт будет жирным.

При нажатии на ссылку цвет текста станет серым.

Выбор необходимого дочернего элемента
:first-child – первый дочерний элемент.
:last-child – последний дочерний элемент.
:nth-child(n) – n-й по счету дочерний элемент.

Добавление стилей к дочерним элементам

Добавление стилей к дочерним элементам
При наведении на блок с классом «parent» у дочернего элемента с классом «child» цвет фона изменится на синий.

Комбинирование псевдоклассов
При наведении на непосещенную ссылку цвет текста будет зеленым.

Комбинирование псевдоклассов
При наведении на посещенную ссылку цвет текста будет красным.

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

Основные теги для верстки
(div и span)

Внешний вид
Это блочный элемент
Это строчный элемент

Особенности блочных элементов
Блочные элементы отображаются на веб-странице в виде прямоугольника.
Занимают всю доступную ширину.
Высота определяется содержимым.

Особенности блочных элементов
Начинаются с новой строки.
Допускается вкладывать один блочный элемент внутрь другого.
Запрещено добавлять внутрь строчных элементов блочные.

Особенности строчных элементов
Используются для изменения вида текста и логического выделения.
Являются частью строки.
Ширина равна содержимому плюс значения отступов.

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

Блочные элементы
. . .

Строчные элементы
. . .

Практическое задание