Использование универсального селектора
29 сентября 2018 | Опубликовано в css | Нет комментариев »
Селектор с наиболее широкой областью применения в CSS — универсальный селектор еще и обладает широчайшими возможностями. Используемый в одиночку, этот селектор задает указанные значения абсолютно всему. Например:
* { color: red; }
устанавливает каждому тегу и в результате всему содержимому, включая растровые изображения, красный цвет. Сюда входят ссылки, заголовки, абзацы, ячейки таблиц, псевдоселекторы состояний, такие как «при наведении указателя мыши» и «посещено».
Универсальный селектор в CSS равносилен нейтронной бомбе, стирающей все, к чему она применена.
Хотя задание красного цвета всему содержимому сайта не представляет практической пользы, этот селектор может быть полезен при использовании в качестве сброса некоторых настроек CSS в начале таблицы стилей:
* { border: none; box-sizing: border-box; }
Запись выше удалит рамки по умолчанию у всех элементов и задаст размеры всем блокам по модели border-box (включающей рамку в заданные размеры), что может быть удобным. Еще можно сбросить настройки внешнего и внутреннего отступа и высоты строки в той же записи:
* { border: 0; padding: 0; line-height: 0; margin: 0; box-sizing: border-box; }
С такой записью появляется возможность начать с чистого листа, не завися и не сражаясь с встроенными в браузер правилами отображения элементов, находящимися в таблицах стилей браузеров.
И последнее: из-за своей ошеломляющей силы использование универсального селектора может снизить быстродействие браузера, особенно у сложных сайтов с большим количеством разметки: таблица стилей должна применить правила в объявлении универсального селектора к каждому тегу до того, как остальной код CSS сможет быть использован. Нужно помнить об этом при оптимизации кода CSS для веб-сайта.
Автор урока 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