Занятия в МЦ / Как правильно писать CSS файлы

Итак рассмотрим пример:

* {
font-family: tahoma;
}
body {
width: 400px;
}
h1 {
color: green;
font-size: 20px;
}
.first {
color: red;
font-weight: bold;
font-style: italic;
}
#r {
border: 1px dashed gray;
padding: 10px;
background: #FFFFDE;
}

Как мы видим, что файл состоит из правил вида:

Селекторы {
	свойство1: значение1;
	свойство2: значение2;
}

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

Селекторы

Бывают нескольких видов:

Обобщающие. Они содержат в себе звездочку. Используя их, мы назначаем правила сразу всем элементам в пределах документа либо родительского объекта. В примере *{font-family: tahoma;} определяет шрифт Tahomа для всех элементов нашей страницы.

Название тега. Если нам нужно обработать все теги с одним именем, то это правило подходит лучше всего. Мы можем перекрасить все параграфы, или поменять размер всех заголовков. Вот и в нашем случае body { width: 400px; } задает ширину 400 пикселей для тела страницы. А h1 { color: green; font-size: 20px;} — перекрашивает все заголовки первого уровня в зеленый цвет и указывает размер шрифта в 20 пикселей.

Класс элементов. Позволяет указать нужные стили сразу для всех элементов одним классом. Например, если вы хотите часть элементов списка перекрасить в другой цвет, то для них вы задаете атрибут class=»class-name» , а в свойствах пишите конструкцию начинающуюся с точки — .class-name. В нашем примере .first { color: red; font-weight: bold; font-style: italic;} мы для всех элементов списка с классом first назначаем красный цвет шрифта с жирным наклонным начертанием.

Идентификатор элемента. Очень удобно в тех случаях, когда вам нужно поменять свойства только одного элемента на странице. Например, задать фон для шапки сайта, или поменять размер формы подписки справа. И много другое. Для этого у элемента страницы нужно задать атрибут id=»attr-id», а в свойствах указать #attr-id. В нашем примере #r { border: 1px dashed gray; padding: 10px; background: #FFFFDE;} для параграфа id=»r» задается серая рамка пунктиром и внутренние поля шириной 10 пикселей и фон цветом #FFFFDE.

Вложенность селекторов

Еще более расширить функционал селекторов CSS можно с помощью их вложенности .

Например, у вас на странице необходимо во всех параграфах перекрасить ссылки в красный цвет. Вы можете написать такой селектор.

p a{
	color: red;
}

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

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

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

Еще одно немаловажной особенностью CSS является наследование свойств.

Рассмотрим пример:

*{
	margin: 0;
}
p{
	margin: 10px;
}
.class{
	margin: 5px;
}
#id{
	margin: 6px;
}

Первый оператор сбрасывает отступы для всех элементов страницы.
Второй — устанавливает отступы в 10 пикселей для всех параграфов.
Если для каких-то параграфов будет задан class=»class», то их отступы поменяются на 5 пикселей.
И если среди этих все параграфов появится один с id=»id», то его отступы будут шириной 6 пикселей.

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

Правила расположенные ниже перекрывают те, что находятся в файле выше.
Более частные правила перекрывают более общие. Например p перекроет *. Или «.class p » перекроет простое «p».
Правило с классом важнее правила без оного. А ID важнее  класса.

Объединение свойств

Для увеличения компактности таблиц стилей применяется оператор запятая. Например:

a, strong {color: red;}

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

© Pirania Laboratory. Мы работаем с 2005 года.