Как указать id в css

Идентификаторы

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

Синтаксис

Здесь E — обозначает любой тег. При описании идентификатора вначале указывается символ решётки (#), затем идёт имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Вид текста, оформленного с помощью идентификатора

Рис. 1. Вид текста, оформленного с помощью идентификатора

Браузеры

В браузере Internet Explorer до версии 6.0 включительно идентификаторы иногда игнорируются, если они комбинируются с селекторами тегов или классами.

CSS: идентификаторы id

В HTML есть такой атрибут id="" . Он предназначен для присвоения тегам уникальных имён, которые используются для доступа к тегам при написании сценариев на JavaScript. Но и в CSS есть возможность присваивать стили тегам по их уникальному атрибуту id="" .

Синтаксис применения селектора идентификатора следующий:

Имя идентификатора объявляется символом # и должно начинаться с латинской буквы, может включать в себя символы "-" и "_" (знак подчёркивания). В имени идентификатора запрещено использовать буквы кириллицы.

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

CSS: идентификаторы id: работа примера №1

Рисунок 1. Работа примера №1.

Идентификаторы id="idDiv" и id="iddiv" — это разные имена.

Хотя стилевое правило сработает и для двух блоков, если исправить имя id="" в третьем теге <div> , но это нарушит логику использования идентификаторов. По стандарту идентификатор должен быть уникальным чтобы к нему можно было "достучаться" при помощи языка сценариев JavaScript используя метод getElementById.

Селектор идентификатора можно указывать с селектором тега, к которому применён атрибут id="" . Синтаксис будет таким:

Мы видим, синтаксис ID селектора очень похож на синтаксис селектора классов.

Этот пример напомнил нам, что регистр в имени класса CSS также важен. Стиль класса myClass не был применён к пятому блоку, так как имя класса в атрибуте состояло полностью из букв нижнего регистра.

Вот результат работы этого примера:

CSS: идентификаторы id: работа примера №2

Рисунок 2. Работа примера №2.

HTML Атрибут ID

Атрибут id указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в HTML-документе).

Значение идентификатора может использоваться CSS и JavaScript для выполнения определенных задач для уникального элемента с указанным значением идентификатора.

В CSS, чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента:

Пример

Использование CSS для стиля элемента с идентификатором "myHeader":

<style>
#myHeader <
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
>
</style>

Мой заголовок

Совет: Атрибут ID можно использовать для любого элемента HTML.

Примечание: Значение идентификатора учитывает регистр.

Примечание: Значение идентификатора должно содержать не менее одного символа и не содержать пробелы (пробелы, вкладки и т. д.).

Разница между классом и ID

Элемент HTML может иметь только один уникальный идентификатор, принадлежащий этому единственному элементу, в то время как имя класса может использоваться несколькими элементами:

Пример

<style>
/* Style the element with the id "myHeader" */
#myHeader <
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
>

/* Style all elements with the class name "city" */
.city <
background-color: tomato;
color: white;
padding: 10px;
>
</style>

<!— A unique element —>
<h1 >
<!— Multiple similar elements —>
<h2 ><p>London is the capital of England.</p>

<h2 ><p>Paris is the capital of France.</p>

<h2 ><p>Tokyo is the capital of Japan.</p>

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.

Использование атрибута ID в JavaScript

JavaScript может получить доступ к элементу с указанным идентификатором с помощью getElementById() method:

Примере

Используйте атрибут ID для управления текстом с помощью JavaScript:

Совет: Изучайте JavaScript в главе HTML JavaScriptили в нашем Справочник по JavaScript.

Закладки с идентификатором и ссылками

Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.

Закладки могут быть полезны, если ваша веб-страница очень длинная.

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id :

Затем добавьте ссылку на закладку ("перейти к главе 4"), изнутри той же страницы:

Или добавьте ссылку на закладку ("перейти к главе 4"), с другой страницы:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *