In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section: Example My Important Heading This is some important text. 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»: London is the capital of England. Paris is the capital of France. Tokyo is the capital of Japan. Multiple Classes HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified. In the following example, the first 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 London Different Elements Can Share Same Class Different HTML elements can point to the same class name. In the following example, both and 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. Chapter Summary The HTML class attribute specifies one or more class names for an element Classes are used by CSS and JavaScript to select and access specific elements The class attribute can be used on any HTML element The class name is case sensitive Different HTML elements can point to the same class name JavaScript can access elements with a specific class name with the getElementsByClassName() method Источник Идентификаторы и классы Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами. В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id. Например, следующий id-селектор сопоставляется элементу , значение атрибута id которого равно chapter7: После описания идентификатора его следует включить в состав тега:
Заголовок второго уровня с id
Пример: Применение идентификатора Заголовок второго уровня с id Заголовок второго уровня Заголовок второго уровня
#chapter7
Заголовок второго уровня с id
Заголовок второго уровня
Заголовок второго уровня
Классы Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент. Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.): После описания класса его следует включить в открывающий тег элемента: Пример: Применение атрибутов id и class Заголовок второго уровня с id и второго уровня с второго уровня Заголовок второго уровня с orange
h2#chapter7 h2.orange .test
Заголовок второго уровня с id и >Заголовок второго уровня с второго уровня
Заголовок второго уровня с orange
Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class. Задачи Атрибут class Задача HTML:
.test
Атрибуты id и class
Атрибут id (идентификатор) используется для идентификации.
Атрибут class (класс) используется для классификации.
Селектор класса Создайте селектор класса с именем «test». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса «test» заголовку и встроенному элементу . Задача HTML:
Атрибут class
Атрибут class (класс) используется для классификации.
Цвет для идентификатора Напишите стилевое правило к абзацу с идентификатором , благодаря которому цвет текста этого абзаца станет красным. Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Цвет для класса Напишите стилевое правило для класса , благодаря которому цвет текста элемента, к которому применен класс станет красным. Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Селектор идентификатора Создайте селектор id с именем «redlow». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем «redlow» заголовку . Задача HTML:
Атрибут id
Атрибут id (идентификатор) используется для идентификации, поэтому он на странице только один.
In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section: Example My Important Heading This is some important text. 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»: London is the capital of England. Paris is the capital of France. Tokyo is the capital of Japan. Multiple Classes HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified. In the following example, the first 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 London Different Elements Can Share Same Class Different HTML elements can point to the same class name. In the following example, both and 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. Chapter Summary The HTML class attribute specifies one or more class names for an element Classes are used by CSS and JavaScript to select and access specific elements The class attribute can be used on any HTML element The class name is case sensitive Different HTML elements can point to the same class name JavaScript can access elements with a specific class name with the getElementsByClassName() method Источник Идентификаторы и классы Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами. В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id. Например, следующий id-селектор сопоставляется элементу , значение атрибута id которого равно chapter7: После описания идентификатора его следует включить в состав тега:
Заголовок второго уровня с id
Пример: Применение идентификатора Заголовок второго уровня с id Заголовок второго уровня Заголовок второго уровня
#chapter7
Заголовок второго уровня с id
Заголовок второго уровня
Заголовок второго уровня
Классы Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент. Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.): После описания класса его следует включить в открывающий тег элемента: Пример: Применение атрибутов id и class Заголовок второго уровня с id и второго уровня с второго уровня Заголовок второго уровня с orange
h2#chapter7 h2.orange .test
Заголовок второго уровня с id и >Заголовок второго уровня с второго уровня
Заголовок второго уровня с orange
Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class. Задачи Атрибут class Задача HTML:
.test
Атрибуты id и class
Атрибут id (идентификатор) используется для идентификации.
Атрибут class (класс) используется для классификации.
Селектор класса Создайте селектор класса с именем «test». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса «test» заголовку и встроенному элементу . Задача HTML:
Атрибут class
Атрибут class (класс) используется для классификации.
Цвет для идентификатора Напишите стилевое правило к абзацу с идентификатором , благодаря которому цвет текста этого абзаца станет красным. Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Цвет для класса Напишите стилевое правило для класса , благодаря которому цвет текста элемента, к которому применен класс станет красным. Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Селектор идентификатора Создайте селектор id с именем «redlow». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем «redlow» заголовку . Задача HTML:
Атрибут id
Атрибут id (идентификатор) используется для идентификации, поэтому он на странице только один.
HTML атрибут class используется для определения класса для HTML элемента. Несколько элементов HTML могут совместно использовать один и тот же класс.
Использование атрибута class
Атрибут class часто используется для указания на название класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с указанным именем класса. В следующем примере мы имеем три элемента
с атрибутом class со значением «city». Все три элемента
будут одинаково стилизованные в соответствии с определением стиля .city в разделе head:
Пример
Лондон
Лондон — это столица Англии.
Париж
Париж — это столица Франции.
Токио
Токио — это столица Японии.
В следующем примере мы имеем два элемента с атрибутом class со значением «note». Оба элемента будут одинаково стилизованы в соответствие определению .note в разделе head:
Пример
Мой важный заголовок
Это какой-то важный текст.
Совет: Атрибут class может быть использован на любом HTML элементе. Примечание: Название класса чуствительно к регистру! Совет: Вы можете узнать намного больше про CSS в CSS Учебнике на нашем сайте W3Schools.
Синтаксис для класса
Создайте класс; напишите символ точки (.), а потом название класса. Потом определите свойства CSS в фигурных скобках <>:
Пример
Лондон — це столиця Англії.
Париж — це столиця Франції.
Токіо — це столиця Японії.
Несколько классов
Элементы HTML могут принадлежать более чем одному классу. Чтобы определить несколько классов, отделите названия классов пробелом, например
. Элемент будет стилизован в соответствии со всеми указанными классами. В следующем примере первый элемент принадлежит как классу city так и классу main и получает стили CSS с обеих классов:
Пример
Лондон
Различные элементы могут разделять один и тот же класс
Различные элементы HTML могут указывать на одно и то же название класса. В следующем примере как
так и
указывает на «city» класс и будет разделять одинаковый стиль:
Пример
Использование атрибута class в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов. JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName() :
Пример
Не волнуйтесь, если вы не понимаете код в приведенном выше примере. Вы узнаете больше о JavaScript в разделе HTML JavaScript или вы можете изучить JavaScript Учебник на нашем сайте W3Schools.
Резюме
HTML атрибут class определяет одно или несколько имен классов для элемента
Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
Атрибут class может применяться к любому элементу HTML
Имя класса чувствительно к регистру
Различные элементы HTML могут указывать на одно и то же название класса
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName()
HTML Упражнения
Вопросы для самоконтроля
Для чего необходим HTML-атрибут class ?
Сколько HTML-элементов могут совместно использовать один и тот же класс?
Имеет ли значение регистр для написания названия класса?
С помощью какого символа указывается название класса в CSS?
Могут ли HTML-элементы принадлежать больше чем одному классу?
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 elements with a class attribute with the value of «city». All of the three elements will be styled equally according to the .city style definition in the head section:
Example
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section:
Example
My Important Heading
This is some important text.
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»:
London is the capital of England.
Paris is the capital of France.
Tokyo is the capital of Japan.
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified.
In the following example, the first 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
London
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.
In the following example, both and
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.
Chapter Summary
The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the getElementsByClassName() method
Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами. В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id. Например, следующий id-селектор сопоставляется элементу , значение атрибута id которого равно chapter7:
После описания идентификатора его следует включить в состав тега:
Заголовок второго уровня с id
Пример: Применение идентификатора
Заголовок второго уровня с id
Заголовок второго уровня
Заголовок второго уровня
#chapter7
Заголовок второго уровня с id
Заголовок второго уровня
Заголовок второго уровня
Классы
Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент. Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):
После описания класса его следует включить в открывающий тег элемента:
Пример: Применение атрибутов id и class
Заголовок второго уровня с id и второго уровня с второго уровня
Заголовок второго уровня с orange
h2#chapter7 h2.orange .test
Заголовок второго уровня с id и >Заголовок второго уровня с второго уровня
Заголовок второго уровня с orange
Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class.
Задачи
Атрибут class
Задача HTML:
.test
Атрибуты id и class
Атрибут id (идентификатор) используется для идентификации.
Атрибут class (класс) используется для классификации.
Селектор класса
Создайте селектор класса с именем «test». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса «test» заголовку
и встроенному элементу .
Задача HTML:
Атрибут class
Атрибут class (класс) используется для классификации.
Цвет для идентификатора
Напишите стилевое правило к абзацу с идентификатором , благодаря которому цвет текста этого абзаца станет красным.
Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Цвет для класса
Напишите стилевое правило для класса , благодаря которому цвет текста элемента, к которому применен класс станет красным.
Задача HTML:
Это заголовок
Этот параграф будет выделен красным цветом.
Этот параграф НЕ будет выделен красным цветом.
Селектор идентификатора
Создайте селектор id с именем «redlow». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем «redlow» заголовку
.
Задача HTML:
Атрибут id
Атрибут id (идентификатор) используется для идентификации, поэтому он на странице только один.
