Грамматика CSS

В этом руководстве вы узнаете, как определять правила CSS в таблице стилей, с помощью которых можно устанавливать стили HTML элементов. У различных HTML элементов могут быть разные CSS атрибуты, которые можно настроить. CSS атрибуты можно организовать в правила CSS. CSS правила комбинируют группу CSS атрибутов и применяют все атрибуты к HTML элементам, соответствующим правилам CSS.

Понимание синтаксиса CSS

Стильная таблица CSS состоит из группы правил, которые интерпретируются веб-браузером и применяются к соответствующим элементам документа, например, абзацам, заголовкам и т.д.

Правила CSS состоят из двух основных частей: выборщика и одного или нескольких заявлений:

Выборщик определяет, какие элементы HTML на странице применяются CSS правила.

а декларации в блоке определяют формат элементов на веб-странице. Каждая декларация содержит атрибут и значение, которые разделены двоеточием (:) разделяются точкой с запятой (;) заканчивается и每组 деклараций заключено в фигурные скобки{}.

Эта атрибут изменяется стили, которые вы хотите изменить. Это могут быть шрифты, цвета, фоны и т.д. У каждого атрибута есть значение, например, атрибут color может иметь значение blueили#0000FFи т.д.

h1 {color:blue;text-align:center;}

Чтобы сделать CSS более читаемым, можно поместить одну декларацию на каждой строке, как показано ниже:

h1 {
　　　　color: blue;
　　　　text-align: center;
　　　}

в примере вышеh1являются селектором,colorиtext-alignявляются свойствами CSS, а данныеblue (цвет текста в теге h1蓝色)иcenter(текст в теге h1 выравнивается по центру)являются соответствующими значениями этих свойств.

Написание комментариев с помощью CSS

Обычно комментарии добавляются для того, чтобы сделать исходный код более понятным. Они помогают другим разработчикам (или вам в будущем при редактировании исходного кода) понять, что вы пытаетесь сделать с помощью CSS. Комментарии важны для программистов, но игнорируются браузерами.

Комментарии CSS начинаются с/*для завершения*/например:

/*This is a CSS comment */
h1 {
　　　　color: blue;
　　　　text-align: center;
}
/*This is a multi-line CSS comment that spans across more than one line */
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 различаются по регистру.

ВСледующая главаВ Китае, вы узнаете о различных типах селекторов CSS.