Что такое тег в CSS?

Тег в CSS — это селектор, который совпадает с HTML-тегом (элементом) и применяет к нему стили. Например, селектор p выбирает все абзацы (<p>) на странице, а h1 — все заголовки первого уровня. В терминологии CSS такое использование называется «селектором по типу элемента» (type selector). Это самый простой и широкий способ задать стили, так как он влияет сразу на все элементы определённого типа на всей странице.

Как тег выглядит в CSS-правиле

CSS-правило состоит из селектора и блока объявлений. Селектор «тег» выглядит как название HTML-элемента без угловых скобок.

p {
    color: blue;
    font-size: 16px;
}

В этом примере p — это селектор по тегу. Он означает: «найди все элементы <p> на странице и сделай их текст синим, а размер шрифта — 16 пикселей». Обратите внимание: в CSS не пишут <p>, только p.

Вот как это выглядит на практике:

<style>
  /* Селектор по тегу */
  h2 {
    color: #3366cc;
    border-bottom: 1px solid #ccc;
  }
</style>


<h2>Этот заголовок будет синим с подчёркиванием</h2>

Какие теги можно использовать в CSS

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

Особенности и приоритет селектора по тегу

Селектор по тегу имеет довольно низкую специфичность (вес). Его легко перебить другими селекторами — по классу, по id или инлайновыми стилями.

• Вес (специфичность): 0,0,0,1 (один балл за каждый тег).
• В сравнении: Селектор по классу (.button) имеет вес 0,0,1,0 и перебьёт селектор по тегу, если оба правила применяются к одному элементу.

Пример приоритета:

<style>
  p { color: red; }       /* селектор по тегу */
  .special { color: green; } /* селектор по классу */
</style>

<p class="special">Этот текст будет зелёным, а не красным!</p>

Поэтому в профессиональной вёрстке редко используют голые селекторы по тегу для всего сайта. Их обычно переопределяют классами или комбинируют с контекстом (например, article p — только абзацы внутри статей).

Как комбинировать селекторы по тегу с другими

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

• Группировка: h1, h2, h3 { font-family: Arial; } — применить стиль ко всем заголовкам сразу.
• Вложенность (контекст): article p { margin-bottom: 1em; } — только абзацы внутри тега article.
• Комбинация с классом: button.primary { background: blue; } — все кнопки с классом primary.
• Наследование: Стиль, заданный тегу body (body { font-family: Arial; }), наследуется всеми внутренними элементами, если они не переопределяют его сами.

Пример из реальной вёрстки

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

<style>
  /* Базовые стили для всего сайта */
  body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
  }
  h1, h2, h3 {
    color: #222;
    margin-top: 1.5em;
  }
  p {
    margin-bottom: 1em;
    text-align: justify;
  }
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }
  /* А вот для уникальных блоков — классы */
  .note {
    background: #f9f9f9;
    border-left: 4px solid #3366cc;
    padding: 1em;
  }
</style>

Такой подход экономит время: вам не нужно добавлять класс к каждому абзацу — стили применяются автоматически ко всем тегам p.

Ошибки новичков при работе с селекторами тегов

• Слишком широкая область действия: Например, div { margin: 10px; } добавит отступы всем <div> на странице, что может сломать вёрстку. Лучше использовать классы или контекстные селекторы.
• Путаница между тегом HTML и CSS-селектором: В CSS не пишут угловые скобки. <h1> — это HTML, а h1 — CSS.
• Забывают про специфичность: Потом удивляются, почему p { color: red; } не работает, если есть .content p { color: blue; }. Второй селектор имеет больший вес из-за класса.

Теги в CSS в контексте CMS и конструкторов

Когда вы работаете с CMS (например, Joomla) или конструктором (SitePro.by), вы редко пишете CSS вручную, но если добавляете свои стили, то селекторы по тегам могут конфликтовать с теми, что уже заданы в теме. Поэтому рекомендуется:

• Использовать более специфичные селекторы, например, оборачивать свои стили в уникальный класс-обёртку: .my-custom-theme p { ... }.
• Не переопределять стили для тегов html, body, div без крайней необходимости — это может сломать отображение модулей и компонентов.

Мой экспертный вердикт: Селектор по тегу — это фундаментальный инструмент, который есть в арсенале каждого верстальщика. Он идеален для сброса браузерных стилей (reset.css), базовой типографики и глобальных настроек. Однако в крупных проектах лучше комбинировать его с классами, чтобы избежать неожиданных побочных эффектов. Освойте селекторы по тегу, но не делайте их основой всей вашей CSS-архитектуры — это приведёт к трудно поддерживаемому коду.