HTML Идентификаторы и классы
Идентификаторы
Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id.
Например, следующий id-селектор сопоставляется элементу
#chapter7 {background-color:#FF00FF;}После описания идентификатора его следует включить в состав тега:
<h3>Заголовок второго уровня с id</h3>Пример: Применение идентификатора
Заголовок второго уровня с id
Заголовок второго уровня
Заголовок второго уровня
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#chapter7 {
background-color:#FF00FF;
}
</style>
</head>
<body>
<h3>Заголовок второго уровня с id</h3>
<h3>Заголовок второго уровня</h3>
<h3>Заголовок второго уровня</h3>
</body>
</html>
Классы
Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент.
Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):
<style>
h3.boldfont {font-weight: bold;}
h3.italicfont {font-style: courier;}
</style>После описания класса его следует включить в открывающий тег элемента:
<h3>Заголовок второго уровня</h3>Пример: Применение атрибутов id и class
Заголовок второго уровня с id и class=test
Заголовок второго уровня с class=test
Заголовок второго уровня
Заголовок второго уровня с class=test orange
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h3#chapter7 {background-color: #FF00FF;}
h3.orange {background-color: orange;}
.test {color: green;}
</style>
</head>
<body>
<h3>Заголовок второго уровня с id и class=test</h3>
<h3>Заголовок второго уровня с class=test</h3>
<h3>Заголовок второго уровня</h3>
<h3>Заголовок второго уровня с class=test orange</h3>
</body>
</html>| Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class. |
Задачи
Атрибут class
Примените класс test к элементу <div>.
Задача HTML:
Реши сам »<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> .test { background-color:blue; color:white; } </style>
</head>
<body> <div> <h3>Атрибуты id и class</h3> <p>Атрибут id (идентификатор) используется для идентификации.</p> <p>Атрибут class (класс) используется для классификации.</p> </div> </body>
</html>
Селектор класса
Создайте селектор класса с именем «test». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса «test» заголовку <h3> и встроенному элементу <span>.
Задача HTML:
Реши сам »<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h3>Атрибут class</h3> <p>Атрибут <span>class (класс)</span> используется для классификации.</p> </body>
</html>
Цвет для идентификатора
Напишите стилевое правило к абзацу с идентификатором, благодаря которому цвет текста этого абзаца станет красным.
Задача HTML:
Реши сам »<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h3>Это заголовок</h3> <p>Этот параграф будет выделен красным цветом.</p> <p>Этот параграф НЕ будет выделен красным цветом.</p> </body>
</html>
Цвет для класса
Напишите стилевое правило для класса, благодаря которому цвет текста элемента, к которому применен класс станет красным.
Задача HTML:
Реши сам »<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h3>Это заголовок</h3> <p>Этот параграф будет выделен красным цветом.</p> <p>Этот параграф НЕ будет выделен красным цветом.</p> </body>
</html>
Селектор идентификатора
Создайте селектор id с именем «redlow». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем «redlow» заголовку <h3>.
Задача HTML:
Реши сам »<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h3>Атрибут id</h3> <p>Атрибут id (идентификатор) используется для идентификации, поэтому он на странице
только один.</p> </body>
</html>
Please enable JavaScript to view the comments powered by Disqus.
Атрибуты class HTML уроки для начинающих академия
Использование атрибута Class
class указывает одно или несколько имен классов для элемента HTML.Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.
В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:
Пример
Используйте CSS для оформления всех элементов с именем класса «City»:
.city {
background-color: tomato;
color: white;
padding: 10px;
}
<h3 class=»city»>London</h3>
<p>London is the capital of England.</p>
<h3 class=»city»>Paris</h3>
<p>Paris is the capital of France.</p>
<h3 class=»city»>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.Tokyo
Tokyo is the capital of Japan.
Совет: Атрибут Class можно использовать для любого элемента HTML.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Использование атрибута Class в JavaScript
JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName() method:
Пример
Когда пользователь щелкает по кнопке, скройте все элементы с именем класса «city»:
<script>
function myFunction() {
var x = document.getElementsByClassName(«city»);
for (var i = 0; i < x.length;
i++) {
x[i].style.display = «none»;
}
}
</script>
HTML Классы
Используя атрибут class
HTML атрибут class позволяет определить равные стили для элементов с одинаковым именем класса.
Здесь мы имеем три элемента <div> с тем же именем класса:
Пример
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
<div>
<h3>Лондон</h3>
<p>Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.</p>
</div>
<div>
<h3>Париж</h3>
<p>Париж является столицей и самым густонаселенным городом Франции.</p>
</div>
<div>
<h3>Токио</h3>
<p>Токио столица Японии, центр большого Токио самый густонаселенный мегаполис в мире.</p>
</div>
</body>
</html>
Лондон
Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.
Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.
Париж
Париж является столицей и самым густонаселенным городом Франции.
Расположен на реке Сене, это в центре регеона Ĩle-de-France, также известный как рéгеон парижанка.
В пределах его агломерации является одним из крупнейших населенных пунктов в Европе, с более чем 12 миллионов жителей.
Токио
Токио столица Японии, центр большого Токио самый густонаселенный мегаполис в мире.
Он является резиденцией японского правительства и Императорского дворца, дом японской императорской семьи.
Префектура Токио является частью самой густонаселенной в мире агломерации с 38 миллионов людей и крупнейшей городской экономикой в мире.
Используя атрибут class со Встроенными Элементами
Атрибут class HTML также может использоваться для встроенных элементов:
Пример
span.note {
font-size: 120%;
color: red;
}
<h2>Мой <span>Важный</span> Заголовок</h2>
<p>Это <span>Важный</span> текст.</p>
</body>
</html>
Проверьте себя с помощью упражнений!
Классы | CSS | WebReference
Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class.
Синтаксис ?
E.<Имя класса> { Описание правил стиля }
.<Имя класса> { Описание правил стиля }Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчёркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| 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>
p { /* Обычный абзац */
text-align: justify; /* Выравнивание текста по ширине */
}
p.cite { /* Абзац с классом cite */
color: navy; /* Синий цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>Для искусственного освещения помещения применяются люминесцентные лампы.
Они отличаются высокой световой отдачей, продолжительным сроком службы,
малой яркостью светящейся поверхности, близким к естественному спектральным
составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
<p>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью класса
Примечание
Internet Explorer до версии 7 понимает классы, имена которых начинаются с дефиса (-) или символа подчёркивания (_). Остальные браузеры таки имена игнорируют.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Атрибут class | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
Синтаксис
class="имя"Значения
Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.
Значение по умолчанию
Нет.
Применяется к тегам
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>
Пример
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут class</title>
<style>
p { /* Обычный абзац */
text-align: justify; /* Выравнивание текста по ширине */
}
p.cite { /* Абзац с классом cite */
color: navy; /* Синий цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>Для искусственного освещения помещения применяются люминесцентные лампы.
Они отличаются высокой световой отдачей, продолжительным сроком службы,
малой яркостью светящейся поверхности, близким к естественному спектральным
составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
<p>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>Классы и ID CSS: Что использовать?
В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.
В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.
Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.
Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:
<div> <font> <font>Это заголовок нашей веб-страницы. </font> </font> </div>
В файле CSS можно применить стили к этому элементу div:
#header { width: 100%; height: 80px; background: blue }Обратите внимание на использование # (хэша) перед именем идентификатора.
Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:
<p> <font> <font>Это наш первый пункт.</font> </font> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p>
В файле CSS можно применить стили к этим абзацам следующим образом:
.content { margin: 20px 0; line-height: 24px; font-size: 15px }Обратите внимание на использование точки перед именем класса.
Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.
Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.
Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:
<div> <a> <font> <font>Ссылка 1 </font> </font></a> <a> <font> <font>Ссылка 2 </font> </font> </a> <a> <font> <font>Ссылка 3 </font> </font> </a> <a> <font> <font>Ссылка 4</font> </font> </a> </div> <div> <p> <font> <font>Это наш первый пункт.</font> </font>< /p> <p> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p> </div>
В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.
В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.
Назначим стили для этих элементов:
#container { width: 1080px; margin: 0 auto; background: #eee }
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
#content { padding: 20px }
.text { font-size: 15px }ID используется для отдельных элементов, которые присутствуют на странице только в одном месте. Например, заголовка, подвала или меню. Класс используется для одного или нескольких элементов, которые присутствуют на странице: параграфов, ссылок, кнопок, полей ввода. Также можно использовать класс для единичного элемента. Чтобы привыкнуть к этому различию, лучше завести привычку использовать классы для управления несколькими элементами одного типа.
Следует помнить, что HTML-элемент может иметь CSS класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:
<div> <font> <font>...</font> </font> </div> <div> <font> <font>...</font> </font></div>
Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:
<p> <font> <font>Этот пункт не имеет границ.</font> </font> </p> <p> <font> <font>Этот пункт имеет границы.</font> </font> </p>
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.
Данная публикация представляет собой перевод статьи «CSS Class vs ID Which One to Use» , подготовленной дружной командой проекта Интернет-технологии.ру
Работа с классами в HTML и CSS. Урок 7.
Коротко о том, для чего нам вообще нужны классы. Допустим у нас на страничке есть несколько абзацев, и мы решили каждому из них задать своё оформление. Один должен быть зелёного цвета, другой жёлтого, а третий — так вообще синего. Как быть в этом случае? Ведь всё что есть в нашем распоряжении на данный момент, так это тэг p. И если мы будем задавать ему правило, то оно автоматически применится для всех элементов. А нам бы этого не хотелось. Вот на этот случай и придумали классы.
Как вы наверное уже догадались, классы используются в том случае, когда нам нужно дать определённому абзацу свойства, которые присущи только одному ему. В html коде, чтобы какому-то тэгу назначить класс, нужно в атрибуте class прописать само название класса. К примеру class=’green’. По факту это будет выглядеть примерно вот так:
<p>Здесь будет текст зелёного цвета</div>
Но от того, что мы прописали элементу такой атрибут, сам текст зелёным от этого не стал. Потому что нужно задать ему CSS правило. А сделать это можно так:
p.green {
color: green;
}Данное правило можно прочитать так: задай элементу p с классом green зелёный цвет. Теперь, если мы хотим добиться того, чтобы все абзацы, находящиеся у нас на странице были зелёного цвета, мы просто прописываем им соответствующий класс. И видим что те параграфы, которым мы дали данный атрибут, окрасились в зелёный цвет.
Для закрепления материала, можете другим абзацам назначить свои классы и прописать им собственные CSS правила.
С другими элементами абсолютно та же история. Вы можете точно так же, задать классы заголовку h2 или h3 и раскрасить их в иные цвета. Ну а вообще, сама суть не в самих цветах, а в том чтобы выделить те или иные элементы на странице с помощью классов. А правила вы им будете вольны задавать такие, какие вздумается.
Так же вы можете столкнуться с такой ситуацией, что вам понадобится сделать зелёным не только абзац, но и заголовок тоже. И тут у вас будет три варианта. Сделать так:
-
Прописать отдельно правила для заголовка и абзаца:
h2.green { color: green; } p.green { color: green; } -
Использовать группировку селекторов:
h2.green, p.green { color: green } -
Но можно сделать короче, указав так:
.green { color: green; }
Здесь мы не указываем никаких селекторов, а даём понять, что работаем со всеми элементами, которые имеют указанный класс.
Кроме того, у нас так же есть возможность задать принадлежность элемента сразу к нескольким классам. Для этого достаточно указать у элемента второй класс через пробел. Например, вот так:
<p></p>
А уже в CSS для селектора big задать необходимые ему правила.
Где это может использоваться?
Ну к примеру, если вы хотите не только указать цвет вашему элементу, но так же ещё и установить размер шрифта. Но вы не хотите делать это для всех элементов с классом green, а хотите использовать данное правило только для определённого абзаца. Например, так:
На скриншоте видно, что определённому абзацу, среди остальных окрашенных зелёным цветом, я решил задать ещё больший размер шрифта. Но я не мог прописать правило font-size для селектора с классом green. Потому что в этом случае, у меня бы у всех абзацев, имеющих класс green, увеличился размер шрифта.
На сегодня пожалуй всё, потому что всё, что я хотел вам рассказать о классах, уже рассказал. До встречи в следующих уроках!