Использование селектора элемента в 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
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193