Используйте идентификаторы и классы

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

Пример 18.6

.new {

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

}

P.new {

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

}

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

Применяйте универсальные стилевые параметры

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

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

Пример 18.7

P {

margin-top: 10px;

margin-right: 30px;

margin-bottom: 5px;

margin-left: 0;

}

P {

margin: 10px 30px 5px 0;

}

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

25