Таблица CSS-стилей состоит из набора правил, которые интерпретируются веб-браузером и затем применяются к соответствующим элементам в документе, таким как абзацы, заголовки и т. д.
CSS-правило состоит из двух основных частей: селектора (selector) и одного или нескольких объявлений (declaration):
Селектор указывает, к какому элементу или элементам HTML-страницы применяется CSS-правило.
Каждое объявление (declaration) состоит из свойства (property) и значения (value), разделенного двоеточием (:) и заканчивающегося точкой с запятой (;); группы объявлений заключаются в фигурные скобки {}.
Свойство — это атрибут стиля, который вы хотите изменить; это может быть шрифт (font), цвет (color), фон (background) и т. д. Каждое свойство имеет значение, например, свойство color может иметь значение в виде ключевого слова, например blue, либо #0000FF и т. д.
h1 {color:blue; text-align:center;}Чтобы сделать CSS более читабельным, вы можете поместить одно объявление в каждую строку, например:
h1 {
color: blue;
text-align: center
}В приведенном выше примере h1 — селектор, color и text-align — свойства CSS, а заданный blue и center — соответствующие значения этих свойств.
Объявление каждого CSS-свойства должно заканчиваться точкой с запятой ";", для последнего свойства точку с запятой указывать не обязательно. Группы объявлений всегда заключаются в фигурные скобки "{}".
Написание комментариев в CSS
Комментарии обычно добавляются с целью облегчить понимание исходного кода. Это может помочь другому разработчику (или вам в будущем, когда вы будете редактировать исходный код) понять, что вы пытались сделать с помощью CSS. Комментарии важны для программистов, но игнорируются браузерами.
Комментарий CSS начинается с /*, а заканчивается */, как показано в примере ниже:
/* Это CSS-комментарий */
h1 {
color: blue;
text-align: center;
}
/* Это многострочный комментарий CSS
который охватывает более чем одну стоку */
p {
font-size: 18px;
text-transform: uppercase;
}Вы также можете закомментировать часть вашего CSS-кода для целей отладки, как показано здесь:
h1 {
color: blue;
text-align: center;
}
/*
p {
font-size: 18px;
text-transform: uppercase;
}
*/Регистрозависимость в CSS
Названия CSS-свойств и многие значения не чувствительны к регистру. В то время как CSS-селекторы обычно чувствительны к регистру, например, селектор класса .maincontent отличается от .mainContent.
Вы узнаете о различных типах селекторов CSS в следующей главе.
