CSS Селекторы

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

      Название Элемента { свойство: значение; }   , где

Название Элемента – это теги HTML-языка

На практике это представляется в таком виде

          H3 { color:green;  font-size:16pt; }

Эта директива говорит о том, что подзаголовки третьего уровня будут зеленого цвета размером 16 пикселей.

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

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

Название Элемента1, Название Элемента2, Название Элемента3 { свойство:значение; }

Например

H1, H2, H3 { font-family: hevletica;  color:red; font-size:20pt; }

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

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

Например, если вы в файле .css присвоили элементу селектора CSS синий цвет шрифта, то при использовании следующего оператора

<h3> Подзаголовок <strong> раздела </strong></h3>

Строка  в окне браузера будет отображено в таком виде, слово подзаголовок обыкновенным шрифтом синего цвета, а слово раздела – жирным шрифтом синего цвета. То есть тег <strong> не отменяет свойств, указанных в файле .css.

На принципе наследования свойств одного элемента другим и строится метод описания единых параметров отображения всех видимых элементов веб-страниц.

На этом мы подведем черту и в следующей статье опишем подробно свойства элементов CSS селекторов, таких как шрифты, текст, фон…  Разберем все подробно. До встречи и всем успехов и здоровья.

11 комментариев на “CSS Селекторы”