Как писать правила в CSS

CSS (Cascading Style Sheets) — Каскадные таблицы стилей. Это документ, имеющий расширение .css и содержащий описание того как должен выглядеть контент на странице. Описание состоит из правил. В этой статье разберём из чего состоят правила и как правильно их записывать.

Одиночные селекторы

Напишем правило и рассмотрим его подробнее:

a — это элемент, который обозначает ссылку. В терминологии CSS это селектор, т.е. всё что стоит перед фигурной скобкой будет называться селектором. Внутри фигурных скобок находится определение. Определение состоит из свойства и значения. В данном примере свойством является color, а значением orange. После объявления такого правила все ссылки на страницах Вашего сайта станут оранжевыми.

Внутри фигурных скобок может быть не одно определение, а несколько:

Здесь в качестве селектора выступает элемент p. После селектора следует пробел, но он необязателен. Далее идёт фигурная скобка, колличество пробелов в фигурных скобках тоже не имеет значения. После каждого свойства ставится двоеточие. Абсолютно не важно сколько пробелов будет до двоеточия и после него. Чтобы отделить одно определение от другого нужно в конце каждого определения ставить точку с запятой. Если этого не сделать то следующее определение будет проигнорировано.

Также не важно будут ли определения записаны в строчку или нет:

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

После написания такого правила все абзацы в документе будут написаны полужирным шрифтом, за это отвечает свойство font-weight со значением bold, и текст в абзацах будет зелёного цвета, за это отвечает свойство color со значением green.

Сгруппированные селекторы.

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

Если нам нужно добраться до какого-то одного элемента, то элементы нужно перечислять через пробел:

Единицы измерения

Теперь рассмотрим как писать единицы измерения в определениях:

Это правило применяет ко всем абзацам в документе размер шрифта равный 5 пикселам. Обратите внимание, что после числа 5 нет пробела, это не ошибка, единицы измерения должны ставиться сразу после числа, без пробелов, иначе свойство будет неработоспособным !

Если стоит нулевое значение то единицу измерения допускается не ставить:

Здесь селектор em устанавливает нулевые внутренние отступы.

Поделиться