HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:
Example
In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:
Example
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our CSS Tutorial.
The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces <>:
Example
Create a class named «city»:
<h2 > <p>London is the capital of England.</p>
<h2 > <p>Paris is the capital of France.</p>
<h2 > <p>Tokyo is the capital of Japan.</p>
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:
Example
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.
In the following example, both <h2> and <p> point to the "city" class and will share the same style:
Example
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:
Example
Click on a button to hide all elements with the class name "city":
Don’t worry if you don’t understand the code in the example above.
You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.
Классы в CSS– удобный путеводитель
В сегодняшней статье мы рассмотрим классы в CSS и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.
Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.
CSS классы — когда их использовать
Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы . Для этого необходимо выполнить два шага:
Шаг 1 — добавить класс в HTML
Чтобы повлиять на внешний вид HTML-страницы , вы должны сначала разметить элементы с атрибутом class=»class-name» . Вот пример:
В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS :
Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.
В этом примере использовалось свойство margin-right:10px . Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.
Такое сочетание должно дать вам что-то вроде этого:
Если вы не укажете класс
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после « Контейнер 3 »:
Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname < >. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class !
Использование более чем одного класса
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
Расположение каскадом
Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red» . Иначе class=»red» будет применяться до class=»box» . Надеюсь, это понятно!
Изменим наш код CSS :
Поскольку у каждого из трех контейнеров есть CSS класс .box , к ним всем применяются свойства, прописанные в div.box . Но к каждому <div> применяется также дополнительный класс ( red , green , или blue ). Конечный результат:
Примечание: несмотря на то, что div.box определяет background-color:#cccccc ; « цветовые » классы определяются после него. Например, в box red свойство background-color , указанном в div.red , перезаписывает аналогичное свойство в div.box . Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.
CSS классы при создании макета сайта
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
- Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail < width:200px;height:200px; >;
- Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button <> ;
- Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover < >a.nav: Hover <> .
Классы DR CSS; TL
Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS . Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS .
И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML , действительно имеет значение, так что следите за этим.
Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!
ВЛ Виктория Лебедева автор-переводчик статьи « Using CSS Classes – A Handy Guide »
class
Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName .
Интерактивный пример
Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, атрибут описывает атрибут, а не курсив, хотя элемент этого класса может быть представлен курсивом. Семантические имена остаются логичными даже при изменении представления страницы.
HTML
Классы и идентификаторы
Классы и идентификаторы облегчают обращение к элементам HTML из сценариев и таблиц стилей. Атрибут class может использоваться в одном или нескольких тегах и используется CSS для стилизации. Однако идентификаторы предназначены для обозначения одного элемента, что означает, что один и тот же идентификатор никогда не должен использоваться дважды. Идентификаторы обычно используются с JavaScript и внутренними ссылками документа и не рекомендуется в CSS. В этом разделе содержатся полезные пояснения и примеры относительно правильного использования атрибутов класса и идентификатора в HTML.
Синтаксис
- class2 class3"
параметры
| параметр | подробности |
|---|---|
| учебный класс | Указывает класс элемента (не уникальный) |
| Я бы | Указывает идентификатор элемента (уникальный в том же контексте) |
замечания
- Оба class и id являются глобальными атрибутами и поэтому могут быть привязаны к любому элементу HTML.
- Имена классов должны начинаться с буквы (AZ или az), за которой могут следовать буквы, цифры, дефисы и символы подчеркивания.
- В HTML5 атрибуты class и id могут использоваться для любого элемента. В HTML 4.0.1 они были недоступны для тегов <base> , <head> , <html> , <meta> , <param> , <script> , <style> и <title> .
- Элемент может иметь один или несколько классов. Классы разделяются пробелами и сами не могут содержать пробелы.
- Элемент может иметь только один идентификатор, и он должен быть уникальным в своем контексте (т.е. веб-странице). Идентификаторы также не могут содержать пробелы.
Предоставление элемента класса
Классы — это идентификаторы для элементов, которым они назначены. Используйте атрибут class чтобы назначить класс элементу.
Чтобы назначить несколько классов элементу, отделите имена классов пробелами.
Использование классов в CSS
Классы могут использоваться для стилизации определенных элементов без изменения всех элементов такого типа. Например, эти два элемента span могут иметь совершенно разные стили:
Классы с одинаковым именем могут быть предоставлены любому количеству элементов на странице, и все они получат стиль, связанный с этим классом. Это всегда будет верно, если вы не укажете элемент внутри CSS.
Например, у нас есть два элемента: оба с highlight класса:
Если наш CSS такой, как показано ниже, то зеленый цвет будет применен к тексту в обоих элементах:
Однако, если мы хотим только нацеливать div на highlight класса, мы можем добавить определенность, как показано ниже:
Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight ), а не элементы с классами (например, div.highlight ).
Как и любой другой селектор, классы могут быть вложенными:
Вы также можете связать селектор классов только с элементами, имеющими комбинацию из нескольких классов. Например, если это наш HTML:
И мы хотим покрасить эту определенную часть текста розовым, мы можем сделать следующее в нашем CSS:
Предоставление элемента идентификатора
Атрибут ID элемента — это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при связывании (с использованием привязки), написании сценариев или стилизации (с помощью CSS).
У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:
Браузеры сделают все возможное, чтобы сделать этот код, но неожиданное поведение может возникнуть при стилизации с помощью CSS или добавлении функциональности с помощью JavaScript.
Чтобы ссылаться на элементы по их идентификатору в CSS, префикс ID с # .
Чтобы перейти к элементу с идентификатором на заданной странице, добавьте # с именем элемента в URL.
Эта функция поддерживается в большинстве браузеров и не требует дополнительного JavaScript или CSS для работы.
Проблемы, связанные с дублируемыми идентификаторами
Наличие более одного элемента с одним и тем же идентификатором — проблема с устранением неполадок. Парсер HTML обычно пытается отобразить страницу в любом случае. Обычно ошибка не возникает. Но темпы могут оказаться на неправильной веб-странице.
Селекторы CSS все еще работают
Но JavaScript не справляется с обоими элементами:
В этом случае переменная html несет только первое содержимое div ("a") .
Допустимые значения
Для идентификатора
Единственными ограничениями на значение id являются:
- он должен быть уникальным в документе
- он не должен содержать пробелов
- он должен содержать хотя бы один символ
Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включают специальные символы, что угодно. Просто нет пробелов.
Таким образом, они действительны:
Это также неверно, если включено в тот же документ:
Значение id должно начинаться с буквы, которая затем может выполняться только:
- буквы (AZ / az)
- цифры (0-9)
- дефисы ("-")
- подчеркивания ("_")
- colons (":")
- периоды (".")
Ссылаясь на первую группу примеров в вышеприведенном HTML5, допустимо только одно:
Они также действительны:
Опять же, если он не начинается с буквы (в верхнем или нижнем регистре), это недействительно.
Для класса
Правила для классов по существу те же, что и для id . Разница в том, что значения class не обязательно должны быть уникальными в документе.
Ссылаясь на приведенные выше примеры, хотя это недопустимо в одном документе:
Это совершенно нормально:
Важное примечание. Как значения идентификатора и класса обрабатываются вне HTML
Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML.
Использование чисел, знаков препинания или специальных символов в значении id или class может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярные выражения.
Например, хотя в HTML5 допустим следующий id :
. это неверно в CSS:
4.1.3. Персонажи и случай
В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание ( _); они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра . (выделено мной)
В большинстве случаев вы можете избегать символов в контекстах, где у них есть ограничения или особый смысл.
Ссылки W3C
- 3.2.5.1 Атрибут id
- 3.2.5.7 Атрибут class
- 6.2 Основные типы SGML
report this ad