Синтаксис CSS
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 2 из 76.
В CSS синтаксис относится к набору правил, которые определяют, как должен быть написан CSS-код. Понимание синтаксиса CSS необходимо для создания хорошо структурированных и функциональных таблиц стилей. Базовое правило CSS состоит из селектора и блока объявлений.
Вот краткое описание:
- Селектор: Указывает HTML-элемент, который вы хотите стилизовать (например, p, div, img).
- Блок объявлений: Содержит одно или несколько объявлений, заключенных в фигурные скобки
{}.
- Объявление: состоит из свойства и значения, разделенных двоеточием
:(например, color:green;). Каждое объявление должно заканчиваться точкой с запятой (;).
- Свойство: Атрибут стиля, который вы хотите изменить (например, color, font-size).
- Значение: Значение, которое вы хотите установить для свойства (например, blue, 16px).
Например:
p {
color: blue;
font-size: 16px;
}В этом примере p — это селектор, который выбирает все элементы абзацев. Блок объявлений содержит два объявления: одно устанавливает цвет текста синим, а другое — размер шрифта 16 пикселей.
Задание
ЛегкоВам предоставлен HTML-код с элементом параграфа и CSS-правилом для этого параграфа. Измените CSS-правило, чтобы изменить цвет текста на red.
Шпаргалка
Синтаксис CSS состоит из селектора и блока объявлений:
- Селектор: Указывает на HTML-элемент, к которому применяется стиль (например, p, div, img)
- Блок объявлений: Содержит объявления, заключенные в фигурные скобки
{} - Объявление: Свойство и значение, разделенные двоеточием
:и заканчивающиеся точкой с запятой; - Свойство: Атрибут стиля, который нужно изменить (например, color, font-size)
- Значение: Значение для свойства (например, blue, 16px)
p {
color: blue;
font-size: 16px;
}Попробуйте сами
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №2
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление