Классы и селекторы (идентификаторы) css

 

znak Для того чтоб присваивать тегам HTML определенные свойства, используют классы и селекторы (идентификаторы) CSS.

Селекторы

Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило. Вот три основных вида селекторов.

HTML селекторы
Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега strong селектором будет strong. Соответственно, для тега h1селектором будет h1, и так далее. Теперь можно переопределить внешний вид всех таких элементов в нашем документе: strong {font-weight: normal; color: red;} h1 { font: bold 10pt verdana; }

Селекторы класса «Класс»
- это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:
.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */

selektor


ID селекторы (или идентификаторы)
Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:

selektor1

#myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */ span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */

Перечень характерных признаков селекторов.

Идентификаторы

В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.
Имя идентификатора чувствительно к регистру.
Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.
Стиль для идентификатора имеет приоритет выше, чем у классов.

Классы

Классы могут использоваться в коде неоднократно.
Имена классов чувствительны к регистру.
Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.

При формировании файла со стилями, используют следующие методы:

- для зарезервированных тэгов HTML  в файле css создается стиль, который применяется для всех тэгов имеющихся на сайте.
- для однотипного оформления элементов создается стиль типа  “klass”.  Начинается с точки.
-  для отдельных блоков или элементов страницы - присваивается  дополнительный атрибут которому в свою очередь присваивается значение имеющееся в css файле. Это значение применяется только для одного элемента и называется идентификатором ID, и обозначается #
Пример:  в сайте: (div: id”novay”);  в файле css:  (div# novay { и присваиваются атрибуты })