Идентификаторы и классы в 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.

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

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

Находить, изменять и использовать элементы на странице можно с помощью скриптов. Для этого используется функция document.getElementById() или document.getElementsByClassName().

В следующем уроке я хочу рассказать вам об одном из самых популярных наборов инструментов для создания веб-страниц - Bootstrap. Поэтому обязательно подпишитесь, если еще не сделали этого, чтобы не пропустить следующий урок! 😉