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

Идентификаторы (id селекторы), весьма схожи с классами, и отличаются тем, что идентификатор может иметь одно единственное уникальное имя во всем документе.

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

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

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

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

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

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис:

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

P#Primer1 { text-align: center; }

P#Primer2{ text-align: left; }

Вызов из HTML будет выглядеть таким образом:

<p id="Primer1"> Текст выровнен по центру </p>
<p id="Primer2"> Текст выровнен по левой стороне </p>
<p> текст отформатирован по умолчанию </p>

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Один ответ к “Идентификаторы в CSS.”

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: