При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным. Пишите все правила для каждого селектора в одном местеДопускается для каждого селектора добавлять каждый стилевой параметр и его значение по отдельности, как это показано в примере 18.1. Пример 18.1 TD { background: olive; } TD { color: white; } TD { border: 1px solid black; } Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите аргументы для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 18.2). Пример 18.2 TD { background: olive; color: white; border: 1px solid black; } Форма написания — в одну строку или несколько — зависит от воли автора. Заметим только что, когда каждый параметр занимает отдельную строку, проще отыскивать взглядом нужное значение. Соответственно, быстрее и удобнее происходит редактирование кода CSS. Имеет приоритет значение, указанное в коде нижеЕсли для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже (пример 18.3). Пример 18.3 P { color: green } P { color: red } В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color. На самом деле такой записи лучше вообще избегать и удалять повторяющиеся параметры селекторов. Но подобное может произойти не явно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы. Начинайте с селекторов верхнего уровняУчитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY, как показано в примере 18.4. Пример 18.4 BODY { font-family: "Times New Roman", Times, serif; font-size: 110%; } Наследование свойств позволяет не повторять многократно одни и те же параметры, если они заданы для селекторов верхнего уровня. Только учтите, что не все атрибуты наследуются и к некоторым из них вроде border, все же приходится обращаться несколько раз. Группируйте селекторы с одинаковыми параметрами и значениямиДостоинство и удобство группирования состоит в применении набора параметров сразу к нескольким селекторам одновременно. Так, в примере 18.5 показано добавление одинаковых атрибутов для трех разных идентификаторов. Но поскольку для них требуется различный цвет фона, то он устанавливается уже ниже. Пример 18.5 #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 } Используйте идентификаторы и классыКлассы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д. Если тег перед именем класса не установлен, то он может добавлять к любому тегу (пример 18.6). Пример 18.6 .new { ... }
P.new { ... } Класс new в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается.
|