CSS-правило. Полное руководство с примерами

CSS (Cascading Style Sheets) — это язык, используемый для описания внешнего вида HTML-документов. Основные единицы в CSS — это правила (CSS rules), которые определяют, как элементы на веб-странице должны отображаться. В этой статье мы подробно рассмотрим, из чего состоят CSS-правила, их структуру и как они используются для стилизации веб-страниц.

Структура CSS-правила

Каждое CSS-правило состоит из двух основных частей: селектора и декларации. Декларация, в свою очередь, состоит из свойства и значения.

Селектор

Селектор — это часть CSS-правила, которая определяет, к каким элементам HTML будут применяться стили. Существует несколько типов селекторов, каждый из которых имеет своё применение:

• Селекторы тегов (элементов): применяются ко всем элементам определенного типа. Например, p для всех абзацев.
• Классовые селекторы: применяются ко всем элементам с определённым классом. Например, .class-name.
• Идентификаторы: применяются к элементу с определённым идентификатором. Например, #id-name.
• Атрибутные селекторы: применяются к элементам с определённым атрибутом. Например, [type="text"].
• Псевдоклассы: применяются к элементам в определённом состоянии. Например, :hover.
• Псевдоэлементы: применяются к частям элемента. Например, ::before.

Декларация

Декларация — это часть CSS-правила, которая содержит одно или несколько свойств и их значений, определяющих, как выбранные элементы должны быть стилизованы.

Свойство

Свойство определяет аспект стиля, который будет изменён, например, color (цвет текста) или margin (внешний отступ).

Значение

Значение задает конкретное изменение, которое будет применено к свойству, например, red для color или 10px для margin.

Пример CSS-правила

Рассмотрим пример CSS-правила, в котором стилизуется абзац текста:

p {
  color: blue; /* Цвет текста */
  font-size: 16px; /* Размер шрифта */
  margin: 10px; /* Внешний отступ */
}

В этом примере p — это селектор, а внутри фигурных скобок {} находятся декларации, каждая из которых состоит из свойства и значения.

Типы селекторов

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

Применяются ко всем элементам указанного типа:

h1 {
  font-size: 24px; /* Размер шрифта для всех заголовков h1 */
}

Классовые селекторы

Применяются ко всем элементам с определённым классом:

.button {
  background-color: blue; /* Фоновый цвет для всех элементов с классом button */
  color: white; /* Цвет текста для всех элементов с классом button */
}

Идентификаторы

Применяются к элементу с определённым идентификатором:

#header {
  background-color: grey; /* Фоновый цвет для элемента с id "header" */
}

Атрибутные селекторы

Применяются к элементам с определённым атрибутом:

input[type="text"] {
  border: 1px solid black; /* Граница для всех текстовых полей ввода */
}

Псевдоклассы

Применяются к элементам в определённом состоянии:

a:hover {
  color: red; /* Цвет текста для ссылки при наведении мыши */
}

Псевдоэлементы

Применяются к частям элемента:

p::first-line {
  font-weight: bold; /* Жирный шрифт для первой строки абзаца */
}

Группировка и каскадирование CSS-правил

Группировка

Для экономии места и повышения читабельности CSS можно группировать селекторы, которые имеют одинаковые стили:

h1, h2, h3 {
  color: navy; /* Одинаковый цвет текста для заголовков h1, h2 и h3 */
}

Каскадирование

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

Пример:

p {
  color: blue; /* Правило 1 */
}

.special {
  color: red; /* Правило 2 */
}

Если у абзаца есть класс special, то будет применено правило 2, так как оно более специфично.

Специфичность и важность (importance)

Специфичность определяет приоритет CSS-правил. Более специфичные правила имеют больший приоритет.

Пример:

div p {
  color: green; /* Специфичность: 0, 0, 1, 1 */
}

p.special {
  color: red; /* Специфичность: 0, 0, 1, 1 */
}

#unique p {
  color: blue; /* Специфичность: 0, 1, 0, 1 */
}

В этом примере, если абзац находится внутри элемента с id unique, то он будет синим.

Также можно использовать !important, чтобы принудительно применить стиль:

p {
  color: blue !important; /* Принудительное применение синего цвета */
}

Заключение

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