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

h1 { color: firebrick; }

Селекторы элементов или селекторы типов элементов — грубые, но мощные. При их использовании распространены следующие ошибки:

• Название селектора должно точно соответствовать названию элемента. Запись image { … } не повлияет на внешний вид элементов изображений , а img { … } — повлияет.

• Будьте внимательны и не путайте элемент с его атрибутами, когда ходите использовать селектор элемента. Запись a { … } задаст стили ссылкам, а href — это атрибут адреса, а не название элемента, так что он не может быть использован как селектор элемента.

• Постарайтесь не мелочиться и не допускать избыточности: при задании стилей начинайте с самых больших селекторов и спускайтесь вниз. То есть, начинайте файл стилей с правил для элементов body или html, задавая общие цвета и шрифты, используя принцип наследования, чтобы гарантировать, что у других элементов будет такой же внешний вид и им не нужно будет отдельно задавать общие с другими элементами стили. Например, запись body { font-family: Oxygen, sans-serif; } достаточна, чтобы обеспечить отображение почти всех элементов на указанной веб-странице шрифтом Oxygen.

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

• Не забывайте об исключениях: для изменение цвета ссылок нужно использовать именно селектор ссылок, правила селектора body или селекторов других элементов не повлияют на это. Подобным образом элемент <kbd> использует зарезервированный моноширинный шрифт при отображении своего содержимого и на него не подействует задание семейства шрифтов для его родительских элементов в таблице стилей.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селекторов last-child и last-of-type в CSS
• Использование селекторов first-of-type, first-child и nth-of-type
• Использование селектора only-of-type