Идентификаторы и классы в HTML, CSS и JS



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

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

id class
Должны быть уникальными, идентифицировать лишь один элемент в коде документа Классы могут использоваться в коде документа многократно
Можно получить доступ к элементу по его идентификатору с помощью функции getElementById Можно использовать сразу несколько классов для одного элемента
Правила для идентификаторов приоритетнее правил для классов

Использование классов и идентификаторов в HTML

Чтобы дать идентификатор вашему элементу, необходимо в открывающем теге этого элемента добавить атрибут id:

˂h1 id="title"˃Голос.˂/h1˃


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

˂p class="text"˃Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..˂/p˃


Также можно использовать и идентификатор, и классы для одного и того же элемента:

˂p id="description" class="text translation"˃Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..˂/p˃

Использование классов и идентификаторов в CSS

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

Для идентификторов это делается следующим образом:

#id {
   свойство: значение;
  ...
}

То есть с помощью решётки # перед идентификатором элемента, вы даете браузеру понять, что необходимо эти стили применить к некому элементу с таким Id.

Для классов это делается точно так же, только вместо решётки используется точка:

.id {
   свойство: значение;
  ...
}



При этом, в случае, когда ваш элемент имеет и идентификатор, и классы, свойства которых описаны в CSS и противоречат друг другу, приоритетным будут считаться свойства, данные по id элемента. Например:

˂h2 id="about" class="important"˃... ˂/h2˃
#about {
  font-weight: 700;
}
.important {
  font-weight: 400;
}

font-weight - свойство насыщенности шрифта. Может задаваться, как ключевыми словами, вроде bold, light, так и числовым значением (100, 200, 300, ..., 900). Нормальное начертание соответствует значению 400, а жирное - 700.

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


Comments 1


Как всегда замечательно объяснила:)

27.12.2016 16:37
0

Спасибо, старалась ???? ????

27.12.2016 17:12
0