Таблица 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 в следующей главе.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.