Язык СSS. Введение

Причины появления CSS:
Избыточность HTML. HTML стал нести слишком много информации, кроме как про разметку документа.
Желание большего числа возможностей для оформления. Это еще больше раздувало HTML разметку.
Упрощение оформление страницы.
Желание избежать копирования одних и тех же тегов и атрибутов для создания одинакового оформления.
Отделение контента страницы от его представления.

С появлением CSS упомянутый выше код можно переписать в следующем виде

CSS — язык стилей, определяющий отображение HTML (и других) документов.
CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.
CSS уровень 1 (1996, 1999) – параметры шрифтов, цвета, ...
CSS уровень 2 (12 мая 1998) – блочная вёрстка, селекторы, …
CSS уровень 2.1 (07 июня 2011)
CSS уровней 3 все еще находится в стадии разработки – трансформации, анимация, ...

Подключение CSS
Файл со стилями должен иметь расширение .css. Чтобы подключить такой файл к HTML странице, в теге следует написать такую конструкцию:

Синтаксис CSS
Каждое правило CSS состоит из двух частей: селектора и блока объявлений:
селектор {
правило
}

Синтаксис CSS
Каждое правило CSS состоит из двух частей: селектора и блока объявлений:
селектор {
правило
}
селектор, селектор, селектор {
/* блок объявления стилей */
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
}

Основные ошибки при написании CSS

Селекторы тегов, классов и идентификаторов
Селекторы тегов записываются как имена тегов. Поэтому селектор, который выделяет все заголовки первого уровня выглядит просто как «h1».

Селекторы классов
Этот элемент принадлежит двум классам: heading и red. Чтобы стилизовать этот элемент, в CSS следует записать:

Селекторы классов
Этот элемент принадлежит двум классам: heading и red. Чтобы стилизовать этот элемент, в CSS следует записать:

Селекторы идентификаторов
Селекторы идентификаторов задаются с помощью символа решетки, после которого идет значение атрибута id.
Так, например, следующий код не будет работать:

Селекторы идентификаторов
Селекторы идентификаторов задаются с помощью символа решетки, после которого идет значение атрибута id.
Рабочий пример:

Универсальный селектор

Комбинирование селектора тега и селектора класса (или нескольких селекторов класса):
Комбинирование селектора тега и селектора идентификатора:
Комбинирование селектора тега, селектора идентификатора и селектора класса:
Можно даже комбинировать два селектора идентификатора, но это не имеет смысла:
Также можно комбинировать универсальный селектор с любым селектором, но такая запись считается избыточной: эти два примера дадут одинаковый результат, и * можно опустить:

Селекторы атрибутов
Например, можно выделить все элементы, которые содержат определенный атрибут:

Динамические псевдоклассы
Псевдоклассы — такие селекторы, которые позволяют выбрать элементы в зависимости от их состояния.
Псевдоклассы состояния ссылок:

Динамические псевдоклассы
:enabled и :disabled позволяют выбирать элементы в зависимости от их доступности для взаимодействия с пользователем.
:checked позволяет выбрать все элементы, в которых есть атрибут checked.
:indeterminate соответствует неопределенному состоянию checkbox’ов.
:read-only позволяет выбрать элементы с атрибутом ”только для чтения”.
:valid позволяет выбрать валидные элементы форм.

Структурные псевдоклассы
:root выбирает корневой элемент HTML-документа
:first-child/:last-child выбирают первый или последний дочерний элемент.
:nth-child/:nth-last-child(2n+1) позволяют выбрать n-ый элемент или nый элемент с конца.
:nth-of-type/:nth-last-of-type(-n+4)
:only-child/:only-of-type выбирает элемент, который является единственным дочерним для своего родительского элемента, или единственным данного типа.
:empty выбирает пустые элементы.

Рассмотрим следующую структуру HTML документа:

В результате применения селектора :first-child будут выделены следующие элементы:

А в результате применения :only-child

Результат применения селектора :nth-child(2n), который выбирает четные дочерние элементы, имеет вид:

При применении селектора :nth-of-type типом считается часть селектора до двоеточия. Результат применения div:nth-child(2n):

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

Отношения элементов в CSS
Рассмотрим для примера следующий код:

Селектор потомков
(контекстный селектор)

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

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

Дочерний селектор
Давайте теперь выберем те теги i, которые являются непосредственными потомками наших абзацев. В этом нам поможет дочерний селектор >.

Соседний селектор
Контекстные селекторы используются для вложенных друг в друга элементов, а соседние селекторы для расположенных рядом.
Соседние селекторы записываются с помощью знака +.

Соседний селектор
Селектор .a+li , а также li+.b , или даже li+li тоже применит стили к элементу с классом b, т.е. ко второму элементу списка.
А вот селектор .b+.a не сработает, т.е. элемент с классом b находится после элемента с классом a в разметке.
Селектор .c .a+.b сработает для тега с классом b, если сразу перед ним расположен тег с классом a и оба тега расположены внутри тега с классом с.

Сестринский селектор
Этот селектор похож на соседний селектор, но он менее строгий. Соседний селектор выберет только первый элемент, следующий сразу же за указанным элементом.
Селектор селектор1 ~ селектор2 выберет все элементы, подходящие под селектор2, расположенные после элемента селектор1.
Представим, что вам нужно сделать наклонный шрифт для всех абзацев
, которые идут после заголовка
. Код CSS будет выглядеть так:

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

Специфичность
Пусть теперь дан другой CSS код:

Специфичность
Считается специфичность следующим образом:
• Первое число — количество селекторов по идентификатору.
• Второе число — количество селекторов классов, псевдоклассов (кроме :not) или по атрибуту.
• Третье число — количество селекторов элементов (тегов) или псевдоэлементов

Специфичность

Приоритет правил
Инлайн — это способ указать стили непосредственно внутри HTML элемента:
Ключевое свойство !important используется внутри значения объявления, которое повышает приоритет данного объявления:
Также можно указать !important внутри инлайн стилей:

Специфичность
Инлайн стили по умолчанию приоритетнее стилей в CSS.
Стили в CSS с !important приоритетнее инлайн стилей.
Инлайн стили с !important приоритетнее всего.

Наследование стилей
Пусть даны следующий CSS код и HTML разметка:

Наследование стилей

Наследование стилей
Наследуемые стили: