День 21. Блэкджек.

Давайте разберемся с синтаксисом CSS. Для начала общие замечания.
Ключевые слова в CSS не выделяются кавычками, то есть red - это ключевое слово, а "red" -
нет. Комментарии, в отличии от HTML, обрамляются значками /* и */ .

Теперь переходим к селекторам. Селекторы - это название элементов, к которым применяются параметры стиля. То есть в записи p {color: red} p - будет селектором.
Давайте посмотрим на основные приемы работы с селекторами.

Группировка.

Группировка применяется для применения одних и тех же свойств для разных элементов. Чтобы ее осуществить необходимо перечислить селекторы этих элементов через запятую. Что то вроде

h1, p {color:red}

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

Селекторы потомков.

Ну это уже посложнее. Как мы знаем, элементы в HTML можно вкладывать друг в друга. И может  возникнуть необходимость применить стиль к элементу, вложенному в другой элемент, при этом не  применяя стиль ко всем остальным таким же элементам. Понятно? После примера станет понятнее.

h1 em {color : red}

В этом случае красный цвет будет применен только к тем элементам em, которые находятся внутри элемента h1. Если в коде будут еще элементы em, но которые не находятся внутри h1, то к ним такой стиль пременяться не будет.

Селекторы атрибутов.

Можно задавать стиля только для элементов, к которым указаны соответствующие атрибуты.
Примерно вот так вот можно делать:

p[align] {color : blue}
p[align=center] {color : blue}

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

Id - селекторы.

Для элементов в HTML можно указать id идентификатор. С помощью этого идентификатора можно указывать к каким элементам применять стиль. То есть использовать конструкцию

#id1001{color : red }
<p id=id1001>Текст абзаца</p>

Здесь использован идентификатор id1001, и к элементам с таким идентификаторам(в примере это элемент абзаца) будет применен соответствующий стиль. Обратите внимание на знак # перед идентификатором, его наличие обязательно.
Он собственно и указывает на то, что используется ID - селектор.

Итог

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