CSS основы» – второй урок учебника CSS. В этом уроке мы обсудим базовые особенности синтаксиса таблиц стилей CSS. Синтаксис CSS очень прост, хотя и не имеет ничего общего с html тегами.
Синтаксис CSS
Синтаксис каскадных таблиц стилей состоит из трех основных частей: селектора, свойства и значения, как это показано на примере ниже:
Селектор – определяемый элемент
Свойство – изменяемый атрибут
Значение – присваиваемое атрибуту значение
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере показаны две разновидности оформления селекторов и их правил.
Пример:
В данном примере свойства селектора h1 записаны в одну строку, а для селектора h2 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.
Правила применения стилей
Далее приведены некоторые правила, которые необходимо знать при описании стиля.
Форма записи
Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере:
Расширенная форма записи
Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид:
Компактная форма записи:
Эта форма записи более наглядная и удобная в использовании.
Имеет приоритет значение, указанное в коде ниже
Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже
Разные значения у одного свойства
В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.
На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.
Значения
У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.
Далее предлагаю вам разобраться с основными особенностями синтаксиса в CSS:
Свойство элемента и значение, присваиваемое ему должны располагаться внутри фигурных скобок и разделяться двоеточием:
Значения, состоящие более, чем из одного слова должны быть помещены в кавычки:
Если для одного селектора определяется одновременно несколько свойств, то они должны быть разделены точкой с запятой. После последнего свойства не обязательно ставить точку с запятой, хотя их присутствие не вызовет никакой ошибки:
Если несколько одинаковых свойств должны быть применены одновременно к нескольким селекторам, то селекторы перечисляются через запятую:
Синтаксис CSS
Синтаксис каскадных таблиц стилей состоит из трех основных частей: селектора, свойства и значения, как это показано на примере ниже:
Селектор – определяемый элемент
Свойство – изменяемый атрибут
Значение – присваиваемое атрибуту значение
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере показаны две разновидности оформления селекторов и их правил.
Пример:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки</title>
<style>
h1 { color: #a6780a; font-weight: normal; }
h2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>Правила применения стилей
Далее приведены некоторые правила, которые необходимо знать при описании стиля.
Форма записи
Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере:
Расширенная форма записи
Код:
td { background: olive; }
td { color: white; }
td { border: 1px solid black; }Компактная форма записи:
Код:
td {
background: olive;
color: white;
border: 1px solid black;
}Имеет приоритет значение, указанное в коде ниже
Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже
Разные значения у одного свойства
Код:
p { color: green; }
p { color: red; }На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.
Значения
У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.
Далее предлагаю вам разобраться с основными особенностями синтаксиса в CSS:
Свойство элемента и значение, присваиваемое ему должны располагаться внутри фигурных скобок и разделяться двоеточием:
Код:
p {font–size: 75%}
Код:
h1 {font – family: "lucida calligraphy"}
Код:
table { font – family: arial, "sans serif"; border – style: dotted}
Код:
p,table,li { font – family: "sans serif"; }