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 Источник
A paragraph. Example Using JavaScript to add a yellow background color to the first element with class=»example» (index 0). Example Using JavaScript to add the «mystyle» class to an element with > Related Pages COLOR PICKER Report Error If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: Thank You For Helping Us! Your message has been sent to W3Schools. Top Tutorials Top References Top Examples Get Certified W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy. Источник
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 Источник
A paragraph. Example Using JavaScript to add a yellow background color to the first element with class=»example» (index 0). Example Using JavaScript to add the «mystyle» class to an element with > Related Pages COLOR PICKER Report Error If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: Thank You For Helping Us! Your message has been sent to W3Schools. Top Tutorials Top References Top Examples Get Certified W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy. Источник
HTML атрибут class используется для указания класса для элемента HTML.
Несколько HTML элементов могут совместно использовать один и тот же класс.
Использование атрибута class
Атрибут class часто используется для указания на имя класса в таблице стилей. Он также может быть использован JavaScript для доступа и манипулирования элементами с определенным именем класса.
В следующем примере мы имеем три элемента с атрибутом class и со значением «city». Все три элемента будут стилизованы одинаково в соответствии с определением стиля .city в головном разделе:
Пример
Лондон
Лондон — столица Англии.
Париж
Париж — столица Франции.
Токио
Токио — столица Японии.
Лондон
Париж
Токио
Использование атрибута class для встроенных элементов
Атрибут class также может быть использован для встроенных элементов:
Пример
Мой Important Заголовок
Это уже кое-что important text.
Совет: Атрибут class может быть использован на каждом HTML элементе.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.
Определение стилей для класса
Чтобы определить свойства CSS для класса, напишите точку (.) символ, за которым следует название класса. Затем добавьте свойства CSS в фигурные скобки <>:
Пример
Стиль всех элементов с именем класса «city»:
class=»city»>Лондон
Лондон — столица Англии.
class=»city»>Париж
Париж — столица Франции.
class=»city»>Токио
Токио — столица Японии.
Лондон
Париж
Токио
Несколько классов
HTML элементы могут иметь более одного имени класса.
Чтобы указать несколько классов, разделите имена классов пробелом, например . Это позволяет объединить несколько классов CSS для одного HTML элемента.
В следующем примере первый элемент принадлежит обоим классам city , а также к классу main , и получит стили CSS от обоих классов:
Пример
Лондон
Различные элементы могут иметь один и тот же класс
Различные HTML элементы могут указывать на одно и то же имя класса.
В следующем примере оба варианта и
указывает на то, что класс «city» будет разделять один и тот же стиль:
Пример
Использование атрибута class в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName() :
Пример
Нажмите на кнопку, чтобы скрыть все элементы с именем класса «city»:
Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
Вы узнаете больше о JavaScript в разделе HTML JavaScript, или вы можете изучить, JavaScript Учебник.
Краткое содержание главы
HTML атрибут class указывает одно или несколько имен классов для элемента
Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
Атрибут class может быть использован для любого HTML элемента
Имя класса чувствительно к регистру
Различные элементы HTML могут указывать на одно и то же имя класса
JavaScript может получить доступ к элементам с определенным именем класса с помощью мтода getElementsByClassName()
HTML Упражнения
Мы только что запустили SchoolsW3 видео
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
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
The class attribute specifies one or more class names for an element.
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
Browser Support
Syntax
Attribute Values
Value
Description
classname
Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. . This allows you to combine several CSS classes for one HTML element.
Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens («-«), and underscores («_»)
More Examples
Example
Add multiple classes to one HTML element:
Header 1
A paragraph.
Example
Using JavaScript to add a yellow background color to the first element with class=»example» (index 0).
Example
Using JavaScript to add the «mystyle» class to an element with >
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
