Идентификаторы и классы в 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. Поэтому обязательно подпишитесь, если еще не сделали этого, чтобы не пропустить следующий урок! 😉
