CSS - Синтаксис

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

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

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

selector { property: value }

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

table{ border :1px solid #C00; }

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

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

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

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

h1 {
   color: #36CFFF; 
}

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

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

* { 
   color: #000000; 
}

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

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

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

ul em {
   color: #000000; 
}

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

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

.black {
   color: #000000; 
}

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

h1.black {
   color: #000000; 
}

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

К данному элементу можно применить более одного селектора класса. Рассмотрим следующий пример -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Селекторы ID

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

#black {
   color: #000000; 
}

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

h1#black {
   color: #000000; 
}

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

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

#black h2 {
   color: #000000; 
}

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

Дочерние селекторы

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

body > p {
   color: #000000; 
}

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

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

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

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;
}

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

Некоторое время не беспокойтесь о свойствах, упомянутых в приведенном выше блоке. Эти свойства будут объяснены в следующих главах, и вы можете найти полную информацию о свойствах в Справочниках CSS.

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

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

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;
}