flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Руководство по синтаксису в CSS

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

jivo banner 480x320jivo banner 728x90jivo banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

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

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

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

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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее