Атрибут id

Атрибут id задает уникальный идентификатор для тега, чтобы к нему можно было обратиться через CSS.

Существует также атрибут class , который подобно атрибуту id позволяет выбирать элементы на HTML странице.

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

Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код). Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут появится в дальнейшем — давайте этому элементу класс. Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript, но она не является общепринятой.

Названия id должны быть набраны английскими буквами, цифрами, без пробелов. Значение атрибута id не должно начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).

Имена id следует давать на английском языке (а не на русском, просто английскими буквами). Имена должны быть осмысленными, отражать суть элемента.

Пример

Давайте теперь зададим абзацу, у которого задан атрибут с id в значении elem , красный цвет текста:

Абзац с id elem.

Контрольный абзац без id.

#elem < color: red; >

Селекторы CSS для начинающих. Часть 1.

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

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even) . Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

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

Пример 1. Селекторы по ID элемента

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

em style="color: #c1ef65;">"misha_em">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong">Жирный текст.strong>

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */ #misha_em{ color:#888; /* серый цвет для курсива */ } #misha_strong{ color:#fe0000; /* красный для жирного текста */ }

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{ text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */ }

Подытожу: как видите с ID всё предельно просто — добавляем соответствующий атрибут к любому HTML-элементу, этот атрибут должен быть уникальным и не повторяться больше на странице, а затем мы просто обращаемся к нему напрямую через CSS. Всё.

Пример 2. Селекторы по классам

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

em style="color: #c1ef65;">"misha_em" style="color: #c1ef65;">"misha_text">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong" style="color: #c1ef65;">"misha_text">Жирный текст.strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */ .misha_text{ text-tansform: uppercase; /* оба элемента и будут переведены в верхний регистр */ }

Также мы можем обратиться ко всем элементам жирного текста с классом .misha_text , добавив перед точкой название тега элемента:

/* обращаемся ко всем класса misha_text */ strong.misha_text{ color:#fe0000; }

Очень кратко про приоритеты

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

Тут может показаться, что элементу должен быть присвоен цвет #fe0000 , так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{ color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */ } #misha_strong { color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */ } .misha_text{ color:#fe0000; }

Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

— абзац.

div> ul> li>Элемент списка 1li> li>Элемент списка 2li> li>strong>Жирныйstrong> элемент списка 3li> ul> div> p>strong>Жирный текст внутри абзацаstrong>p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{ background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */ } li{ color:green; /* текст элементов списка станет зелёного о_О цвета */ } strong{ background-color:#ff0000; /* фон всех элементов strong станет красного цвета */ }

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого ! Чтобы понять, о чем я говорю, смотрите пример:

{

background-color

#ff0000

;

}

/* ситуация точно такая же, необязательно элемент должен сразу идти после элемента

, это может быть и: p span strong */ p strong{background-color:#aaa;}

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

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong{ background-color:#ff0000; } p strong{ background-color:#aaa; }

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

/* сначала для всех делаем красный фон */ strong{ background-color:#ff0000; } /* а потом перезаписываем правила для тех , которые находятся внутри абзацов */ p strong{ background-color:#aaa; }

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

Смотрите также

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Селекторы CSS по id

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

Рассмотрим пример использования селектора по id элемента. Представим что есть любой тег с атрибутом id:

Тише, мыши. Кот на крыше.

Обратиться к такому элементу по id можно по тому же принципу, что и при обращении к классу, но вместо точки перед значением атрибута необходимо поставить решётку «#«.

#test

В браузере получим такой результат:

Тише, мыши. Кот на крыше.

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

 Тише, мыши. Кот на крыше.

CSS: Селекторы ID и CLASS

Если нам нужно сделать отступ у первой строки для всех абзацев или изменить цвет всех заголовков первого уровня, то мы будем использовать селектор типа:

/*Задаём отступ первой строки для всех абзацев*/ p /*Изменяем цвет всех заголовков первого уровня на зелёный*/ h1

Селектор типа — это селектор, который задаёт стиль для всех элементов с данным именем. В стилях в качестве селектора в данном случае выступает имя тега.

Но что если нам не нужно изменять цвет для всех заголовков , а только у одного или у двух? CSS предоставляет нам такую возможность. С помощью селекторов id и class , мы можем применять стиль к элементам не зависимо от их имён.

Селектор id

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

Для использования селектора id , нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора.

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

Пример работы селектора id :

Название документа #para1

Добро пожаловать!

К этому абзацу не будет применен стиль.

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox .

Селектор class

CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id , селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.

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

Правила для имен классов:

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

CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:

.menu

Если атрибут class , с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:

Название документа p.center

Стиль не будет применен.

Абзац будет выровнен по центру.

Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.

С этой темой смотрят:

CSS селекторы
Глобальные атрибуты HTML
CSS селектор класса
CSS селектор идентификатора

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Как обращаться к id в css