В CSS (Cascading Style Sheets) стили определяются путём присваивания значений различным свойствам, которые влияют на отображение HTML-элементов. Каждое свойство контролирует определённый аспект внешнего вида или поведения элемента, например, цвет, размер шрифта, маржи, паддинги и многое другое.
Синтаксис
Базовый синтаксис CSS состоит из селектора, свойства и значения. Селектор указывает, к какому элементу или группе элементов применяется стиль. После селектора следует блок объявления, который содержит одно или несколько свойств со значениями. Каждое объявление заканчивается точкой с запятой (;), а весь блок объявлений заключён в фигурные скобки ({}).
селектор {
свойство: значение;
свойство2: значение2;
}
Пример:
p {
color: red;
font-size: 16px;
}
В этом примере к элементам <p> применяются стили, которые устанавливают цвет текста в красный (red) и размер шрифта в 16 пикселей (16px).
Правила написания
- Регистр: CSS нечувствителен к регистру, но принято писать свойства и значения в нижнем регистре для улучшения читабельности.
- Кавычки: Строковые значения и URL-адреса могут быть заключены в одинарные (
' ') или двойные (" ") кавычки, но это не обязательно, за исключением случаев, когда значение содержит пробелы или специальные символы. - Комментарии: Комментарии в CSS начинаются с
/*и заканчиваются на*/. Они могут занимать одну или несколько строк и не влияют на обработку кода. - Единицы измерения: CSS поддерживает различные единицы измерения для значений, такие как пиксели (
px), проценты (%), em, rem и другие. Выбор единицы измерения зависит от задачи и контекста использования. - URL-адреса: Для свойств, принимающих URL-адреса в качестве значения (например,
background-image), URL должен быть заключён в функциюurl(), например,url('images/bg.jpg'). - Группировка свойств: Для упрощения кода и улучшения его читабельности связанные свойства можно группировать, используя сокращённый синтаксис, например,
margin: 10px 15px 20px 25px;, где каждое значение соответствует стороне (верх, право, низ, лево). - Последовательность: Хотя порядок свойств в большинстве случаев не влияет на результат, некоторые свойства, как
fontиbackground, могут переопределять значения, установленные предыдущими свойствами в том же блоке объявлений. В таких случаях порядок следует учитывать.
Соблюдение этих правил и рекомендаций поможет написать чистый, эффективный и легко поддерживаемый код CSS
