2 апреля 2012 г.

Атрибуты CSS class и id: как использовать?

   После прочтения учебника по CSS я не мог понять, почему вместо id не используют class, ведь все свойства можно передать через него. Зачем нужно создавать отдельный определитель стиля объекта, если можно создавать классы и использовать их для одного элемента? Отличия между этими элементами я нашёл на своём, так сказать, горьком опыте.

   В учебниках написано лишь то, что атрибут id используется для одного элемента, а class следует использовать для группы элементов, и при этом даны самые элементарные примеры. Собственно, вот примеры из урока на ru.html.net:

Пример использования атрибута class

Пример использования атрибута id

   Глядя на такие примеры, я воспринимал урок так: если на странице будет показано несколько одинаковых контейнеров (с одним и тем же именем), то мне следует использовать атрибут class="example", если же на странице будет один контейнер, то стили для него лучше определить как для id="example". В подробности, почему-то, никто из создателей учебников не углублялся, а найти ответ в глобальной паутине я не смог, так как просто не представлял, как оформить запрос.

   Создавая новый шаблон для CMS Joomla!, я решил использовать для меню не классы элементов, а идентификаторы. В итоге я столкнулся с одной проблемой: при указании уникального идентификатора какому-то одному пункту меню, он всё равно отображался в том стиле, какой указан для всего меню. И никакие свойства, запрещающие наследование свойств у родителя, не давали обратного результата. Упрощённый пример этого кода:


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

   Стало быть, если прописать для контейнера example определитель группы объектов, чтобы код имел следующий вид:


всё встанет на свои места. Четвёртый элемент будет показываться с учётом тех свойств, которые указаны для идентификатора not, а все остальные элементы будут брать список стилей от группы example. Нужно лишь исправить в каскадных таблицах #example на .example, после чего всё встанет на свои места и веб-мастер увидит желаемый результат. После обновления странички, конечно :)

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

Комментариев нет:

Отправить комментарий