Изучаем CSS: class или id – что лучше?

Контролировать внешний вид HTML-элементов на странице можно с помощью нескольких селекторов. ID и CSS class являются наиболее распространенными, которые помогают не только в создании разметки HTML-документов, но и в их оформлении(стилизации).

Как применять CSS-селектор ID

Селектор ID используется для обозначения отдельного HTML-элемента при помощи уникального значения атрибута id. В следующем примере представлен элемент <div>, значением атрибута id которого будет header.

В CSS к данному div-элементу можно без труда применять различную стилизацию:

#header { width: 100%; height: 80px; background: blue }

Не забывайте использовать знак #(хэштег) перед именем. Подробнее об этом можно узнать здесь и здесь.

Как применять CSS-селектор class

Селектор class HTML CSS используется для выделения отдельного или целой группы HTML-элементов с идентичным значением атрибута class.

В CSS к нескольким абзацам можно легко применять различную стилизацию:

.content { margin: 20px 0; line-height: 24px; font-size: 15px }

Не забудьте использовать знак.(точка) перед названием класса при объявлении CSS-правила. Подробнее об этом можно без труда узнать здесь и здесь.

Чем отличаются CSS Class и ID

Cелектор id используется для отдельных элементов страницы(#header), в то время как селектор class(.content) – для нескольких. Поскольку значение id задается лишь одному HTML-элементу. Иными словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. К примеру, у вас может быть только один элемент с id #header, или же один элемент с id #footer.

Одинаковое значение class можно задавать одному или нескольким HTML-элементам. К примеру, у вас может быть пару абзацев с классом .content или пару ссылок с классом .external.

Следующий пример поможет лучше понять различия между CSS class и id, а также понять, как правильно использовать:

<div id="container"><div id="menu"><a class="link">Ссылка 1 </a><a class="link">Ссылка 2 </a><a class="link">Ссылка 3 </a><a class="link">Ссылка 4 </a></div><div id="content"><p class="text">Это наш первый абзац.</p><p class="text">Это наш второй абзац.</p><p class="text">Это наш третий абзац.</p></div></div>

Приведенную выше HTML-разметку мы начали с div-элемента container. Мы задали ему id(#container), поскольку на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню(#menu) и содержимого(#content). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки <a>, но к каждой из них мы применили CSS class(.link). Точно также мы применили класс(.text) к каждому абзацу в div-элементе content.

Если необходимо стилизовать данные элементы, то можно без проблем использовать следующий пример:

#container { width: 1080px; margin: 0 auto; background: #eee }#menu { height: 90px; background: #ddd }.link { color: #000; text-decoration: none }#content { padding: 20px }.text { font-size: 15px }

Когда используется class, а когда id?

ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице пару раз. К примеру, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать данные селекторы по назначению.

Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с различным позиционированием. В таком случае можно применить один и тот же класс к данным блокам для изменения размеров и стилизации, а далее использовать отдельный ID-селектор к каждому блоку, чтобы задать им различное позиционирование.

Элементы также можно привязывать одновременно к нескольким классам. Это удобно, когда необходимо применить стилизацию к отдельной группе элементов определенного типа. К примеру, имеется класс .content, который применен ко всем абзацам. Если необходимо будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно без труда сделать это с помощью дополнительного CSS p class.bordered :

<p class="content">Этот пункт не имеет в себя границ.</p><p class="content bordered">Этот пункт имеет в себя границы.</p>

Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода :

.content { margin: 10px; font-size: 15px; color: blue }.bordered { border: 2px solid #222 }

Важно правильно применять id и CSS class , поскольку их неправильное использование может привести к ошибкам в выведении HTML-кода .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *