Css классы и идентификаторы: Идентификаторы и классы | htmlbook.ru

Идентификаторы | CSS | WebReference

• Содержание
  • Синтаксис
  • Пример
  • Примечание
  • Спецификация
  • Браузеры

Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис

#<Имя идентификатора> { Описание правил стиля }

При описании идентификатора вначале указывается символ решётки (#), затем идёт имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит с помощью атрибута id, значением которого выступает имя идентификатора (id=»header»). Символ решётки при этом уже не указывается.

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

Рис. 1. Вид текста, оформленного с помощью идентификатора

Примечание

В браузере Internet Explorer до версии 7 идентификаторы иногда игнорируются, если они комбинируются с селекторами элементов или классами.

Спецификация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Селекторы элемента
Ctrl+←

Классы
Ctrl+→

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

HTML-классы с идентификаторами [javascript, html, css, ajax]

Я немного запутался в классах и идентификаторах HTML, так как я хотел бы использовать их ОБА для описания элемента HTML. Это действительно и поддерживается большинством браузеров?

Мотивация для меня использовать оба заключается в следующем:

1. У меня есть стиль CSS, который я хотел бы применить к нескольким элементам.
2. У меня есть некоторые AJAX и Javascript, которые будут манипулировать одними и теми же элементами, поэтому мне нужен способ определить, какой элемент с помощью идентификатора.
3. Поэтому я хотел бы использовать идентификатор для идентификации каждого элемента для манипуляции с JS, И в то же время я хотел бы указать класс, чтобы один и тот же стиль применялся из одного и того же css.

javascript html css ajax

person LeeMobile    schedule 03.05.2009    source источник

Ответы (6)

arrow_upward
8
arrow_downward

Идентификатор будет уникальным только для одного элемента, где класс можно использовать для группировки множества элементов. Вы можете использовать их вместе, как вы сказали, ID как уникальный идентификатор для Javascript и класс для разметки с помощью CSS.

Найдите html class vs id, чтобы получить много статей об этом. тема.

Пример:

<ul>
    <li>First Item in the List</li>
    <li>Second Item in the List</li>
    <li>Third Item in the List</li>
</ul>

person Chris Bartow    schedule 03.

arrow_upward
7
arrow_downward

Да, вполне допустимо использовать свойства ID и Class в одном элементе. Пример:

<div> *content* </div>

Тем не менее, имейте в виду, что идентификатор можно использовать только один раз (отсюда и его название), в то время как вы можете использовать классы столько раз, сколько захотите в документе. Вы по-прежнему можете использовать как идентификатор, так и класс для применения стилей, в то время как только идентификатор является простым способом доступа к элементу через javascript.

Хороший способ сделать это — применить идентификаторы ко всем элементам, которые, как вы знаете, уникальны (заголовок, навигация, основные контейнеры и т. д.), а классы — ко всему остальному.

«Это это» применяется к элементам, использующим идентификатор: «Это

«Является a» или «является an» применяется к элементам, использующим классы: «This is a blogPost», «this is a информационное окно» и т. д.

person Arve Systad    schedule 03.05.2009

arrow_upward
2
arrow_downward

Вы можете определенно использовать оба, если вам нужно.

Идентификатор обычно используется для идентификации структурных разделов вашего сайта. У вас должен быть только один элемент с определенным идентификатором, и любой элемент может иметь только один идентификатор.

Класс используется для установки стилей, которые могут использоваться более чем в одном месте вашего HTML-файла — для любого элемента может быть установлено несколько классов.

Типичный HTML-документ, использующий как идентификаторы, так и классы, может выглядеть примерно так:

<html>
...
<body>
<div></div>
<ul>...</ul>
<div>
<div></div>
</div>
</body>
</html>

person Tom    schedule 03. 05.2009

arrow_upward
0
arrow_downward

Да, любой нормальный браузер должен разрешать настройку классов CSS независимо от идентификатора элемента. Однако установка стилей для определенного элемента (например, с использованием идентификаторов) может переопределить стили, установленные с помощью класса CSS.

person SirDemon   

arrow_upward
0
arrow_downward

Просто очень неясное примечание об объединении класса и идентификатора в ваших объявлениях CSS, есть ошибка с IE6, если у вас есть:

• две или более страниц, на которых есть элемент с одинаковым id

• эти элементы имеют разные classes

• вы оформляете их по правилу #idname.classname

тогда только первое правило в таблице стилей вступит в силу.

Подробнее см. на этой странице.

person AmbroseChapel    schedule 04.05.2009

arrow_upward
-3
arrow_downward

Да, это действительно во всех браузерах. Идентификатор выражает только уникальную идентификацию вашего элемента управления html через другие, а класс применяет к нему некоторый стиль. Используйте идентификаторы, когда на странице есть только одно вхождение. Используйте классы, когда на странице есть одно или несколько вхождений.

person Iralda Mitro    schedule 03.05.2009

В чем разница между id и классом?

в чем разница между <div> и <div> когда дело доходит до CSS? Это нормально использовать <div>?

Я вижу, что разные разработчики делают это в обоих направлениях, и поскольку я самоучка, я никогда не понимал этого.

14 ответов

ids должно быть уникальным, где as class может применяться ко многим вещам. В CSS idпосмотрим, как #elementID и class элементов .someClass

в общем, использовать id всякий раз, когда вы хотите обратиться к определенному элементу и class когда у вас есть несколько вещей, которые все одинаковы. Например, общие id элементы-это такие вещи, как header, footer, sidebar. Common class элементы-это такие вещи, как highlight или external-link.

это хорошая идея прочитать каскад и понять приоритет, назначенный различным селекторам:http://www.w3.org/TR/CSS2/cascade.html

самый основной приоритет, который вы должны понимать, однако, это id селекторы имеют приоритет над class селекторы. Если бы у вас было это:

<p>Hello!</p>

и:

#intro { color: red }
. foo { color: blue }

текст будет красным, потому что id селектор имеет приоритет над class селектор.

<student />
<student />

<div>
  <h2>I am a header!</h2>
  <p>I am subtext for a header!</p>
</div>
<div>
  <div>
    <p>I am a section!</p>
  </div>
  <div>
    <p>I am a section!</p>
  </div>
  <div>
    <p>I am a section!</p>
  </div>
</div>

h2#my-id {color:red}
p#my-id {color:blue}

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

body#list-page .title-block > h2 {font-size:56px}

<div>this is a box</div>
<div>this is a box</div>

 #основной {
    фон: #000;
    граница: 1px сплошная #AAAAAA;
    отступ: 10 пикселей;
    цвет: #fff;
    ширина: 100 пикселей;
}
 

 <дел>
    Добро пожаловать