Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Универсальный селектор CSS, пожалуй, самый простой в понимании, так как он указывает, что стили будут применены абсолютно ко всем элементам без исключения. Универсальный селектор состоит всего из одного знака — звездочка (*), общий синтаксис следующий:

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

Пример использования универсального селектора CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Универсальный селектор</title>
  <style type="text/css">
   * {
    margin:0; /* обнуляем внешние поля элементов */
    padding:0; /* обнуляем внутренние отступы */
    border:0; /* убираем рамки */
   }
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Параграф 3

В этом примере были обнулены поля, отступы и убраны рамки элементов страницы. Для чего это может быть нужно? Как вы уже знаете из урока о значениях и единицах измерения CSS, некоторые HTML-элементы изначально имеют определенные значения некоторых свойств, например у параграфов это ненулевые верхние и нижние поля пустого пространства, у ссылок-изображений это рамки и т.д. Но не все так просто, дело в том, что в разных браузерах размер этих полей может несколько отличаться, а некоторые уже давно не устанавливают по умолчанию рамки у ссылок-изображений. И это далеко не все возможные отличия.

Так вот, многие верстальщики (а вы сейчас учитесь именно верстке) создают так называемый «Сброс стилей CSS», то есть в самом начале таблицы стилей они обнуляют все возможные ненулевые значения CSS, а потом, в процессе работы, добавляют стили элементам, но уже, естественно, со своими значениями. Таким образом можно быть уверенным, что во всех браузерах HTML-страница будет выглядеть одинаково.

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

Домашнее задание.

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

  1. Измените стили тега <BLOCKQUOTE> таким образом, чтобы он стал похож на параграф. Какое свойство для этого нужно подумайте сами.
  2. Измените тег параграфа так, чтобы он наоборот стал похож на тег выделения длинных цитат.
  3. Превратите тег <SPAN> из элемента уровня строки (inline) в блочный элемент. Используйте для этого свойство display.
  4. Разместите указанные теги на странице и заполните их чем-нибудь, чтобы увидеть результат своих деяний.

p.s. Тут есть одна ловушечка, интересно поймаетесь вы на нее или нет?

Селекторы атрибутов← Содержание →Классы
Учебник CSS