Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Универсальный селектор CSS

Универсальный селектор в языке CSS

Селектор
Универсальный селектор
Описание универсального селектора, языка CSS.

Схема CSS-кода выглядит следующим образом:

селектор {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

В универсальном селекторе, в качестве селектора, выступает знак звёздочки *:

* {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

Универсальный селектор, влияет сразу на все теги HTML-документа.

Например, можно убрать все внутренние и внешние отступы у всех тегов HTML-документа:

* {
 margin: 0;
 padding: 0;
}

Допустим, у нас есть HTML-документ содержащий следующий код:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Давайте с помощью универсального селектора, сделаем цвет шрифта у всех тегов зелёным green, имя шрифта arial, стиль шрифта oblique (наклонный).

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   * { 
    color: green;
    font-family: arial;
    font-style: oblique; 
   }
  </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Также можете поэкспериментировать с внешним отступом, сделайте его сначала 0, а затем 15px, добавьте в CSS-код:

margin: 0;

А потом:

margin: 15px;

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

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

Читать далее: Шпаргалка CSS

Скоро допишу статьи о других селекторах и их взаимоотношениях.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget