Как сделать разные ids


Как сделать разные ids

Как сделать разные ids

Как сделать разные ids



Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков.

Для начала перечислим характерные признаки этих селекторов.

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

  • В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.
  • Имя идентификатора чувствительно к регистру.
  • Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.
  • Стиль для идентификатора имеет приоритет выше, чем у классов.

Классы

  • Классы могут использоваться в коде неоднократно.
  • Имена классов чувствительны к регистру.
  • Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.

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

Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById, параметром которого служит имя идентификатора. В примере 21.1 к текстовому полю формы добавляется идентификатор с именем userName, затем с помощью функции JavaScript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg. Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action.

Пример 21.1. Проверка данных формы

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Проверка формы</title> <script> function validForm(f) { user = document.getElementById("userName"); if(user.value == "") document.getElementById("msg").innerHTML = 'Пожалуйста, введите имя.'; else f.submit(); } </script> </head> <body> <form action="handler.php" onsubmit="validForm(this); return false"> <p>Введите свое имя:</p> <div id="msg"></div> <p><input type="text" id="userName" name="user"></p> <p><input type="submit"></p> </form> </body> </html>

Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега <input> используется имя userName, его же следует указать и в методе getElementById. При ошибочном написании, например, username, скрипт перестанет работать, как требуется.

В примере выше стили вообще никакого участия не принимали, сами идентификаторы требовались для работы скриптов. При использовании в CSS следует учитывать, что идентификаторы обладают высоким приоритетом по сравнению с классами. Поясним это на примере 21.2.

Пример 21.2. Сочетание стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Идентификаторы</title> <style> #A, .a { border: none; background: #f0f0f0; color: green; padding: 5px; } .b { border: 1px solid red; color: red; padding: 0; } </style> </head> <body> <p id="A" class="b">Стиль идентификатора</p> <p class="a b">Стиль классов a и b</p> <p class="b">Стиль класса b</p> </body> </html>

Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b. На рис. 21.1 показан результат применения стилей.

Использование стилей для текста

Рис. 21.1. Использование стилей для текста

Специфичность в каскадировании начинает играть роль при разрастании стилевого файла за счёт увеличения числа селекторов, что характерно для больших и сложных сайтов. Чтобы стиль применялся корректно, необходимо грамотно управлять специфичностью селекторов путем использования идентификаторов, повышения важности через !important, порядком следования свойств.

Классы

Поскольку к элементу одновременно можно добавлять более одного класса, это позволяет завести несколько универсальных классов со стилевыми свойствами на все случаи и включать их к тегам при необходимости. Предположим, что большинство блоков на странице имеют закругленные уголки, причём некоторые блоки ещё имеют красную рамку, а некоторые нет. В этом случае можем написать такой стиль (пример 21.3).

Пример 21.3. Использование классов

.r, .b { padding: 10px; background: #FCE3EE; } .r { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px } .b { border: 1px solid #ED1C24; } .n { border: none; }

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


Источник: http://htmlbook.ru/samcss/identifikatory-i-klassy


Как сделать разные ids фото


Как сделать разные ids

Как сделать разные ids

Как сделать разные ids

Как сделать разные ids

Как сделать разные ids

Как сделать разные ids

Как сделать разные ids

Далее: