В HTML 4.01 на атрибут id накладываются более строгие ограничения. Например, название идентификатора не может начинаться с цифры.

Синтаксис атрибута

Значения атрибута

Определяет уникальный идентификатор элемента. Правила присваивания имен:

• Должен состоять по крайней мере из одного символа
• Не должен содержать пробельные символы
• В HTML все значения регистронезависимы

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

Пример №1

Использование атрибута id для манипулирования HTML элементом при помощи JavaScript:

   
Привет, мир!
 Изменить текст function displayResult()  

Пример №2

Использование атрибута id для ссылки на HTML элемент с заданным идентификатором внутри страницы:

   
Заголовок
 
Много текста.
 
Много текста.
 
Много текста.
 Наверх   

Пример №3

Использование атрибута id для определения стиля элемента:

    #myHeader 
У нас лучшее образование!
   

CSS селектор id

CSS селектор id позволяет применить стиль к определённому элементу на странице, в котором указан необходимый идентификатор. Определение селектора id в CSS коде начинается с символа решётки » # «, за которым следует имя идентификатора:

#myid

Чтобы использовать селектор id , нужно указать, к какому элементу на странице вы хотите его применить, для этого надо добавить атрибут id в открывающем теге и указать в качестве значения имя нужного идентификатора. Ставить решётку перед именем идентификатора в HTML коде (в значении атрибута id ) не нужно.

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

Селектор id имеет некоторые особенности:

• В имени идентификатора разрешается использовать только буквы, числа, дефис и знак подчеркивания
• Имя идентификатора всегда должно начинаться с буквы
• Имена идентификаторов чувствительны к регистру символов, например: #Menu и #menu это два разных идентификатора

Пример:

     #myname 
Добро пожаловать!
 
Меня зовут Арни.
 
Я играю в онлайн игры.
 
 
Моего кота тоже зовут Арни.
   

Результат данного примера:

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

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

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 – 2023 © puzzleweb.ru | razumnikum.ru