Как использовать селектор идентификаторов в CSS

May 2, 2024

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

Теперь пришло время обсудить третий тип правила CSS, которое называется селектором идентификаторов. Как и в случае с селектором классов, селектор идентификаторов может применяться к любому элементу на веб-странице. Тем не менее, он предназначен для использования только один раз на странице. Это делает селектор идентификаторов очень полезным для динамического HTML и JavaScript. Теоретически, если вы используете селектор идентификаторов на странице более одного раза, последующие должны игнорироваться веб-браузером. Тем не менее, это не всегда так. Очень сложно полагаться на предсказуемость веб-браузеров. Поэтому, когда вы решите использовать селектор идентификаторов, будьте осторожны, чтобы использовать его только один раз. Давайте посмотрим на пример.

Основной код

. . .

пример

. . .

Селектор идентификаторов

Внутри тегов вы заметите, что селектор идентификатора начинается с символа хеша (#), за которым следует имя, назначаемое селектору идентификатора. Как и в случае с селектором классов, вы можете использовать любое имя, которое хотите, но лучше всего, если имя указывает, для чего будет использоваться селектор идентификатора. В примере мы используем его для идентификации специального раздела текста.

{стоимость имущества;}

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

. . .

Когда вы используете селектор идентификатора в теле веб-страницы, вы будете использовать атрибут id внутри открывающего тега HTML. Значением атрибута id является уникальное имя, присвоенное селектору идентификаторов, в данном случае «special_text». (id = "value") Вот как селектор «связывает» стиль с тем тегом HTML, к которому вы хотите применить стиль. В приведенном выше примере селектор идентификатора будет размещен только внутри одного

тег на веб-странице. Любые другие теги HTML на веб-странице не должны содержать селектор идентификатора внутри открывающего тега.

Видео инструкция: How to HTML&CSS. Урок 17. Как использовать мультиклассы, вложенные селекторы в CSS (May 2024).

Как использовать селектор идентификаторов в CSS, HTML, типы правил CSS, как использовать селектор идентификаторов, селектор идентификаторов CSS

Предыдущая статья

Следующая статья

Игрушечная камера PlayStation 2 Eye

May 2024

На прошлой неделе я был на гаджете и купил себе игрушечную камеру PlayStation 2 Eye. Признаюсь, я думал, что это будет глупо - но это оказалось УДИВИТЕЛЬНО весело! Мы получили EyeToy в комплекте с...

компьютеры

Как управлять цветом фона с помощью каскадных таблиц стилей

May 2024

Вы можете использовать каскадные таблицы стилей для управления цветом фона для всей веб-страницы и только для отдельного элемента на веб-странице. Давайте рассмотрим пример, в котором цвет фона для...