логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Селектор по тегу в CSS. Полное руководство с примерами

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

04 октября 2024 г.
Автор

Дмитрий Нечаев

Селекторы по тегу в CSS используются для стилизации определённых HTML-элементов. Это один из базовых типов селекторов, который позволяет выбрать все элементы определённого типа на странице и применить к ним стили. В этой статье мы подробно рассмотрим, как работают селекторы по тегу, их использование и приведем примеры для различных HTML-тегов.

Что такое селектор по тегу?

Селектор по тегу (или элементный селектор) выбирает все элементы определённого типа в HTML-документе. Например, если нужно изменить стиль всех абзацев (<p>) на странице, можно использовать селектор p.

Пример:

p {
  color: blue; /* Устанавливает синий цвет текста для всех абзацев */
}

Этот CSS-код изменит цвет текста всех элементов <p> на странице на синий.

Основные теги и их стилизация

Рассмотрим несколько примеров использования селекторов по тегу для различных HTML-элементов.

Стилизация заголовков

HTML предоставляет теги для различных уровней заголовков от <h1> до <h6>. Селекторы по тегу позволяют легко стилизовать их.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1 {
      font-size: 36px;
      color: darkblue;
      text-align: center;
    }

    h2 {
      font-size: 30px;
      color: darkgreen;
    }
  </style>
  <title>Стилизация заголовков</title>
</head>
<body>
  <h1>Заголовок уровня 1</h1>
  <h2>Заголовок уровня 2</h2>
  <h2>Еще один заголовок уровня 2</h2>
</body>
</html>

В этом примере заголовки <h1> и <h2> имеют разные стили.

Стилизация абзацев

Абзацы текста заключаются в теги <p>. Используя селектор p, можно задать общий стиль для всех абзацев.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p {
      font-size: 16px;
      line-height: 1.5;
      color: #333;
    }
  </style>
  <title>Стилизация абзацев</title>
</head>
<body>
  <p>Это первый абзац.</p>
  <p>Это второй абзац.</p>
</body>
</html>

Стилизация списков

Для списков используются теги <ul> (ненумерованные списки) и <ol> (нумерованные списки), а также <li> для элементов списка.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    ul {
      list-style-type: square;
      padding-left: 20px;
    }

    ol {
      list-style-type: decimal;
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
      color: darkred;
    }
  </style>
  <title>Стилизация списков</title>
</head>
<body>
  <ul>
    <li>Элемент ненумерованного списка 1</li>
    <li>Элемент ненумерованного списка 2</li>
  </ul>
  <ol>
    <li>Элемент нумерованного списка 1</li>
    <li>Элемент нумерованного списка 2</li>
  </ol>
</body>
</html>

Стилизация ссылок

Ссылки в HTML определяются тегом <a>. Используя селектор по тегу a, можно задать стиль для всех ссылок на странице.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    a {
      color: blue;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
  <title>Стилизация ссылок</title>
</head>
<body>
  <a href="<https://example.com>">Это ссылка</a>
</body>
</html>

Стилизация изображений

Изображения в HTML добавляются с помощью тега <img>. Селектор по тегу img позволяет задавать стили для всех изображений.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    img {
      max-width: 100%;
      height: auto;
      border: 2px solid black;
    }
  </style>
  <title>Стилизация изображений</title>
</head>
<body>
  <img src="<https://via.placeholder.com/150>" alt="Пример изображения">
</body>
</html>

Сочетание селекторов по тегу с другими селекторами

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

Сочетание с классами

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p.special {
      color: purple;
      font-weight: bold;
    }
  </style>
  <title>Сочетание с классами</title>
</head>
<body>
  <p>Обычный абзац.</p>
  <p class="special">Особенный абзац.</p>
</body>
</html>

Сочетание с идентификаторами

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1#main-title {
      color: darkorange;
      text-transform: uppercase;
    }
  </style>
  <title>Сочетание с идентификаторами</title>
</head>
<body>
  <h1 id="main-title">Главный заголовок</h1>
  <h1>Обычный заголовок</h1>
</body>
</html>

Сочетание с псевдоклассами

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
  <title>Сочетание с псевдоклассами</title>
</head>
<body>
  <a href="<https://example.com>">Наведи на меня</a>
</body>
</html>

Заключение

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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile