Содержание
Создание веб-сайтов в современном Интернете требует глубокого понимания CSS (каскадных таблиц стилей). Это инструкции, которые вы даете веб-сайту, чтобы определить, как он будет размещаться в окне браузера. Вы применяете серию «стилей» к вашему HTML-документу, которые создают внешний вид вашей веб-страницы.
Есть много способов применить эти вышеупомянутые стили ко всему документу, но часто вы хотите использовать стиль только для некоторых элементов в документе, но не для всех экземпляров этого элемента. Вы также можете создать стиль, который можно применять к нескольким элементам документа, без необходимости повторять правило стиля для каждого отдельного экземпляра. Для достижения этих желаемых стилей вы будете использовать HTML-атрибуты class и ID. Эти атрибуты являются глобальными атрибутами, которые можно применять практически к каждому тегу HTML. Это означает, что независимо от того, стилизуете ли вы разделы, абзацы, ссылки, списки или любые другие фрагменты HTML в своем документе, вы можете обратиться к атрибутам class и ID, чтобы помочь вам выполнить эту задачу!
Селекторы классов
Селектор класса позволяет установить несколько стилей для одного элемента или тега в документе. Например, вы можете захотеть, чтобы определенные разделы вашего текста были выделены другим цветом, чем остальная часть текста в документе. Эти выделенные разделы могут быть «предупреждением», которое вы устанавливаете на странице. Вы можете назначить свои абзацы с классами, как это:
p {color: # 0000ff; }
p.alert {color: # ff0000; }Эти стили будут устанавливать цвет все абзацы до синего (# 0000ff), но любой абзац с атрибутом класса «alert» вместо этого будет выделен красным (# ff0000). Это связано с тем, что атрибут класса имеет более высокую специфичность, чем первое правило CSS, в котором используется только селектор тегов. При работе с CSS более конкретное правило переопределяет менее конкретное. Таким образом, в этом примере более общее правило устанавливает цвет всех абзацев, но второе, более конкретное правило, чем переопределяет этот параметр только в некоторых абзацах.
Вот как это можно использовать в некоторой HTML-разметке:
Этот абзац будет отображаться синим цветом, что по умолчанию для страницы.
Этот абзац также будет выделен синим цветом.
И этот абзац будет отображаться красным цветом, поскольку атрибут класса будет перезаписывать стандартный синий цвет из стиля селектора элемента.
В этом примере стиль «p.alert» будет применяться только к элементам абзаца, которые используют этот класс «alert». Если вы хотите использовать этот класс для нескольких элементов HTML, вы просто удалите элемент HTML из начала вызова стиля (просто обязательно оставьте точку (
) на месте), вот так:
.alert {background-color: # ff0000;}Этот класс теперь доступен для любого элемента, который нуждается в нем. Любой фрагмент вашего HTML, который имеет значение атрибута класса «alert», теперь получит этот стиль. В приведенном ниже HTML-коде у нас есть абзац и заголовок 2-го уровня, которые используют класс «alert». Оба из них будут иметь красный цвет фона на основе CSS, который мы только что показали.
Этот абзац будет написан красным.И этот h2 тоже будет красным.
На современных веб-сайтах атрибуты класса часто используются в большинстве элементов, поскольку с ними проще работать с точки зрения специфики идентификаторов. Вы найдете большинство современных HTML-страниц заполненными атрибутами класса, некоторые из которых повторяются в документе несколько раз, а другие могут появляться только один раз.
Селекторы ID
Селектор идентификаторов позволяет вам присвоить имя определенному стилю, не связывая его с тегом или другим элементом HTML. Скажем, у вас есть разметка в HTML-разметке, которая содержит информацию о событии. Вы можете присвоить этому разделению атрибут ID для «события», а затем, если вы хотите обвести это разделение черной рамкой шириной в 1 пиксель, вы напишите код идентификации следующим образом:
#event {border: 1px solid # 000; }Проблема с селекторами идентификаторов заключается в том, что их нельзя повторить в HTML-документе. Они должны быть уникальными (вы можете использовать один и тот же идентификатор на нескольких страницах вашего сайта, но только один раз в каждом отдельном HTML-документе). Таким образом, если у вас есть 3 события, которым нужна эта граница, вам нужно будет присвоить им идентификаторы атрибутов «event1», «event2» и «event3» и стилизовать каждое из них. Следовательно, было бы намного проще использовать вышеупомянутый атрибут класса «события» и стилизовать их все сразу.
Осложнения атрибутов ID
Другая проблема с атрибутами ID заключается в том, что они имеют более высокую специфичность, чем атрибуты класса. Это означает, что если вам нужен CSS, который переопределяет ранее установленный стиль, это может быть затруднительно, если вы слишком сильно полагаетесь на идентификаторы. Именно по этой причине многие веб-разработчики отказались от использования идентификаторов в своей разметке, даже если они намерены использовать это значение только один раз, и вместо этого обратились к менее специфичным атрибутам класса почти для всех стилей.
Единственная область, в которой атрибуты ID вступают в игру, — это когда вы хотите создать страницу, содержащую внутрикорневые якорные ссылки. Например, если у вас есть веб-сайт в стиле параллакса, который содержит весь контент на одной странице со ссылками, которые «переходят» на различные части этой страницы. Это делается с помощью атрибутов ID и текстовых ссылок, которые используют эти якорные ссылки. Вы просто добавили бы значение этого атрибута, которому предшествует символ «#», к атрибуту «href» ссылки, например так:
Это ссылка
При щелчке или касании эта ссылка переходит на ту часть страницы, которая имеет этот атрибут ID. Если ни один элемент на странице не использует это значение идентификатора, ссылка ничего не сделает.
Помните, что если вы хотите создать ссылку на страницу на сайте, потребуется использование атрибутов ID, но вы все равно можете обратиться к классам для общих стилей CSS. Именно так мы сегодня размечаем страницы — мы используем как можно больше селекторов классов и обращаемся к идентификаторам только тогда, когда нам нужно, чтобы атрибут действовал не только как ловушка для CSS, но и как внутристраничная ссылка.
