При написании достаточно
объемного 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 выглядит нагляднее
и короче.
|