Содержание
Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег
Благодаря этому тегу весь HTML код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег
Классы и идентификаторы
Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега
Рассмотрим на примере ниже следующий код HTML-разметки:
Зададим внешний вид HTML документу с помощью CSS файла стилей:
/* знак # перед именем — обозначение id */
#content <
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
>
/* (.) перед именем обозначает class */
.content <
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
>
Имена id и class задает сам разработчик произвольно, исходя из смысловой нагрузки. Мы назвали их просто content. Нельзя давать имена русскими буквами, можно использовать цифры, символ дефиса (-) и подчеркивания (_).
Мы видим два абсолютно одинаковых блока. К верхнему блоку применяется селектор id, а к нижнему блоку применятся селектор class. Вы спросите, где же разница между div-ами id и class? Чисто внешне, пока никакой разницы, до тех пор, пока мы применяем по одному id и class на одну страницу.
В чем тогда различие между class и id?
Различие кроется в самом названии id, значит идентификатор, то есть уникальный. Главное отличие от классов в том, что селектор id может использоваться на странице только один раз. Селектор class, наоборот может применяться на одной странице бесконечное количество раз.
.content /* может применяться к любым тегам */
div.content /* применяется только к тегам div с классом .content */
div#content /* для id такая запись не имеет смысла, он уникален */
Так же стоит отметить, что у id свойств выше приоритет, чем у свойств классов.
Этот пример наглядно демонстрирует, что несмотря на то, что class с синим текстом находится ниже, текст все равно красный. Если бы id не имел приоритета, то текст был бы синий.
Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id селектора разумеется такой возможности нет.
Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML документа через язык JavaScript, то обязательно надо применять id, реализовывать это через классы намного сложнее.
Когда лучше использовать id, а когда class?
Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id. Селектор class применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы.
В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на мой видеокурс по данной тематике. Это один из лучших курсов для начинающих.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.
Пример . Использование блока div
Преобразуется на странице в следующее:
Это элементарный пример использования тега
Теперь рассмотрим подробно все атрибуты тега div .
Атрибуты и свойства тега
- align="параметр" — задает выравнивание. Может принимать следующие значения:
- center — выравнивание текста по центру
- left — выравнивание текста по левому краю
- right — выравнивание текста по правому краю
- justify — выравнивание по левому и правому краю
Практические примеры использования
Давайте рассмотрим пару практических примеров с тегом
Пример. Вывод контента по центру с использованием div
Преобразуется на странице в следующее:
Теперь вместо тега можно писать
Пример. Красивая рамка с div
Преобразуется на странице в следующее:
Пример. Реализация тизеров на сайте
Удобство тега div состоит в том, что он размещается блочно относительно друг друга. Практическим примером является вывод подряд идущих блоков, которые будут автоматически переноситься на новую строку при достижении конца.
Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное:
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей