Использование классов и идентификаторов для назначения стилей
Часто нужно применить стиль только для отдельных элементов. В других случаях необходимо создать стиль, который можно применить к нескольким элементам документа без повторения правила для каждого отдельного экземпляра. Для реализации этих задач можно использовать HTML class и id .
Селекторы класса
Селектор класса позволяет задать несколько стилей для одного элемента или тега в документе. Например, вам может понадобиться создать области текста, отображаемые цветом, отличным от цвета остального текста в документе. В этом случае можно назначить классы параграфам:
Эти стили задают для всех параграфов синий цвет ( #0000FF ), но любой абзац с классом » alert » будет выводиться красным цветом.
Атрибут class является более специфичным, чем первое правило CSS , которое использует только селектор тега. Вот как это можно использовать в HTML-разметке :
Этот абзац будет отображаться синим цветом, который является цветом текста по умолчанию.
Этот абзац также будет синим.
В этом примере стиль » p.alert » будет применяться только к параграфам, которые используют класс » alert «. Если вы хотите применить этот HTML style class для нескольких элементов, нужно удалить элемент из начала стиля ( только не забудьте оставить точку ):
Теперь можно применять этот класс к любому элементу:
На сегодняшний день классы CSS применяются к большинству элементов, потому что с ними легче работать, чем с идентификаторами.
Селекторы ID
Селектор ID позволяет присвоить имя определенному стилю, не связывая его с тегом или другим HTML-элементом . Допустим, что у вас есть блок div , который содержит информацию о событии. Можно задать для него id » event «, а затем выделить этот блок черной рамкой шириной в 1 пиксель :
Проблема, связанная с идентификаторами, заключается в том, что они не могут повторяться в HTML-документе . Они должны быть уникальными. Так что если у вас есть три блока событий, и для них нужно создать рамку, придется присвоить им идентификаторы » event1 «, » event2 » и » event3 » и задать стили отдельно для каждого. Поэтому было бы гораздо проще использовать упомянутый выше HTML div class «event» и задать стили для всех сразу.
Идентификаторы являются более специфичными, чем классы. Например, если нужно переопределить ранее установленный стиль, это может быть трудно сделать, если использовать много идентификаторов. По этой причине многие веб-разработчики отошли от использования идентификаторов в разметке, даже если планируется использовать это значение только один раз. Вместо этого для назначения почти всех стилей применяют менее специфичные классы.
Но идентификаторы незаменимы, если нужно создать страницу, которая содержит анкорные ссылки. Например, если у вас есть параллакс-сайт. Он содержит весь контент на одной странице со ссылками, с помощью которых можно » перепрыгивать » к различным частям страницы. Это делается с помощью идентификаторов и текстовых ссылок, которые использует эти анкорные ссылки. Вы просто добавляете значение этого атрибута, которому предшествует символ # , в атрибут ссылки href . Например, следующим образом:
Если вы хотите создать такой тип внутри страничной навигации, без использования идентификаторов вам не обойтись. Но вы все равно можете применять HTML class для определения общих стилей.
Вадим Дворников автор-переводчик статьи « Using Style Classes and IDs »
Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!
CSS урок 2. Использование классов
Чтобы добавить класс, необходимо:
Для элементов (тегов) к которым будут применены свойства класса, нужно прописать атрибут class с придуманным названием класса в качестве значения атрибута:
h1 class="my_class">В моей душе/h1>В отельном стилевом файле (style.css) или в области head текущего документа прописать свойства созданного класса
h1.my_class { color: RGB(215,40,40); text-align: center }В данном примере класс my_class будет «привязан» именно к тегу h1 , т.е. для других тегов с аналогичным классом свойства работать не будут.
Можно написать без привязки к конкретному тегу:
.my_class { color: RGB(215,40,40); text-align: center }В данном случае класс будет применен к любым тегом данного класса
Пример: Создать два класса с названиями red1 и class1 . Один класс применить для заголовков h1 , другой класс применить для тегов p
html> head> style type="text/css">h1.red1 { color: RGB(215,40,40); text-align: center } p.class1{color:#3366FF; font-family:Arial}/style> /head> body> h1 class="red1">В моей душе/h1> p class="class1"> Я хочу быть ребенком: наивным и смелым,br> Ничего не бояться и верить в добро.br> Я бы снова писала по черному белым:br> Два плюс два - ну, четыре, конечно равно! /p> p> Конец /p>
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!Конец
Я хочу быть ребенком: наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!Задание: скопируйте код страницы. Измените страницу меню сайта так, чтобы одни пункты меню были темного цвета (класс .dark ), а другие – светлого ( класс .light ).
Для гиперссылки добавить свойство: text-decoration:none;html> head> title> Классы /title> style type="text/css"> . /style> /head> body> center>h3> Главное меню /h3>/center> ul> a href="#" class="dark">li>Введение/li>/a> a href="#" class="dark">li>Глава1/li>/a> a href="#" class="dark">li>Глава2/li>/a> a href="#" class="dark">li>Заключение/li>/a> /ul> center>h3> Дополнительное меню /h3>/center> ul> a href="#" class="light">li>Тест/li>/a> a href="#" class="light">li>Глоссарий/li>/a> a href="#" class="light">li>Литература/li>/a> /ul> /body> /html>
Примеры использования классов с тегами и просто классов:
Универсальные классы или CSS селектор ID
Универсальные классы необходимы для того, чтобы оформить определенным стилем один единственный элемент на странице (на разных страницах сайта).
#имя_класса{ свойство1: значение; свойство2: значение; }Необходимо задать атрибут id с уникальным значением для того элемента, к которому будет применен универсальный класс:
Значение атрибута id придумывается самостоятельно и должно быть единственным таким значением id на всей веб-странице.
В стилевом файле (style.css) либо в области head текущей веб-страницы задается стиль для селектора id :
="text/css"> #steel { color: RGB(155,180,190); font-weight:bold } >Пример: для первого заголовка h2 создать универсальный стиль, оформив его каким-либо цветом и увеличив жирность шрифта
html> head> style type="text/css">#steel { color: RGB(155,180,190); /* изменили цвет в системе RGB */ font-weight:bold /* установили жирный шрифт */ }/style> /head> body> h2 id="steel">Заголовок со стилем/h2> h2>Заголовок без стиля/h2> /body> /html>
Заголовок без стиля
