Menu
CoddyTech

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

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 11 из 76.

Селектор типа, также известный как селектор элементов или селектор тегов, выбирает HTML-элементы на основе их имен тегов. Это один из самых простых и фундаментальных селекторов в CSS. 

Вот базовый синтаксис использования селектора типа:

tagname {
    property: value;
}
  • tagname: Имя HTML-тега, который вы хотите стилизовать (например, p, h1, div).
  • property: CSS-свойство, которое вы хотите установить (например, color, font-size).
  • value: Значение, которое вы хотите установить для свойства (например, blue, 16px).

Например:

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

В этом примере селектор типа p выбирает все элементы <p> (абзацы) в HTML-документе. Объявления устанавливают синий цвет текста и размер шрифта 16 пикселей для всех абзацев.

challenge icon

Задание

Легко

Вам дан HTML-документ с различными элементами, включая заголовки (<h1>, <h2>), абзацы (<p>) и блоки (<div>). Ваша задача — использовать селекторы типов для стилизации этих элементов. Выполните следующие шаги:

  1. Напишите CSS-правило, которое выбирает все элементы <h1>. Установите цвет текста заголовков <h1> на "darkred".
  2. Напишите CSS-правило, которое выбирает все элементы <h2>. Установите цвет текста заголовков <h2> на "green".
  3. Напишите CSS-правило, которое выбирает все элементы <p>. Установите цвет текста абзацев на "blue", а размер шрифта — на "18px".
  4. Напишите CSS-правило, которое выбирает все элементы <div>. Установите цвет фона блоков на "lightblue".

Попробуйте сами

<html>
<head>
    <title>Type Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Стилизация с CSS

Потренируйтесь самостоятельно: Песочница Web