Селектор типа
Часть раздела Стилизация с 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 пикселей для всех абзацев.
Задание
ЛегкоВам дан HTML-документ с различными элементами, включая заголовки (<h1>, <h2>), абзацы (<p>) и блоки (<div>). Ваша задача — использовать селекторы типов для стилизации этих элементов. Выполните следующие шаги:
- Напишите CSS-правило, которое выбирает все элементы
<h1>. Установите цвет текста заголовков<h1>на "darkred". - Напишите CSS-правило, которое выбирает все элементы
<h2>. Установите цвет текста заголовков<h2>на "green". - Напишите CSS-правило, которое выбирает все элементы
<p>. Установите цвет текста абзацев на "blue", а размер шрифта — на "18px". - Напишите 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>В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Стилизация с CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтаРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: задание №1Повторение: задание №27Блочная модель. Часть 1
Что такое блочная модель?Внутренние отступыВнешние отступыГраницыШирина и высотаИтоговое заданиеПотренируйтесь самостоятельно: Песочница Web