Правила создания стиля

При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным:

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

TD { background: olive; }

TD { color: white; }

TD { border: 1px solid black; }

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

TD {

background: olive;

color: white;

border: 1px solid black;

}

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

· Имеет приоритет значение, указанное в коде ниже. Если для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже:

P { color: green; }

P { color: red; }

В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.

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

· Начинайте с селекторов верхнего уровня. Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY, как показано в следующем примере.

BODY {

font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта */

font-size: 110%; /* Размер шрифта */

}

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

· Группируйте селекторы с одинаковыми параметрами и значениями. Достоинство и удобство группирования состоит в применении набора параметров сразу к нескольким селекторам одновременно. Так, в следующем примере показано добавление одинаковых атрибутов для трех разных идентификаторов. Но поскольку для них требуется различный цвет фона, то он устанавливается уже ниже.

#col1, #col2, #col3 {

font-family: Arial, Verdana, sans-serif; /* Гарнитура шрифта */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Нормальное начертание */

color: white; /* Цвет текста */

}

/* Цвет фона для каждого слоя */

#col1 { background: #ebe0c5; }

#col2 { background: #bbe1c4; }

#col3 { background: #add0d9; }

· Используйте идентификаторы и классы. Классы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д. Если тег перед именем класса не установлен, то он может добавлять к любому тегу:

.new {

... /* Этот стиль можно использовать с любыми тегами */

}

P.new {

... /* Этот стиль работает только для тега <P> */

}

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

· Применяйте универсальные стилевые параметры. Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).

Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны. Через padding также можно задать разные значения сверху, справа, снизу и слева. В следующем примере показано использование универсального стилевого атрибута margin.

P {

margin-top: 10px;

margin-right: 30px;

margin-bottom: 5px;

margin-left: 0;

}

P {

margin: 10px 30px 5px 0;

}

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

3.8. Основы CSS-верстки. Создание «резинового» шаблона.