Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Identifikatory-v-css

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

Идентификаторы, как и классы очень часто используются веб-разработчиками, для изменения того или иного свойства элемента HTML документа. Главное отличие идентификаторов от классов состоит в том, что на странице не может быть более одного элемента с одинаковым именем идентификатора. Селектор идентификатора всегда начинают записывать с решетки (#). Имя идентификатора записывается также как и классов.

Применение идентификаторов является очень гибким инструментом так, как можно создавать динамические странички с помощью JavaScript, который в свою очередь будет изменять объект обращаясь к id (идентификатору).

Общий синтаксис написания такой:

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

Для обращения к идентификатору используется атрибут id, по аналогии с классами синтаксис написания будет следующим:

Тег id="имя идентификатора"

Следует заметить, что как и в классах при обращении к идентификатору решетку (#) в имени не ставят. Чтобы понять как используются идентификаторы предлагаю вам рассмотреть вот такой вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Идентификаторы в CSS</title>
  <style type="text/css">
   #block {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение от левого края */
    top: 130px; /* Положение от верхнего края */
    width: 240px; /* Ширина блока */
padding: 6px; /* Поля вокруг текста */
background: #f0f0f0; /* Цвет фона */
text-align:justify /* Выравнивание текста по ширине */
   }
  </style>
 </head> 
 <body> 
  <div id="block">
   Этот текстовый блок серого цвета задан с помощью 
абсолютного позиционирования. 
Для задания стилей к этому блоку был использован идентификатор
 с именем <b>block</b>.  
  </div>
 </body> 
</html>

В результате должно получиться следующее:

Применение идентификаторов в CSS

Объединение идентификаторов

Идентификаторы, также как и классы можно объединять с другими селекторами. Общий синтаксис такой:

селектор#идентификатор { свойство1: значение; ... свойствоN: значение} 

 

Ну и маленький пример для разнообразия:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Идентификаторы</title>
  <style type="text/css">
   P {
    color: red; /* Красный цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#block { 
    color: green; /* Зеленый цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 6px; /* Поля вокруг текста */
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение от левого края */
    top: 130px; /* Положение от верхнего края */
    width: 220px; /* Ширина блока */
   }
  </style>
 </head> 
 <body>
   <p>Просто текст красного цвета</p> 
   <p id="block"> Этот текстовый блок серого цвета задан 
с помощью абсолютного позиционирования. Для задания стилей 
к этому блоку было использовано объединение идентификатора 
под именем <b>block</b> и тега<b>p</b></p>
 </body> 
</html>

Результат вы можете увидеть на рисунке:

Объединение идентификаторов

Как видите ничего сложного в использовании идентификаторов и классов нет. Рассказать все в одном уроке было бы не целесообразно так, как вам бы пришлось очень много запоминать. Поэтому данную тему пришлось разбить на несколько мелких частей. А начнем мы с вами, пожалуй с селекторов тегов.



наверх