Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Селектор id CSS

Селектор уникального идентификатора (id) в языке CSS

Селектор
Селектор id
Описание селектора id (уникального идентификатора), языка CSS.

Схема CSS-кода выглядит следующим образом:

селектор {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

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

#имяУникальногоИдентификатора {
 CSS-свойство: значение;
 ... и т.д.
}

Обратите внимание на то, что перед именем уникального идентификатора ставится решётка #

Селектор id — это выборка элементов, по значению глобального атрибута id=" "

Пример внедрения глобального атрибута id=" " в HTML-тег:

<тег id="имяУникальногоИдентификатора"> </тег>

имяУникальногоИдентификатора — это значение глобального атрибута id=" "

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

Допустим, у нас есть HTML-документ, содержащий статью о снежном барсе, статья содержит два абзаца:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере, будет выглядеть следующим образом.

Нам нужно сделать так, чтобы первый абзац был синего цвета, а второй абзац был зелёного цвета.

Для этого, надо в тег первого абзаца внедрить атрибут id=" " со значением abzac, а в тег второго абзаца внедрить атрибут id=" " со значением abzac2

В CSS-коде, вместо имён тегов, нужно вставить имена уникальных идентификаторов и перед их именем поставить решётку #

<style>
 #abzaс {color: blue;}
 #abzaс2 {color: green;}
</style>

В итоге, получаем такой HTML-документ:

<!DOCTYPE html>
<html>
 <head>
 <title>Страница о снежном барсе</title>
 <style>
  #abzac {color: blue;}
  #abzac2 {color: green;}
 </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p id="abzaс">
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p id="abzaс2">
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере, будет выглядеть следующим образом.

PS: Символ решётки также еще называют хэшем, а решётку + слово — хэштэгом.

Читать далее: В чем разница между селекторами class и id?

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget