Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование селектора элемента в CSS

19 июня 2017 | Опубликовано в css | 1 Комментарий »

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

 

 


h1 { color: firebrick; }

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

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

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

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

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

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

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

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

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

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




Комментарии