Классы и идентификаторы css – Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Классы и идентификаторы CSS: отличие и применение

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

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

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Таким образом CSS может напоминать следующий код:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:

<div>
<h2>Chocolate curry</h2>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов. Это и есть основное отличие.

В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например p.jam { какой-то стиль } будет применяться для элементов параграфов, у которых есть класс «jam».

Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

Использование классов и идентификаторов для назначения стилей

Часто нужно применить стиль только для отдельных элементов. В других случаях необходимо создать стиль, который можно применить к нескольким элементам документа без повторения правила для каждого отдельного экземпляра. Для реализации этих задач можно использовать HTML class и id.

Селекторы класса

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

<style type="text/css">
  p { color: #0000ff; }
  p.alert { color: #ff0000; }
</style>

Эти стили задают для всех параграфов синий цвет (#0000FF), но любой абзац с классом «alert» будет выводиться красным цветом.

Атрибут class является более специфичным, чем первое правило CSS, которое использует только селектор тега. Вот как это можно использовать в HTML-разметке:

<p>
Этот абзац будет отображаться синим цветом, который является цветом текста по умолчанию.
</p>
<p>
Этот абзац также будет синим.
</p>
<p>
А этот абзац будет отображаться красным цветом, так как атрибут class переопределяет стандартный синий цвет.
</p>

В этом примере стиль «p.alert» будет применяться только к параграфам, которые используют класс «alert«. Если вы хотите применить этот HTML style class для нескольких элементов, нужно удалить элемент из начала стиля (только не забудьте оставить точку):

<style type="text/css">
.alert {background-color: #ff0000;}
</style>

Теперь можно применять этот класс к любому элементу:

<p>
Этот параграф будет отображаться красным цветом.
</p>
<h3>Этот элемент h3 также будет красным.</h3>

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

Селекторы ID

Селектор ID позволяет присвоить имя определенному стилю, не связывая его с тегом или другим HTML-элементом. Допустим, что у вас есть блок div, который содержит информацию о событии. Можно задать для него id «event«, а затем выделить этот блок черной рамкой шириной в 1 пиксель:

<style type="text/css">
#event { border: 1px solid #000; }
</style>

Проблема, связанная с идентификаторами, заключается в том, что они не могут повторяться в HTML-документе. Они должны быть уникальными. Так что если у вас есть три блока событий, и для них нужно создать рамку, придется присвоить им идентификаторы «event1«, «event2» и «event3» и задать стили отдельно для каждого. Поэтому было бы гораздо проще использовать упомянутый выше HTML div class «event» и задать стили для всех сразу.

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

Но идентификаторы незаменимы, если нужно создать страницу, которая содержит анкорные ссылки. Например, если у вас есть параллакс-сайт. Он содержит весь контент на одной странице со ссылками, с помощью которых можно «перепрыгивать» к различным частям страницы. Это делается с помощью идентификаторов и текстовых ссылок, которые использует эти анкорные ссылки. Вы просто добавляете значение этого атрибута, которому предшествует символ #, в атрибут ссылки href. Например, следующим образом:

<a href="#event"> Это ссылка </a>

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

Данная публикация представляет собой перевод статьи «Using Style Classes and IDs» , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

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

Пример 9.1. Использование идентификатора

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>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

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

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

Вначале указывается имя тега, затем без пробелов символ решётки и название идентификатора. В примере 9.2 показано использование идентификатора применительно к тегу <p>.

Пример 9.2. Идентификатор совместно с тегом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa { 
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
   <p>Обычный параграф</p> 
   <p>Параграф необычный</p>
 </body> 
</html>
 

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

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.

Вопросы для проверки

1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

1. Никогда, это недопустимо.
2. В любом случае.
3. Только, если они применяются к одному элементу.
4. Только, если они применяются к разным элементам.
5. Только, если в коде они встречаются один раз.

2. Какое имя идентификатора написано неправильно?

1. id_1id1
2. a-a-a-1-1-1
3. L0g0
4. bla-bla
5. кrevedko

3. Какая ошибка содержится в следующем коде?

<div>
<div><a href=»209.html»>Подключение к MySQL через PHP</a></div>

<div><a href=»213.html»>Создание таблиц в phpMyAdmin</a></div>
<div><a href=»211.html»>Структура базы данных</a></div>
</div>

1. Имя класса написано неверно.
2. Имена идентификаторов написаны неверно.
3. Неправильное вложение тегов.
4. Повторяющиеся идентификаторы.
5. Разные идентификаторы для однотипных элементов.

4. Как корректно задать стиль для тега <div> с идентификатором loom?

1. loom { font-size: bold; }
2. div { font-size: bold; }
3. .loom { font-size: bold; }
4. #loom# { font-size: bold; }
5. #loom { font-size: bold; }

Ответы

1. В любом случае.

2. кrevedko

3. Повторяющиеся идентификаторы.

5. #loom { font-size: bold; }

css классы и идентификаторы — CodeRoad

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

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

Например, в классе студентов все общие свойства мы указываем в классе.

    .class_students {
        grade:6;
        instructor:Ms XYZ;
     }

И для свойств, которые уникальны для разных студентов в этом классе, мы будем использовать их roll no, который уникален, например

    #roll_no6 {
        name: Micheal;
        age:10;
    }

Точно так же некоторые элементы могут принимать более одного класса, например <div> . Это означает, что эти элементы принадлежат более чем к одной группе в случае нашего школьного примера студент может принадлежать к определенному классу, может также принадлежать к спортивной команде, в этом случае он будет разделять свойства обеих групп.

Теперь последний пример, чтобы продемонстрировать каждую вещь.

    <student>
    </student>

CSS

    .grade6 {
       instructor:Ms XYZ;
       no-students:30;
       major:Math;
    }
    .hockey-team {
       kit-color: blue;
       trainer: Mr ABC;
    }
    #rollno6 {
       name:Micheal;
       lives: somewhere;
       position:center-forward;
       major:Physics;
    }

Чтобы дать некоторое свойство, которое, по вашему мнению, должно применяться только к rollno6 , вы можете дать его этому и rest элементов этого класса останутся прежними. Свойство major в grade6 говорит нам, что все студенты в этом классе специализируются на математике. Но вы переоцениваете это свойство для конкретного студента rollno6, теперь rollno6 специальностей по физике.

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

22 мая 2015

Автор: Александр Побединский

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

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

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

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

Для обращения к идентификатору используется атрибут 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>
   Этот текстовый блок серого цвета задан с помощью 
абсолютного позиционирования. 
Для задания стилей к этому блоку был использован идентификатор
 с именем <b>block</b>.  
  </div>
 </body> 
</html>

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

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

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

селектор#идентификатор { свойство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> Этот текстовый блок серого цвета задан 
с помощью абсолютного позиционирования. Для задания стилей 
к этому блоку было использовано объединение идентификатора 
под именем <b>block</b> и тега<b>p</b></p>
 </body> 
</html>

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

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

Метки: id, идентификаторы Применение классов в CSS Селекторы тегов 

CSS учебник

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

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

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

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

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

Пример 9.1. Использование идентификатора

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>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

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

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

Вначале указывается имя тега, затем без пробелов символ решётки и название идентификатора. В примере 9.2 показано использование идентификатора применительно к тегу <p>.

Пример 9.2. Идентификатор совместно с тегом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa {
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
   <p>Обычный параграф</p>
   <p>Параграф необычный</p>
 </body>
</html>

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

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.

Вопросы для проверки

1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

1. Никогда, это недопустимо.
2. В любом случае.
3. Только, если они применяются к одному элементу.
4. Только, если они применяются к разным элементам.
5. Только, если в коде они встречаются один раз.

2. Какое имя идентификатора написано неправильно?

1. id_1id1
2. a-a-a-1-1-1
3. L0g0
4. bla-bla
5. кrevedko

3. Какая ошибка содержится в следующем коде?

<div>
<div><a href=»209.html»>Подключение к MySQL через PHP</a></div>
<div><a href=»213.html»>Создание таблиц в phpMyAdmin</a></div>
<div><a href=»211.html»>Структура базы данных</a></div>
</div>

1. Имя класса написано неверно.
2. Имена идентификаторов написаны неверно.
3. Неправильное вложение тегов.
4. Повторяющиеся идентификаторы.
5. Разные идентификаторы для однотипных элементов.

4. Как корректно задать стиль для тега <div> с идентификатором loom?

1. loom { font-size: bold; }
2. div { font-size: bold; }
3. .loom { font-size: bold; }
4. #loom# { font-size: bold; }
5. #loom { font-size: bold; }

Ответы

1. В любом случае.

2. кrevedko

3. Повторяющиеся идентификаторы.

4. #loom { font-size: bold; }

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

---

---

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

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

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

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

Пример

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

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

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

Результат:

Редактор кода »

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

Примечание: Значение id чувствительно к регистру.

Примечание: Значение id должно содержать по крайней мере один символ и не должны содержать пробельных символов (пробелов, табуляций и т. д.).

---

Разница между атрибутами Сlass и ID

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

Пример

/* Стиль элемента с ID «myHeader» */
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

/* Все элементы с именем класса «city» */
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
}
</style>

<!— Уникальный элемент —>
<h2>My Cities</h2>

<!— Несколько похожих элементов —>
<h3>Лондон</h3>
<p>Лондон-столица Англии.</p>

<h3>Париж</h3>
<p>Париж-столица Франции.</p>

<h3>Токио</h3>
<p>Токио-столица Японии.</p>

Редактор кода »

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

---

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

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

Пример

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

<script>
function displayResult() {
    document.getElementById(«myHeader»).innerHTML = «Хорошего дня!»;
}
</script>

Редактор кода »

---

Закладки с ID с ссылками

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

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

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

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

Пример

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

<h3>Глава 4</h3>

Затем добавьте ссылку на закладку («Перейти к Главе 4»), в той же странице:

<a href=»#C4″>Перейти к главе 4</a>

Или добавьте ссылку в закладки («Перейти к Главе 4»), в другую страницу:

---

Проверьте себя с помощью упражнений!

---