Здесь у нас есть селектор элемента p, за которым сразу без пробелов следует точка, которая является селектором класса. И это говорит о том, что мы хотим выделить каждый элемент p, который имеет атрибут класса со значением big.

И обратите внимание на отсутствие пробела между этими селекторами. Если вы поставите пробел, это будет означать совершенно другую комбинацию.

Этот метод довольно часто используется, когда у вас есть оправило CSS, которое применяется к различным элементам, но вы хотите, чтобы для конкретного элемента это правило изменилось.

Следующим типом комбинации селекторов является дочерний селектор.

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

И в этом случае мы выделяем каждый элемент p, который является прямым дочерним элементом элемента article. Таким образом, в этом примере элемент p, который является прямым дочерним элементом элемента article, получит стиль синего цвета, в отличие от обычного элемента p.

Другой тип комбинации селекторов – это селектор потомков.

И синтаксис этой комбинации – селектор пробел родительский селектор. И так же, вы читаете эту комбинацию справа налево.

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

Теперь, нужно отметить, что эти комбинации селекторов не ограничиваются селекторами элементов. Так, например, у нас может быть комбинация .colored p элемента с классом, или комбинация класса с классом.

Помимо простых селекторов (выбор элементов на основе тега, идентификатора, класса), есть также селекторы псевдоклассов, которые выбирают элементы на основе определенного их состояния.

Селекторы псевдоклассов дают возможность стилизации документа на основе взаимодействия пользователя со страницей. Например, мы можем сделать так, чтобы стиль элемента менялся, когда пользователь наводит курсор мыши на элемент.

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

Например, селектор ссылок «:link» стилизует не посещенные ссылки. Здесь мы окрашиваем не посещенную ссылку в желтый цвет.

Также мы можем стилизовать посещенную ссылку с помощью селектора «:visited».

Селектор «:hover» используется для выбора и стилизации элементов при наведении на них курсора мыши. И селектор «:hover» можно использовать для любых элементов, а не только для ссылок или кнопок.

При использовании селектора «:hover» для ссылок, он должен идти после селекторов «:link» и «:visited» в определении CSS.

Селектор «:active» используется для выбора и стилизации активной ссылки, т.е. ссылки при нажатии на нее. Хотя селектор «:active» можно использовать для всех элементов, а не только для ссылок.

При использовании селектора «:active», он должен идти после селектора «:hover» в определении CSS, что соответствует логики действий пользователя.

Селектор «:nth-child(n)» выбирает каждый элемент, который является n-м дочерним элементом своего родителя. При этом n может быть числом, ключевым словом (четный или нечетный, odd или even) или формулой, например (an + b), где a представляет размер цикла, n – счетчик (начиная с 0), а b – значение смещения.

В этом примере, элемент «This is some text.» в первом теге div никак не стилизован, далее такой же элемент во втором теге div выделен красным цветом. В списке содержимое второго элемента выделено зеленым цветом, и содержимое каждого третьего элемента выделено желтым цветом.

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

Давайте рассмотрим пример.

В этом примере мы указываем в теге style, что каждый h2 в нашем HTML-документе должен иметь темно-бордовый цвет текста.

Однако есть и другие места, где вы можете указать стиль CSS.

Например, вы можете указать стиль CSS непосредственно для элемента, указав атрибут style и объявления CSS непосредственно в теге элемента.

Объявления стилей будет точно такое же, как и раньше, и они также заканчиваются точкой с запятой, и вы можете указать здесь несколько объявлений, просто завершая их точкой с запятой.

Это называется встроенным стилем, и, как вы могли догадаться, это наименее пригодный для повторного использования способ стилизации элементов.

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

Теперь, что, если у меня есть несколько страниц на моем веб-сайте, и я хочу, чтобы все они выглядели одинаково? Это означает, что указание стилей с помощью тега style мне не поможет.

И мне нужен какой-то другой способ указать стили, который является внешним по отношению к HTML-странице.

Для этого мы можем использовать тег с именем link, где мы сообщаем браузеру, что есть таблица стилей и указываем ее местоположение, используя атрибут href.

И внешние таблицы стилей – это просто файлы со списками правил CSS. И здесь нет никаких особых тегов.

Как вы можете видеть в этом файле style.css, мы указываем для тела документа, что его цвет фона должен быть серым, а размер шрифта должен составлять 130% от размера шрифта по умолчанию.

Реальные веб-сайты почти всегда используют внешние таблицы стилей, что означает, что вы берете все свои стили и помещаете их во внешний файл, а затем связываете его обратно с несколькими HTML-страницами с помощью тега link.

Этот метод не только повторно использует стили CSS, но и способствует единообразному виду всего веб-сайта.

Теперь давайте рассмотрим разрешение конфликтов при определении стилей.

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