- HTML Классы
- Использование атрибута class
- Пример
- Лондон
- Париж
- Токио
- Лондон
- Париж
- Токио
- Использование атрибута class для встроенных элементов
- Пример
- Мой Important Заголовок
- Определение стилей для класса
- Пример
- class=»city»>Лондон
- class=»city»>Париж
- class=»city»>Токио
- Лондон
- Париж
- Токио
- Несколько классов
- Пример
- Лондон
- Различные элементы могут иметь один и тот же класс Различные 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 и политика конфиденциальности. Источник
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 Attribute The class attribute assigns one or more classnames to an element. Classnames are defined in a stylesheet or in a local element. Classes, i.e. classnames, are used to style elements. Example .pill .turquoise .turquoise:focus, .turquoise:active, .turquoise:hover Using class Classes (i.e. classnames) are used for styling elements. Multiple classnames are separated by a space. JavaScript uses classes to access elements by classname. Syntax Values Value Description classname One or more space-separated classnames. A classname can only have alphanumeric characters with hypens (-) and underscores (_). Classnames are case-sensitive, but the convention is to use lower-case names. More Examples .indigo < background: #f6f8ff; >.red-border
let toggle = () => Elements using the class attribute The class attribute is a global attribute that can be applied to any element. Click on any tag for an example of that element using an class attribute. Tag with class Description Creates a link (hyperlink) to another page Defines an abbreviation Specifies contact information for the page’s author Defines a container for independent and self contained text Creates a content area that is related to the primary content on a page Creates a player for sound such as music, sound effects, or others Specifies bold text Defines a section with text quoted from another source Specifies a container for the page’s content with text, links, images, etc. Creates a clickable button that can contain text or an image Creates a graphics container where JavaScript can draw. Specifies a caption for a table An element that is used to display computer code Specifies column properties for a table Adds a description of a term or name to a element Marks deleted text A control that can show and hide additional details Creates a division or section on a page Defines a description list Adds a term or name to a element Marks text that needs emphasis Creates a container for an external resource or plug-in Groups related form elements and displays a box with a legend around these Adds a caption to a (image) element Displays self-contained content, usually an image Defines a footer section on a page or a section of a page — Defines text headings in 6 different sizes Defines a header section on a page or a section of a page Creates a horizontal line Specifies italic text Creates a frame in which another web page can be embedded Creates an image Creates an input field in which data can be entered Marks inserted text Specifies keyboard input often with CTRL, SHIFT, or ALT Creates a label or brief description before input elements Defines a caption for a fieldset Defines a list item. Used in and elements Specifies a container for the main content of the page Displays marked or highlighted text Creates a measurement control, like a guage Creates a container for navigation links Embeds external objects in a page, such as, audio, video, image, or PDF Creates a numerically or alphabetically ordered list Groups related options in a element (dropdown control) Adds an item to a element (dropdown control) Displays output results of a calculation Creates a paragraph Adds images with a bit more flexibility than the element Displays pre-formatted text in fixed-width font — usually computer code Creates a control that displays progress of a task Creates a short quotation enclosed with quotation marks Displays sample output from coumputer code Defines a piece of content that can stand on its own Creates a dropdown control Displays text in a smaller font size Container for one or more inline text elements Indicates text that is important or with high urgency Marks subscript text where characters display lower and in smaller font Adds a heading to a element. Clicking it toggles the details Marks superscript text where characters display higher and in smaller font Creates an vector image Creates an HTML table with rows and colums, much like a spreadsheet Marks the table body in an HTML table Creates an HTML table cell Creates a multi-line text input control, for example for messages Marks the table footer in an HTML table Creates an HTML table header cell Marks the header rows in an HTML table Creates a human-readable date/time item Creates a table row with either or elements Specifies underlined text Creates an unordered, bulleted list Defines its content as a variable Creates a video player on a page
HTML Классы
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 и политика конфиденциальности.
A paragraph.
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.
HTML class Attribute
The class attribute assigns one or more classnames to an element. Classnames are defined in a stylesheet or in a local element. Classes, i.e. classnames, are used to style elements.
Example
.pill .turquoise .turquoise:focus, .turquoise:active, .turquoise:hover Using class
Classes (i.e. classnames) are used for styling elements. Multiple classnames are separated by a space. JavaScript uses classes to access elements by classname.
Syntax
Values
| Value | Description |
|---|---|
| classname | One or more space-separated classnames. A classname can only have alphanumeric characters with hypens (-) and underscores (_). Classnames are case-sensitive, but the convention is to use lower-case names. |
More Examples
.indigo < background: #f6f8ff; >.red-border
let toggle = () => Elements using the class attribute
The class attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an class attribute.
| Tag with class | Description | ||
|---|---|---|---|
| Creates a link (hyperlink) to another page | |||
| Defines an abbreviation | |||
| Specifies contact information for the page’s author | |||
| Defines a container for independent and self contained text | |||
| Creates a content area that is related to the primary content on a page | |||
| Creates a player for sound such as music, sound effects, or others | |||
| Specifies bold text | |||
| Defines a section with text quoted from another source | |||
| Specifies a container for the page’s content with text, links, images, etc. | |||
| Creates a clickable button that can contain text or an image | |||
| Creates a graphics container where JavaScript can draw. | |||
| Specifies a caption for a table | |||
| An element that is used to display computer code | |||
| Specifies column properties for a table | |||
| Adds a description of a term or name to a element | |||
| Marks deleted text | |||
| A control that can show and hide additional details | |||
| Creates a division or section on a page | |||
| Defines a description list | |||
| Adds a term or name to a element | |||
| Marks text that needs emphasis | |||
| Creates a container for an external resource or plug-in | |||
| Groups related form elements and displays a box with a legend around these | |||
| Adds a caption to a (image) element | |||
| Displays self-contained content, usually an image | |||
| Defines a footer section on a page or a section of a page | |||
| — | Defines text headings in 6 different sizes | ||
| Defines a header section on a page or a section of a page | |||
| Creates a horizontal line | |||
| Specifies italic text | |||
| Creates a frame in which another web page can be embedded | |||
| Creates an image | |||
| Creates an input field in which data can be entered | |||
| Marks inserted text | |||
| Specifies keyboard input often with CTRL, SHIFT, or ALT | |||
| Creates a label or brief description before input elements | |||
| Defines a caption for a fieldset | |||
Defines a list item. Used in
elements | |||
| Specifies a container for the main content of the page | |||
| Displays marked or highlighted text | |||
| Creates a measurement control, like a guage | |||
| Creates a container for navigation links | |||
| Embeds external objects in a page, such as, audio, video, image, or PDF | |||
| Creates a numerically or alphabetically ordered list | |||
| Groups related options in a element (dropdown control) | |||
| Adds an item to a element (dropdown control) | |||
| Displays output results of a calculation | |||
| Creates a paragraph | |||
| Adds images with a bit more flexibility than the | |||
| Displays pre-formatted text in fixed-width font — usually computer code | |||
| Creates a control that displays progress of a task | |||
| Creates a short quotation enclosed with quotation marks | |||
| Displays sample output from coumputer code | |||
| Defines a piece of content that can stand on its own | |||
| Creates a dropdown control | |||
| Displays text in a smaller font size | |||
| Container for one or more inline text elements | |||
| Indicates text that is important or with high urgency | |||
| Marks subscript text where characters display lower and in smaller font | |||
| Adds a heading to a element. Clicking it toggles the details | |||
| Marks superscript text where characters display higher and in smaller font | |||
| Creates an vector image | |||
| Creates an HTML table with rows and colums, much like a spreadsheet | |||
| Marks the table body in an HTML table | |||
| Creates an HTML table cell | |||
| Creates a multi-line text input control, for example for messages | |||
| Marks the table footer in an HTML table | |||
| Creates an HTML table header cell | |||
| Marks the header rows in an HTML table | |||
| Creates a human-readable date/time item | |||
| Creates a table row with either | or | elements | |
| Specifies underlined text | |||
| Creates an unordered, bulleted list | |||
| Defines its content as a variable | |||
| Creates a video player on a page |