Селекторы тегов

В статье «Базовый синтаксис CSS» мы говорили о селекторах. Если вы не знаете что такое селектор, тогда советуем изучить данную статью.

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде:

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега (заглавными или строчными не имеет значения). Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение.

Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько. Пример:

P { 
    text-align: justify; /* Выравнивание по ширине */
    color: white; /* Белый цвет текста */
   }

Виды селекторов

1. Селектор типа

Стиль применяется к HTML-элементам указанного типа. Иными словами, прямо к тегу. Например, чтобы задать базовые значения всем заголовкам первого уровня на сайте:

h1 { 
font-size: 1.875em; 
line-height: 1.075; 
}

2. Селектор класса

Применяется к элементам по имени, без привязки к тегу. CSS-класс определяется точкой перед именем:

.article-title { 
    color: red; 
}

Атрибутом class определяется элемент, к которому применится стиль.

<h1 class="article-title">My cool article</h1>

3. Селектор идентификатора

Как и селектор класса, привязывается к элементу по имени. Определяется диезом:

#element-id { 
color: red; 
}

Атрибутом id определяется элемент, к которому применится стиль:

<h1 id="element-id">My cool article</h1>

Значения стилей id перебьют значения класса, вне зависимости от порядка записи в CSS.

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

Применяется ко всем элементам на странице. Следующая запись в таблице стилей добавит каждому элементу красную рамку:

* { 
border: solid 1px red; 
}

2023-11-18 00:13 Самоучитель по CSS