Синтаксис CSS

CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей -

• Селектор. Селектор - это тег HTML, в котором будет применяться стиль. Это может быть любой тег типа h1 или table и т.д.
• Свойство - Свойство представляет собой тип атрибута HTML тега. Проще говоря, все атрибуты HTML преобразуются в свойства CSS. Они могут определять цвета, границы и т.д.
• Значение - Значения присваиваются свойствам. Например, свойство цвета может иметь значение либо красное, либо # F1F1F1 и т.д.

Вы можете установить синтаксис правила стиля CSS следующим образом:

Пример. Вы можете определить границу таблицы следующим образом:

table { border : 1px solid # C00; }

Здесь table - это селектор таблицы, а border - свойство и заданное значение границs. 1px solid # C00 - это значение этого свойства.

Вы можете определить селекторы различными способами, основанными для вашего удобства. Поместите эти селекторы один за другим.

Селектора типов

Это тот же самый селектор, который мы видели выше. Опять же, еще один пример, чтобы определить цвет всем заголовкам первого уровня:

h1 {
   color : # 36CFFF; 
}

Универсальные селектора

Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента -

* { 
   color: # 000000; 
}

Это правило отображает содержание каждого элемента в нашем документе в черном.

Селекторы потомков

Предположим, вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента. Как указано в следующем примере, правило стиля будет применяться к элементу em только тогда, когда оно находится внутри тега ul.

ul em {
   color : # 000000; 
}

Селекторы классов

Вы можете определить правила стиля, основанные на атрибуте класса элементов. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

.black {
   color : # 000000; 
}

Это правило отображает содержимое в черном для каждого элемента с атрибутом класса, установленным черным в нашем документе. Вы можете сделать это немного более конкретным. Например:

h1.black {
   color : # 000000; 
}

Это правило отображает содержимое в черном только для элементов h1 с атрибутом класса, установленным в черный.

Вы можете применить к данному элементу несколько селекторов классов. Рассмотрим следующий пример:

< p class = "center bold" > 
   Этот параграф будет оформлен по центру и выделен жирным шрифтом .
</p>

Селекторы ID - идентификатор

Вы можете определить правила стиля, основанные на атрибуте id элементов. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

#black {
  color : # 000000; 
}

Это правило отображает черным цветом для каждого элемента с атрибутом id, установленным черным в нашем документе. Вы можете сделать это немного более конкретным. Например,

h1 #black {
   color : # 000000; 
}

Это правило делает контент черным только для элементов h1 с атрибутом id, установленным в черный цвет.

Истинная мощность селекторов id - это когда они используются в качестве основы для селекторов-потомков, например:

#black h2 {
   color : # 000000; 
}

В этом примере все заголовки уровня 2 - h2 будут отображаться в черном цвете, когда эти заголовки будут лежать в тегах с атрибутом id, установленным на черный.

Выбор потомка

Вы видели селекторов потомок. Существует еще один тип селектора, который очень похож на потомков, но имеет разную функциональность. Рассмотрим следующий пример:

body > p {
   color : # 000000; 
}

Это правило будет отображать все абзацы в черном, если они являются прямым дочерним элементом body. Другие абзацы, помещенные внутри других элементов типа div или td, не будут иметь никакого эффекта этого правила.

Селектора атрибутов

Вы также можете применять стили к элементам HTML с определенными атрибутами. Правило стиля ниже будет соответствовать всем входным элементам, имеющим атрибут type со значением текста -

input [ type = "text" ] { 
   color : # 000000; 
}

Преимущество этого метода заключается в том, что элемент input type = "submit" не изменяется, а цвет применяется только к желаемым текстовым полям.

Для селектора атрибутов применяются следующие правила.

• P [lang] - Выбирает все элементы абзаца с атрибутом lang.
• P [lang = "fr"] - Выбирает все элементы абзаца, чей атрибут lang имеет значение точно «fr».
• P [lang ~ = "fr"] - Выбирает все элементы абзаца, чей атрибут lang содержит слово fr.
• P [lang | = "en"] - Выбирает все элементы абзаца, чей атрибут lang содержит значения, которые являются точно «en», или начинаются с «en-».

Несколько правил стиля

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

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Здесь все пары свойств и значений разделяются точкой с запятой (;) . Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости мы сохраняем их в отдельных строках.

Селекторы группировки

Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как указано в следующем примере -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Это правило стиля определения будет применимо и к элементам h1, h2 и h3. Порядок списка не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

Вы можете комбинировать различные селектора классов вместе, как показано ниже -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!