Лекция: Правила создания стиля
При написании достаточно объемного 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-верстки. Создание «резинового» шаблона.