класс div против идентификатора
https://stackoverflow.com/questions/84378
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
При использовании divs, когда лучше всего использовать класс по сравнению с id?
Лучше всего использовать class, скажем, для варианта шрифта или элементов в html?Затем использовать id для структуры / контейнеров?
Это то, в чем я всегда был немного неуверен, любая помощь была бы большой.
Решение
Использование id чтобы определить элементы, для которых на странице будет только один экземпляр.Например, если у вас есть единственная панель навигации, которую вы размещаете в определенном месте, используйте id="navigation".
Использование class сгруппировать элементы, которые все ведут себя определенным образом.Например, если вы хотите, чтобы название вашей компании выделялось жирным шрифтом в основном тексте, вы можете использовать <span class='company'>.
Другие советы
Самое важное, что нужно понимать, это то, что идентификаторы должны быть уникальными:на странице должен существовать только один элемент с заданным идентификатором.Таким образом, если вы хотите сослаться на определенный элемент страницы, это часто лучшее, что можно использовать.
Если у вас есть несколько элементов, которые в чем-то похожи, вам следует использовать класс elements для их идентификации.
Один очень полезный, на удивление малоизвестный факт заключается в том, что вы действительно можете применить несколько классов к одному элементу, поставив пробелы между именами классов.Таким образом, если вы опубликовали вопрос, написанный текущим зарегистрированным пользователем, вы можете идентифицировать его с <div class="question currentAuthor">.
Подумайте об университете.
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
Студенты ID карты отличаются друг от друга.Ни у двух студентов в кампусе не будет одного и того же студента ID карточка.Тем не менее, многие студенты могут и будут делиться хотя бы одним Класс друг с другом.
Это нормально - подчинять нескольких студентов одному Класс название, Биология 101.Но никогда не допустимо подчинять нескольких учеников одному студенту ID.
Когда даешь Правила по школьной системе внутренней связи вы можете передать Правила к a Класс:
"Не могли бы вы завтра надеть на урок биологии красные футболки?"
.BiologyClass {
shirt-color:red;
}
Или вы можете присвоить правила Конкретному Ученику, назвав его уникальным ID:
- Не мог бы Джонатан Сэмпсон, пожалуйста, надеть завтра Зеленую рубашку?
#JonathanSampson {
shirt-color:green;
}
Идентификаторы должны быть уникальными, но в CSS они также имеют приоритет при определении того, какой из двух конфликтующих инструкций следовать.
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
Текст был бы белым.
классы хороши, когда вы хотите применить похожие стили ко многим различным разделам или элементам.идентификаторы хороши, когда вы хотите обратиться к определенному элементу для форматирования или обновления с помощью javascript.
Дополнительным преимуществом использования идентификатора является возможность настроить таргетинг на него в теге привязки:
<h2 id="CurrentSale">Product I'm selling</h2>
Это позволит вам в каком-либо другом месте ссылаться непосредственно на это место на странице:
<a href="#CurrentSale">the Current Sale</a>
Обычным способом для этого было бы присвоить каждому заголовку в блоге идентификатор с меткой даты (скажем, id="date20080408"), который позволил бы вам конкретно настроить таргетинг на этот раздел страницы блога.
Также важно помнить, что существуют более ограниченные правила именования идентификаторов, в первую очередь о том, что они не могут начинаться с цифры.Смотрите похожий вопрос SO: Каково допустимое значение атрибутов id в html
Сам стандарт HTML отвечает на ваш вопрос:
Никакие два объекта не могут иметь одинаковый идентификатор, но произвольное количество объектов может иметь один и тот же класс.
Итак, если вы хотите применить определенные атрибуты стиля CSS только к одному DIV, это будет идентификатор.Если вы хотите, чтобы определенные атрибуты стиля применялись к нескольким разделам, это должен быть класс.
Обратите внимание, что вы можете смешивать и то, и другое.Вы можете сделать так, чтобы два DIV принадлежали одному классу, но присвоить им разные идентификаторы.Затем вы можете применить стиль, общий как для класса, так и для элементов, специфичных для любого из них, к их идентификатору.Браузер сначала применит стиль класса, а затем стиль идентификатора, поэтому стили идентификаторов могут перезаписывать все, что класс установил ранее.
Некоторые другие вещи, которые следует иметь в виду:
- При использовании ASP.Net у вас нет полного контроля над ID элементов, поэтому вам в значительной степени приходится использовать class (обратите внимание, что это менее верно, чем когда-то было).
Лучше всего использовать ни то , ни другое, когда вы можете с этим поделать.Вместо этого укажите тип элемента и это тип родителя.Например, неупорядоченный список, содержащийся внутри div с классом navarea, может быть выделен таким образом:
div.NavArea ul { /* styles go here */ }
Теперь вы можете оформить логическое деление для большей части всей вашей навигационной области с помощью приложения одного класса.
Идентификаторы должны быть уникальными.Классы должны быть общими.Итак, если у вас есть некоторое форматирование CSS, которое будет применено к нескольким разделам, используйте класс.Если только один (в качестве требования, а не случайности), используйте идентификатор.
Я думаю, мы все знаем, что такое class, но если вы думаете об IDs как об идентификаторах, а не как об инструментах стилизации, вы не сильно ошибетесь.Вам нужен идентификатор, когда вы пытаетесь настроить таргетинг на что-либо, и если у вас есть более одного элемента с одинаковым идентификатором, вы больше не сможете его идентифицировать...
Когда дело доходит до написания вашего css для идентификаторов и классов, полезно использовать минимальные классы css, насколько это возможно, и стараться не перегружать себя идентификаторами до тех пор, пока не возникнет необходимость, иначе вы будете постоянно стремиться писать более сильные объявления, и вскоре у вас будет css-файл, полный !important .
Где использовать идентификатор по сравнению с классом
Простое различие между ними заключается в том, что, хотя класс может использоваться на странице многократно, идентификатор должен использоваться только один раз на страницу.Поэтому целесообразно использовать идентификатор элемента div, который выделяет основное содержимое на странице, поскольку там будет только один раздел основного содержимого.Напротив, вы должны использовать класс для настройки чередующихся цветов строк в таблице, поскольку они по определению будут использоваться более одного раза.
Идентификаторы - невероятно мощный инструмент.Элемент с идентификатором может быть целью части JavaScript, которая каким-либо образом манипулирует элементом или его содержимым.Атрибут ID можно использовать в качестве цели внутренней ссылки, заменяя теги привязки атрибутами name.Наконец, если вы сделаете свои идентификаторы понятными и логичными, они могут служить своего рода "самодокументацией” внутри документа.Например, вам не обязательно добавлять комментарий перед блоком, в котором указывается, что блок кода будет содержать основное содержимое, если открывающий тег блока имеет идентификатор, скажем, "main", "header", "footer" и т.д.
Если это стиль, который вы хотите использовать в нескольких местах страницы, используйте класс.Если вы хотите много настроек для одного объекта, скажем, навигационной панели сбоку страницы, то лучше всего использовать идентификатор, потому что вам вряд ли понадобится такая комбинация стилей где-либо еще.
предполагается, что id - это уникальный идентификатор элемента на странице, который помогает манипулировать им.Любой внешний CSS-стиль, который должен использоваться более чем в одном элементе, должен указываться в атрибуте class
<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
Используйте идентификатор для уникального элемента на странице, с которым вы хотите сделать что-то очень специфичное, и класс для чего-то, что вы могли бы повторно использовать в других частях страницы.
Тот Самый ID атрибут используется для элементов, чтобы однозначно идентифицировать их в документе, тогда как класс атрибут может иметь одно и то же значение, общее для многих элементов в одном документе.
Итак, на самом деле, если в документе есть только один элемент, который будет использовать стиль (например, #title), тогда используйте ID.Если этот стиль может использоваться несколькими элементами, выберите класс.
Я бы сказал, что лучше всего использовать класс всякий раз, когда вы думаете, что элемент стиля будет повторяться на странице.Такие элементы, как HeaderImage, FooterBar и подобные, хорошо подходят в качестве идентификатора, поскольку вы будете использовать их только один раз, и это поможет предотвратить их случайное дублирование, поскольку некоторые редакторы предупредят вас о наличии дубликатов идентификаторов.
Я также вижу, что это полезно, если вы собираетесь генерировать элементы div динамически и хотите настроить таргетинг на определенный элемент для форматирования;вы можете просто присвоить ему правильный идентификатор при генерации, в отличие от поиска элемента и последующего обновления его класса.
Мой предпочтительный вариант - использовать идентификацию класса, когда стили css применяются к нескольким разделам одним и тем же способом.Если структура или контейнер действительно применяются только один раз или могут наследовать свой стиль по умолчанию, я не вижу причин использовать идентификацию класса.
Таким образом, это будет зависеть от того, является ли ваш div одним из нескольких;например, div, представляющий вопрос к ответу на веб-сайте stackoverflow.Здесь вы хотели бы определить стиль для класса "Answer" и применить его к каждому div "Answer".
Если вы используете .Сетевые веб-элементы управления, то иногда намного проще просто использовать классы, поскольку .Net изменяет идентификаторы веб-contol div во время выполнения (где они используют runat="сервер").
Использование классов позволяет легко создавать стили с помощью отдельных классов для шрифтов, интервалов, границ и т.д.Обычно я использую несколько файлов для хранения отдельных типов информации о форматировании, напримерbasic_styles.css для простого форматирования всего сайта, ie6_styles.css для специфичных для браузера стилей (в данном случае IE6) и т.д. И template_1.css для информации о макете.
Какой бы способ вы ни выбрали, старайтесь быть последовательными, чтобы облегчить техническое обслуживание.
Кроме того, элементом, которому вы присваиваете определенный идентификатор, можно манипулировать с помощью команд JavaScript и DOM - например, getElementById.
В общем, я считаю полезным присвоить всем основным структурным разделам id - даже если изначально у меня нет каких-либо конкретных правил CSS для применения, у меня есть такая возможность на будущее.С другой стороны, я использую классы для тех элементов, которые можно использовать несколько раз - например, div, содержащий изображение и подпись - у меня может быть несколько классов, каждый со слегка отличающимися значениями стиля.
Однако помните, что при прочих равных условиях правила стиля в спецификации идентификатора имеют приоритет над правилами в спецификации класса.
Помимо того, что идентификаторы и классы отлично подходят для настройки стиля отдельного элемента или аналогичного набора элементов, следует помнить еще об одном предостережении.Это также в какой-то степени зависит от языка.В ASP.Net вы можете добавить Div и иметь id.Но, если вы используете панель вместо Div, вы потеряете идентификатор.
Классы предназначены для стилей, которые вы можете использовать несколько раз на странице, идентификаторы - это уникальные идентификаторы, которые определяют особые случаи для элементов.Стандарты гласят, что идентификаторы должны использоваться только один раз на странице.Таким образом, вы должны использовать классы, когда вы хотите использовать стиль для более чем одного элемента на странице, и идентификатор, когда вы просто хотите использовать его один раз.
Другое дело, что для классов вы можете использовать несколько значений (ставя пробелы между каждым классом, а-ля "class='blagh blah22 blah'), в то время как с IDs вы можете использовать только on ID для каждого элемента.
Стили, определенные для идентификаторов, переопределяют стили, определенные для классов, поэтому в настройках стиля #uniquething переопределят стиль .whatever, если они конфликтуют.
Поэтому вам, вероятно, следует использовать идентификаторы для таких вещей, как заголовок, ваша "боковая панель" или что-то еще, и так далее - для вещей, которые появляются только один раз на странице.
Для меня : Если использовать классы, когда я буду что-то делать в CSS или добавлять имя к элементам, то смогу использовать во всех элементах страницы.
Итак, идентификаторы, которые я использую для уникального элемента
Бывший :
<div id="post-289" class="box clear black bold radius">
CSS :
.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
