Для id css – Спецификация HTML5 допускает практически любое значение атрибута id — пользуйтесь с умом

Leave a Comment / Css / By /

Селектор id | CSS справочник

CSS селекторы

Значение и применение


Селектор id в CSS.

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором.

В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок
    ).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
  • учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Поддержка браузерами

CSS синтаксис:

#id {
блок объявлений;
}

Версия CSS

CSS1

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

Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}

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

<h3 id = "test">Обычный заголовок второго уровня</h3> <!-- задаем идентификатор для элемента -->

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
	<h3 id = "test">Обычный заголовок второго уровня</h3> 
</body>
</html>

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

Пример использования id селектора.CSS селекторы

Идентификаторы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

E#Имя_идентификатора { Описание правил стиля }
#Имя_идентификатора { Описание правил стиля }

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body> 
</html>

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

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

Браузеры

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

id — идентификатор | CSS селектор

Поддержка браузерами

Описание

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

id в CSS коде начинается с символа решётки «#«, за которым следует имя идентификатора:

#myid { color: blue; }

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

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

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      #myname {color:red;}
    </style>
  </head>

  <body>
    <h2>Добро пожаловать!</h2>

    <div>
      <p>Меня зовут Арни.</p>
      <p>Я играю в онлайн игры.</p>
    </div>
    <p>Моего кота тоже зовут Арни.</p>

  </body>
</html>
Результат данного примера:

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

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

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

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

Атрибут ID HTML уроки для начинающих академия


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

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

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

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

Пример

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


#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

<h2>Мой заголовок</h2>

Result:

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

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

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

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

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

Пример


/* 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 —>
<h2>My Cities</h2>

<!— Multiple similar elements —>
<h3>London</h3>
<p>London is the capital of England.</p>

<h3>Paris</h3>

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

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

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

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

Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис ?

#<Имя идентификатора> { Описание правил стиля }

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

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body> 
</html>

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

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

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

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Селектор id CSS — Как создать сайт

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

Селектор
Селектор id

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


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

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


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

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

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

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

<тег> </тег>

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

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

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


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

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

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

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


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

Селекторы id и class в CSS, урок для новичков

Селекторы id и class в CSS, что это такое? В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. CSS позволяет указать свои собственные селекторы, которые называются «id» и «class». Эти селекторы позволяют применять свойства CSS к элементам определенного блока страницы. К примеру, можно присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. Далее можно присвоить различный стиль ссылкам в блоке навигации и блоке контента.

Селекторы id и class в CSS

Селектор id

Селектор id предназначен для определения стиля для одного, уникального элемента страницы. Данный селектор использует атрибут «id» и определяется знаком «#».

Пример. Зададим стили для абзаца:

<p>Пример селектора id.</p>

Стили имеют следующий вид:

#primer {
text-align:center;
color:red;
}

К данному абзацу будет применен стиль «primer». Таким образом, текст абзаца у нас будет выравниваться по центру, цвет у него будет красный.

Селектор class

Селектор class используется для определения стиля у группы элементов. Данный селектор использует атрибут «class» и определяется знаком «.»

Рассмотрим пример:

<h2>Текст заголовка</h2>
<p>Текст абзаца...</p>

Используемые стили:

.center {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color:red;
}

Таким образом, из урока мы  познакомились с селекторами id и class в CSS, и на практических примерах научились с ними работать. Эти селекторы очень часто используются на практике, поэтому знать о их существовании крайне необходимо.

Понравилось? Поделитесь с друзьями!

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

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