Html класс: Атрибут class | htmlbook.ru

Содержание

Атрибут class | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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>

Идентификаторы | htmlbook.ru

Идентификатор (называемый также «ID
селектор») определяет уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис применения идентификатора следующий.

#Имя идентификатора { свойство1:
значение; свойство2: значение; … }

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами,
встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого
слова у тега используется атрибут id, значением
которого выступает имя идентификатора (пример 9.1). Символ решётки при
этом уже не указывается.

Пример 9.1. Использование идентификатора

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */ 
   }
  </style>
 </head> 
 <body> 
  <div>
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь.  Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>

 </body> 
</html>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

Рис. 9.1. Результат применения идентификатора

Как и при использовании классов, идентификаторы можно
применять к конкретному тегу. Синтаксис при этом будет следующий.

Тег#Имя идентификатора { свойство1:
значение; свойство2: значение; … }

Вначале указывается имя тега, затем без пробелов символ решётки и название
идентификатора. В примере 9.2 показано использование идентификатора применительно
к тегу <p>.

Пример 9.2. Идентификатор совместно с тегом

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   P {
    color: green; /* Зеленый цвет текста */
    font-style: italic; /* Курсивное начертание текста */
   }
   P#opa { 
    color: red; /* Красный цвет текста */
    border: 1px solid #666; /* Параметры рамки */
    background: #eee; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
   <p>Обычный параграф</p> 
   <p>Параграф необычный</p>
 </body> 
</html>

Результат данного примера показан на рис.  9.2.

Рис. 9.2. Вид текста после применения стиля

В данном примере вводится стиль для тега <p> и для такого же тега, но с указанием идентификатора opa.

Вопросы для проверки

1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?

  1. Никогда, это недопустимо.
  2. В любом случае.
  3. Только, если они применяются к одному элементу.
  4. Только, если они применяются к разным элементам.
  5. Только, если в коде они встречаются один раз.

2. Какое имя идентификатора написано неправильно?

  1. id_1id1
  2. a-a-a-1-1-1
  3. L0g0
  4. bla-bla
  5. кrevedko

3. Какая ошибка содержится в следующем коде?

<div>
<div><a href=»209.html»>Подключение к MySQL через PHP</a></div>
<div><a href=»213.html»>Создание таблиц в phpMyAdmin</a></div>
<div><a href=»211. html»>Структура базы данных</a></div>
</div>

  1. Имя класса написано неверно.
  2. Имена идентификаторов написаны неверно.
  3. Неправильное вложение тегов.
  4. Повторяющиеся идентификаторы.
  5. Разные идентификаторы для однотипных элементов.

4. Как корректно задать стиль для тега <div> с идентификатором loom?

  1. loom { font-size: bold; }
  2. div { font-size: bold; }
  3. .loom { font-size: bold; }
  4. #loom# { font-size: bold; }
  5. #loom { font-size: bold; }

Ответы

1. В любом случае.

2. кrevedko

3. Повторяющиеся идентификаторы.

5. #loom { font-size: bold; }

Псевдоклассы | htmlbook.ru

Псевдоклассы определяют динамическое состояние элементов, которое изменяется
с помощью действий пользователя, а также положение в дереве
документа. Примером такого состояния служит текстовая ссылка, которая меняет
свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов
браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить
разные динамические эффекты на странице.

Синтаксис применения псевдоклассов следующий.

Селектор:Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует
двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы
к именам идентификаторов или классов (A.menu:hover {color:
green}), а также к контекстным селекторам (.menu A:hover
{background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.

:link

Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё
не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому
ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован
переход ранее.

Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15. 1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   INPUT:focus { 
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Черный текст"></p>
   <p><input type="text" value="Черный текст"></p>
  </form>
 </body>
</html>

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега <input>.
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.

Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   A:link { 
    color: #036; /* Цвет непосещенных ссылок */
   }
   A:visited { 
    color: #606; /* Цвет посещенных ссылок */
   }
   A:hover { 
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
   }
   A:active { 
    color: #ff0; /* Цвет активных ссылок */
   }
  </style>
 </head>
 <body>
  <p>
   <a href="1. html">Ссылка 1</a> | 
   <a href="2.html">Ссылка 2</a> | 
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками.
При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover,
в противном случае посещённые ссылки не будут изменять свой цвет при наведении
на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   table { border-spacing: 0; }
   td { padding: 4px; }
   tr:hover {
    background: #fc0; /* Меняем цвет фона строки таблицы */ 
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <th></th>
    <th>Пики</th>
    <th>Трефы</th>
    <th>Бубны</th>
    <th>Червы</th>
   </tr>
   <tr> 
    <td>Чебурашка</td>
    <td>5</td><td>2</td><td>4</td><td>2</td>
   </tr>
   <tr> 
    <td>Крокодил Гена</td>
    <td>2</td><td>7</td><td>1</td><td>3</td>
   </tr>
   <tr> 
    <td>Шапокляк</td>
    <td>5</td><td>4</td><td>3</td><td>1</td>
   </tr>
   <tr> 
    <td>Крыса Лариса</td>
    <td>1</td><td>0</td><td>5</td><td>7</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан ниже (рис.  15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента
в дереве документа и применяют к нему стиль в зависимости от его статуса.

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве
элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код
(пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style type="text/css">
   B:first-child {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>

  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
  adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt 
  ut lacreet dolore magna aliguam erat volutpat. </p>

  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
  consequat</b>.</p>

 </body>
</html>

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется
к селектору B и устанавливает для него красный цвет
текста. Хотя контейнер <b> встречается в первом
абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е.
текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку
родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена
красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.

Псевдокласс :first-child удобнее всего использовать
в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных
элементов. Например, в некоторых случаях красную строку для первого абзаца
текста не устанавливают, а для остальных абзацев добавляют отступ первой строки.
С этой целью применяют свойство text-indent с нужным
значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него
отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   P {
    text-indent: 1em; /* Отступ первой строки */
   }
   P:first-child {
    text-indent: 0; /* Для первого абзаца отступ убираем */
   }
  </style>
 </head>
 <body>

  <p>Историю эту уже начали забывать, хотя находились горожане, которые 
  время от времени рассказывали ее вновь прибывшим в город посетителям.</p>
  <p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее 
  в действительности событие.  И, тем не менее, ни один человек не решался 
  заикнуться о ней с наступлением темноты.</p>
  <p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
 </body>

</html>

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

В данном примере первый абзац текста не содержит отступа первой строки, а для
остальных он установлен.

Псевдоклассы, задающие язык текста

Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.

:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

Элемент:lang(язык) { … }

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   P {
    font-size: 150%; /* Размер текста */ 
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ 
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, 
  Dieu le veut</q>.</p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>. </p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>

 </body>
</html>

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Рис. 15.6. Разные кавычки для разных языков

Вопросы для проверки

1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс :link.
  3. Псевдокласс :visited стоит после :hover.
  4. Псевдокласс :active стоит после :visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

  1. К непосещённым ссылкам.
  2. К посещённым ссылкам.
  3. К любым ссылкам при наведении на них курсора мыши.
  4. К посещённым ссылкам при наведении на них курсора мыши.
  5. Ни к одному элементу.

Ответы

1. Псевдокласс :visited стоит после :hover.

2. :first-child

3. Ни к одному элементу.

Классы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.07.0+1.0+3.5+1. 0+1.0+1.0+1.0+

Версии CSS

Описание

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

Синтаксис

E.Имя_класса { Описание правил стиля }
.Имя_класса { Описание правил стиля }

Здесь E — обозначает любой тег. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class.

Пример

HTML5CSS 2.1IECrOpSaFx

<!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.0 классы не работают, если их имена начинаются с дефиса (-) или символа подчеркивания (_).

Общий HTML атрибут class

Атрибут class определяет один или несколько имен классов для HTML элемента.

В основном атрибут class используется для указания на класс в каскадной таблице стилей. Тем не менее, он также может использоваться скриптами JavaScript для манипулирования (посредством HTML DOM) элементами HTML с заданным классом.

В HTML5 атрибут class можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут class нельзя использовать с элементами <base>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>.

Синтаксис атрибута

<element>

Значения атрибута

ЗначениеОписание
имя_класса

Одно или несколько имен классов. Чтобы присвоить несколько классов, необходимо эти имена классов разделять пробелом, например, <span>. Это позволяет одному HTML элементу присвоить несколько CSS классов.

Имя класса:

  • должно начинаться с латинской буквы A-Z или a-z
  • за которой может следовать: латинские буквы (A-Za-z), цифры (0-9), дефис («-«) и символ подчеркивания («_»)
  • в HTML все значения регистронезависимы

Пример использования атрибута

Использование атрибута class в HTML документе:


<html>
<head>
   <style>
      h2. intro {
         color: blue;
      }
      p.important {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Заголовок 1</h2>
   <p>Параграф.</p>
   <p>Это очень важный параграф. :)</p>
</body>
</html>

class — HTML | MDN

Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName.

Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, атрибут описывает атрибут, а не курсив, хотя элемент этого класса может быть представлен курсивом. Семантические имена остаются логичными даже при изменении представления страницы.

СпецификацияСтатусКомментарий
HTML Living Standard
Определение ‘class’ в этой спецификации.		Живой стандартНет изменений c последнего снимка, HTML 5.1
HTML 5.1
Определение ‘class’ в этой спецификации.		РекомендацияСнимок HTML Living Standard, никаких изменений от HTML5
HTML5
Определение ‘class’ в этой спецификации.		РекомендацияСнимок HTML Living Standard. Начиная с HTML 4.01 Specification, class теперь это истинный глобальный атрибут.
HTML 4.01 Specification
Определение ‘class’ в этой спецификации.		РекомендацияПоддерживается на всех элементах, кроме <base>, <basefont>, <head>, <html>, <meta>, <param> (en-US), <script>, <style>, и <title>.

BCD tables only load in the browser

Атрибут class — классы элемента

Атрибут class задает один или несколько классов для элемента
(под элементом имеется ввиду тег).

Это делается для того, чтобы затем обратиться через CSS к группе элементов, у которых задан
одинаковый класс, и применить для него определенные свойства
(к примеру, сменить цвет текста,
размер шрифта и так далее).

Существует также атрибут id, который
подобно атрибуту class позволяет выбирать элементы на HTML странице.

Разница между атрибутом class и атрибутом id
в том, что class выбирает группу элементов (даже если он дан одному элементу — его
в последствии можно дать и другому), а id выбирает уникальный элемент (больше
элемента с таким id не должно быть на странице сайта, иначе будет конфликт).

Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые
повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код).
Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут
появится в дальнейшем — давайте этому элементу класс.
Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время
есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript,
но она не является общепринятой.

Элементу можно задать несколько классов, в этом случае их
следует перечислять через пробел.

Названия классов должны быть набраны английскими буквами, цифрами, без пробелов
(пробел отделяет классы друг от друга, вместо него можно использовать подчеркивание или дефис).
Классы не должны начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).

Имена классам следует давать на английском языке (а не на русском, просто английскими буквами!).
Имена должны быть осмысленными, отражать суть класса.

Пример

Давайте всем абзацам с классом test зададим красный цвет текста:

<p>Абзац с классом test. </p>
<p>Контрольный абзац без класса.</p>
.test {
color: red;
}

:

Пример . Несколько классов для элемента

А здесь давайте первому абзацу зададим несколько классов — test1 и test2
(запишем их через пробел). Класс test1 задает красный
цвет тексту, а класс test2
задает размер шрифта в 20px.
Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему
абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px).
Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px:

<p>Абзац с двумя классами test1 и test2.</p>
<p>Абзац с классом test1.</p>
<p>Абзац с классом test2.</p>
<p>Контрольный абзац без классов.</p>
. test1 {
color: red;
}
.test2 {
font-size: 20px;
}

:

HTML-классов — Атрибут класса

Атрибут класса HTML является
используется для указания класса для элемента HTML.

Несколько элементов HTML могут использовать один и тот же класс.

Использование атрибута класса

Атрибут класса часто используется для указания
к имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и
манипулировать элементами с определенным именем класса.

В следующем примере у нас есть три элемента


с атрибутом класса со значением
"город".Все три


элементы будут одинаково стилизованы в соответствии с .city
определение стиля в головном разделе:

Пример

.city {
цвет фона: помидор;
цвет: белый;
граница: сплошной черный цвет 2px;
маржа: 20 пикселей;
отступ: 20 пикселей;
}

Лондон

Лондон - столица Англии.

Париж

Париж - столица Франции.

Токио

Токио - столица Японии.


Попробуй сам "

В следующем примере у нас есть два элемента
с атрибутом класса со значением
"Примечание".Оба
элементы будут иметь одинаковый стиль в соответствии с . примечание .
определение стиля в головном разделе:

Пример

. Примечание {
размер шрифта: 120%;
цвет: красный;
}

Мой

Важный заголовок

Это какой-то важный текст.


Попробуй сам "

Совет: Атрибут class можно использовать для любого HTML-элемента .

Примечание: Имя класса чувствительно к регистру!

Совет: Вы можете узнать больше о CSS в нашем Руководстве по CSS.

Синтаксис для класса

Для создания класса; напишите символ точки (.), за которым следует
название класса.
Затем определите свойства CSS в фигурных скобках {}:

Пример

Создайте класс с именем "city":

. Город {
цвет фона: помидор;
цвет: белый;
отступ: 10 пикселей;
}

Лондон

Лондон - столица Англии.

Париж

Париж - столица Франции.

Токио

Токио - столица Японии.


Попробуй сам "

Несколько классов

HTML-элементов могут принадлежать более чем к одному классу.

Чтобы определить несколько классов, разделите имена классов пробелом, например

.Элемент будет оформлен в соответствии со всеми
указанные классы.

В следующем примере первый элемент

принадлежит обоим
класс city , а также класс main ,
и получит стили CSS от обоих классов:

Пример

Лондон

Париж

Токио

Попробуй сам "

Различные элементы могут иметь один и тот же класс

Различные элементы HTML могут указывать на одно и то же имя класса.

В следующем примере и

, и


указывает на "городской" класс
и будут использовать тот же стиль:

Пример

Париж

Париж - столица Франции

Попробуй сам "

Использование атрибута class в JavaScript

Имя класса также может использоваться JavaScript для выполнения определенных задач для
конкретные элементы.

JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName () :

Пример

Нажмите кнопку, чтобы скрыть все элементы с именем класса
«город»:

Попробуй сам "

Не беспокойтесь, если вы не понимаете код в приведенном выше примере.

Вы узнаете больше о JavaScript в нашей главе HTML JavaScript, или вы можете изучить наши
Учебник по JavaScript.

Краткое содержание главы

  • Атрибут HTML class определяет один или
    другие имена классов для элемента

    • Классы

  • используются CSS и JavaScript для выбора и доступа к определенным
    элементы
  • Атрибут класса можно использовать на любом
    HTML-элемент
  • Имя класса чувствительно к регистру
  • Различные элементы HTML могут указывать на одно и то же имя класса
  • JavaScript может получить доступ к элементам с определенным именем класса с помощью функции getElementsByClassName ()
    метод

Упражнения HTML

HTML - Атрибут id

Используется атрибут HTML id
для указания уникального идентификатора HTML-элемента.

У вас не может быть более одного элемента с одинаковым идентификатором в
HTML-документ.

Использование атрибута id

Атрибут id определяет уникальный идентификатор
для элемента HTML. Значение id
Атрибут должен быть уникальным в HTML-документе.

Атрибут id используется для указания
к определенному объявлению стиля в таблице стилей. Он также используется JavaScript для доступа и
манипулировать элементом с определенным идентификатором.

Синтаксис идентификатора: напишите символ решетки (#), за которым следует имя идентификатора.
Затем определите свойства CSS в фигурных скобках {}.

В следующем примере у нас есть элемент

, который указывает на
имя id
"myHeader". Это


элемент будет оформлен в соответствии с #myHeader
определение стиля в головном разделе:

Пример

#myHeader {
цвет фона: светло-голубой;
цвет: черный;
отступ: 40 пикселей;
выравнивание текста: центр;
}

Мой
Заголовок


Попробуй сам "

Примечание: Имя идентификатора чувствительно к регистру!

Примечание: Имя идентификатора должно содержать хотя бы один
символ, не может начинаться с числа и не должен содержать пробелов (пробелы, табуляции,
и т. п.).

Разница между классом и идентификатором

А
имя класса может использоваться несколькими элементами HTML, в то время как имя идентификатора должно быть только
используется одним элементом HTML
на странице:

Пример

/ * Стиль элемента с идентификатором "myHeader"
* /
#myHeader {
background-color: lightblue;
черный цвет;
набивка:
40px;
выравнивание текста: по центру;
}

/ * Стиль все
элементы с именем класса «city» * /
.город
 {
фоновый цвет: помидор;
цвет: белый;
отступ: 10 пикселей;
}

Мой
Города

Лондон

Лондон - столица Англии.

Париж

< / h3>

Париж - столица Франции.

Токио

Токио - столица Японии.

Попробуй сам "

HTML-закладки с идентификаторами и ссылками

Закладки

HTML используются, чтобы позволить читателям переходить к определенным частям веб-страницы.

Закладки могут пригодиться, если ваша страница очень длинная.

Чтобы использовать закладку, вы должны сначала создать ее, а затем добавить ссылку
к нему.

Затем при щелчке по ссылке страница прокручивается до места с
закладка.

Пример

Сначала создайте закладку с атрибутом id :

Глава 4

Затем добавьте ссылку на закладку («Перейти к главе 4») на той же странице:

Или добавьте ссылку на закладку («Перейти к главе 4») с другой страницы:

Перейти к главе 4

Использование атрибута id в JavaScript

Атрибут id также может использоваться JavaScript для выполнения
некоторые задачи для этого конкретного элемента.

JavaScript может получить доступ к элементу с определенным идентификатором с помощью метода getElementById () :

Пример

Используйте атрибут id для управления текстом с помощью JavaScript:

Попробуй сам "

Краткое содержание главы

  • Атрибут id используется для указания уникального идентификатора
    для элемента HTML
  • Значение идентификатора
    атрибут должен быть уникальным в HTML-документе
  • The id
    Атрибут используется CSS и JavaScript для стилизации / выбора определенного элемента
  • Значение идентификатора
    атрибут чувствителен к регистру
  • The id
    атрибут также используется для создания закладок HTML
  • JavaScript может получить доступ к элементу с определенным идентификатором с помощью getElementById ()
    метод

Упражнения HTML

Divs, Spans, Ids и Classes

Divs, Spans, Ids, and Classes

Вернуться на страницу третьего класса »

HTML-теги div и span сами по себе не имеют презентационной ценности. Это означает, что если вы поместите его в свой HTML, они фактически ничего не будут отображать.

Эти теги в основном используются как «крючки» для вашего CSS. Вы используете их для разделения или маркировки вашего HTML (когда другой, более семантический тег не работает) и используете селекторы CSS для их таргетинга.

Класс

и идентификаторы являются атрибутами HTML. Они также используются как перехватчики CSS.

Блочные и встроенные элементы HTML

из Stylin 'With CSS Чарльз Вайк-Смит:

... Большинство тегов XHTML делятся на две широкие категории по способу отображения на странице: блочные и встроенные. Элементы уровня блока, такие как заголовки от

до

и абзацы

, будут любезно располагаться на странице без разрывов строк. У них даже есть предустановленные поля для создания пространства между ними. Встроенные элементы не имеют таких полей и располагаются бок о бок на странице, переходя к следующей строке только в том случае, если им не хватает места для размещения рядом друг с другом. (стр.18)

Div Tag

Тег div - это HTML-элемент уровня блока. Он используется для разделения или раздела других тегов HTML на значимые группы.

Прекрасным примером использования тега div является обозначение списка навигации:

Диапазон шкалы

Тег span - это встроенный элемент HTML, который используется для группировки набора встроенных элементов. Вообще говоря, вы используете span для перехвата текста или группы тегов, которые вы хотите стилизовать по-разному. Однако часто вы можете сделать это более семантически, используя другие элементы, такие как em или strong .

Хороший пример правильного использования диапазона - это заголовок, который вы хотите разделить на две части.

 
 Comm 244: 
 Дизайн для WWW

Идентификационный атрибут

Атрибут id используется для обозначения разделов или частей вашего HTML-документа.

Вы можете использовать один и тот же идентификатор только один раз на странице, поэтому сохраните его для важных основных разделов вашей страницы. Кроме того, селектор id в CSS имеет высокий уровень специфичности и, следовательно, отменяет другие вещи (например, селектор классов).

Атрибут класса

Если на странице было несколько фрагментов боковой панели, мы могли бы создать один класс, чтобы мы могли использовать CSS для стилизации каждого фрагмента с помощью одного правила.

 

  
 Заголовок боковой панели 

  
 текст боковой панели Lorem ipsum dolor sit amet, 
 consctetur adipisicing elit.

Дополнительная литература

Вот несколько статей с дополнительной информацией о div, промежутках, идентификаторах и классах.

Вернуться на страницу третьего класса »

Как использовать классы в CSS для стилизации элемента HTML - Урок для начинающих

Вы ищете способ без проблем стилизовать элементы HTML? Скорее всего, вам придется использовать классы CSS. В этой статье вы узнаете, что такое классы в CSS и как их эффективно использовать.

Что такое класс CSS?

Синтаксис

CSS содержит селектор, и класс именно такой. Это необходимо для стилизации HTML-элементов, включая изменение цветов, шрифтов или размера текста.

Если вы хотите использовать класс, используйте точку (.) , за которой следует имя класса в блоке стиля . Затем используйте скобку, называемую блоком объявления , который содержит свойство , чтобы стилизовать элемент, например цвет текста или размер текста.

Давайте возьмем пример. Вот как это выглядит, если вы хотите изменить цвет текста на зеленый:

 <стиль>

.green-text {

цвет: # 008000;

}

CSS-классы помогут быстро стилизовать элементы HTML. Более того, вы можете избежать повторения одного и того же кода для каждого элемента HTML, использующего один и тот же стиль. Следовательно, уменьшается количество используемого кода CSS, что делает его более читабельным и легким для отладки.

С другой стороны, вы также можете использовать селектор идентификаторов для стилизации HTML-элементов.Однако он может изменить только один элемент HTML, тогда как селектор класса может стилизовать более одного элемента.

Как использовать класс CSS для стилизации элемента?

Готовы использовать классы CSS? Приведенные ниже примеры помогут вам по-настоящему понять концепцию. Начнем с создания классов с помощью тегов стиля:

 <стиль>

.green-text {

цвет: # 008000;

}



<стиль>

.font-36 {

размер шрифта: 36 пикселей;

}

Давайте разберемся и посмотрим, что представляет каждая часть:


  • <ТЕЛО> ... тело документа ...

    Использование внешних (связанных) таблиц стилей дает вам возможность изменять
    презентация без изменения исходного HTML-документа:

    

<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ...

    7.5.2 Идентификаторы элементов:

    id и класс атрибуты

    Определения атрибутов

    id = имя [CS]
    Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в
    документ.
    класс = cdata-list [CS]
    Этот атрибут присваивает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько
    Имена классов должны быть разделены пробелами.

    Модель
    Атрибут id     присваивает уникальный
    идентификатор элемента (который может быть проверен парсером SGML).
    Например, следующие абзацы отличаются своим значением id :

     Это абзац с уникальным названием. 
    

     Это также абзац с уникальным названием.

    Модель
    Атрибут id     выполняет несколько ролей в HTML:

    • Как средство выбора таблицы стилей.
    • В качестве целевого якоря для гипертекста
      ссылки.
    • Как средство ссылки на конкретный элемент из сценария.
    • Как имя объявленного элемента OBJECT .
    • Для общей обработки пользовательскими агентами (например, для идентификации полей
      при извлечении данных из HTML-страниц в базу данных, перевод HTML
      документы в другие форматы и т. д.).

    Модель
    атрибут class     , с другой стороны, назначает одно или несколько имен классов
    элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса
    может быть общим для нескольких экземпляров элемента. класс
    атрибут имеет несколько ролей в HTML:

    • В качестве селектора таблицы стилей (когда
      автор желает присвоить стилевую информацию набору элементов).
    • Для общей обработки пользовательскими агентами.

    В следующем примере SPAN
    элемент используется вместе с атрибутами id и class для разметки
    документировать сообщения. Сообщения появляются как на английском, так и на французском языках.

    

      Переменная объявлена ​​дважды 

      Необъявленная переменная 

      Неверный синтаксис для имени переменной 
 
    

      Переменная d & eacute; Clear & eacute; e deux fois 

      Переменная ind & eacute; finie 

      Ошибка синтаксиса для переменной

    Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать
    информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках
    красным:

    ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}

    Обратите внимание, что французское «msg1» и английское «msg1» могут не отображаться в
    один и тот же документ, поскольку они имеют одно и то же значение идентификатора id . Авторы могут использовать в дальнейшем
    из
    id     атрибут для уточнения представления отдельных сообщений, сделать
    им целевые якоря и т. д.

    Почти каждому элементу HTML можно присвоить идентификатор и класс.
    Информация.

    Предположим, например, что мы пишем документ о программировании
    язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем

    Элемент PRE     для форматирования примеров. Также назначаем фон
    цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу
    "пример".

    <ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>

      ... пример кода здесь ...

    Установив атрибут id для этого примера, мы можем (1) создать гиперссылку
    к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра
    Информация.

    Примечание. г.
    id Атрибут имеет то же пространство имен, что и атрибут
    Имя Атрибут при использовании для имен привязок. Пожалуйста
    обратитесь к разделу по анкерам с
    id     для получения дополнительной информации.

    7.5.3 Блочный и встроенный
    элементы

    Некоторые элементы HTML, которые могут появляться в BODY , считаются "блочными", а другие -
    «встроенный» (также известный как «уровень текста»). Это различие основано на
    несколько понятий:

    Модель содержимого
    Как правило, элементы уровня блока могут содержать встроенные элементы и другие
    блочные элементы.Как правило, встроенные элементы могут содержать только данные и
    другие встроенные элементы. Этому структурному различию присуща идея, что
    блочные элементы создают «большие» структуры, чем встроенные элементы.
    Форматирование
    По умолчанию элементы уровня блока форматируются иначе, чем встроенные
    элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов.
    не. Для получения информации о пробелах, разрывах строк и форматировании блоков,
    пожалуйста, обратитесь к разделу по тексту.
    Направленность
    По техническим причинам, связанным с двунаправленным [UNICODE]
    текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют
    информация о направленности. Подробнее см. В разделе наследование направления текста.

    Таблицы стилей предоставляют средства для
    указать рендеринг произвольных элементов, включая то, является ли элемент
    отображается как блочный или встроенный. В некоторых случаях, например, встроенный стиль для списка
    элементов, это может быть подходящим, но в целом авторы
    не рекомендуется переопределять традиционную интерпретацию элементов HTML в
    Сюда.

    Изменение традиционных идиом представления для уровня блока и
    встроенные элементы также влияют на двунаправленный текст
    алгоритм. См. Раздел о
    влияние таблиц стилей на двунаправленность для получения дополнительной информации.

    7.5.4 Группирование элементов:

    DIV и
    SPAN     элементы

    Начальный тег: требуется , Конечный тег:
    требуется

    Атрибуты, определенные в другом месте


    • id       , класс (идентификаторы на уровне документа)

    • lang       (язык
      информация), реж (текст
      направление)

    • title       (заголовок элемента)
    • стиль (рядный
      информация о стиле)
    • выровнять (выровнять)
    • onclick , ondblclick ,
      onmousedown       , onmouseup ,
      onmouseover       , onmousemove ,
      onmouseout       , onkeypress ,
      onkeydown       , onkeyup (внутренние события)

    Модель
    Элементы DIV     и SPAN , в сочетании с id и
    Атрибуты класса     предлагают общий механизм для добавления структуры к
    документы.Эти элементы определяют содержимое как встроенное ( SPAN ) или
    блочного уровня ( DIV ), но не накладывать никаких других идиом представления на
    содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы настроить
    HTML под свои нужды и вкусы.

    Предположим, например, что мы хотим сгенерировать документ HTML на основе
    база данных о клиентах. Поскольку HTML не включает элементы, которые
    идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д.,
    мы используем
    DIV     и SPAN для достижения желаемого структурного и презентационного
    эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать
    информация:

    



    

      Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Бойера 
  Имя:  Стефан 
  Тел:  (212) 555-1212 
  Электронная почта:  sb @ foo.org 


    


    

      Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Лафон 
  Имя:  Ив 
  Тел:  (617) 555-1212 
  Электронная почта:  [email protected]

    Позже мы можем легко добавить объявления таблиц стилей для точной настройки
    представление этих записей в базе данных.

    Другой пример использования см. В разделе, посвященном
    класс и id
    атрибуты.

    Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV
    элементы, например:

    aaaaaaaa
    bbbbbbbbb
     
     ccccc 
     ccccc

    , который обычно отображается как:

    ааааааааа
bbbbbbbbb
ccccc

ccccc

    7.5.5 Заголовки:

    h2 , h3 , h4 , h5 , H5 , H6 элементы

    Начальный тег: требуется , Конечный тег:
    требуется

    Атрибуты, определенные в другом месте


    • id       , класс (идентификаторы на уровне документа)

    • lang       (язык
      информация), реж (текст
      направление)

    • title       (заголовок элемента)
    • стиль (рядный
      информация о стиле)
    • выровнять (выровнять)
    • onclick , ondblclick ,
      onmousedown       , onmouseup ,
      onmouseover       , onmousemove ,
      onmouseout       , onkeypress ,
      onkeydown       , onkeyup (внутренние события)

    Элемент заголовка кратко описывает тему вводимого им раздела.Заголовочная информация может использоваться пользовательскими агентами, например, для создания
    оглавление документа автоматически.

    В HTML есть шесть уровней заголовков, из которых h2 является самым важным, а H6 - самым важным.
    в мере. Визуальные браузеры обычно отображают более важные заголовки в более крупном масштабе.
    шрифты, чем менее важные.

    В следующем примере показано, как использовать элемент DIV для связывания
    заголовок с разделом документа, который следует за ним.Это позволит вам
    определите стиль для раздела (раскрасьте фон, установите шрифт и т. д.) с помощью
    таблицы стилей.

    

     Лесные слоны 
    

     В этом разделе мы обсуждаем малоизвестных лесных слонов.
  ... этот раздел продолжается ... 

    

     Среда обитания 
    

     Лесные слоны живут не на деревьях, а среди них.
  ... продолжение этого подраздела ...

    Это строение может быть украшено информацией о стиле, например:

    <ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}

    Нумерованные разделы и ссылки

    HTML сам по себе не вызывает номера разделов
    быть сформированным из заголовков. Эта возможность может быть предложена пользовательскими агентами,
    тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять
    генерация номеров разделов (удобно для прямых ссылок в печатных
    документы, как в "См. раздел 7.2 ").

    Некоторые люди считают, что пропуск уровней заголовков - это плохо
    упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4
    h2, поскольку уровень заголовка h3 пропускается.

    7.5.6 Модель


    АДРЕС     элемент

    Начальный тег: требуется , Конечный тег:
    требуется

    Атрибуты, определенные в другом месте


    • id       , класс (идентификаторы на уровне документа)

    • lang       (язык
      информация), реж (текст
      направление)

    • title       (заголовок элемента)
    • стиль (рядный
      информация о стиле)
    • onclick , ondblclick ,
      onmousedown       , onmouseup ,
      onmouseover       , onmousemove ,
      onmouseout       , onkeypress ,
      onkeydown       , onkeyup (внутренние события)

    Модель
    Элемент ADDRESS     может использоваться авторами для предоставления контактной информации.
    для документа или основной части документа, например формы.Этот элемент часто
    появляется в начале или в конце документа.

    Например, страница на веб-сайте W3C, связанная с HTML, может включать
    следующая контактная информация:

    <АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
    
$ Дата: 2018/03/20 02:36:52 $

    Атрибут класса HTML

    Глобальные атрибуты HTML

    Примеры

    Используйте атрибут class в документе HTML:

    Этот учебник (w3big.com) title>

    h2.intro {color: blue;}
    p.important {color: green;}
    Style>
    Head>

    заголовок 1


    абзацы.

    Примечание. Это очень важный абзац. :)


    попробуйте "

    В этой главе есть другие примеры.

    Поддержка браузера

    Все основные браузеры поддерживают атрибут класса

    Определение и использование

    Атрибут класса

    определяет имя класса элемента.

    Свойство класса

    обычно используется для указания на класс таблицы стилей. Однако его также можно использовать в JavaScript (через HTML DOM) для изменения имени класса элементов HTML.

    Различия между HTML 4.01 и HTML5

    В HTML5 атрибуты класса могут использоваться для любого элемента HTML (он проверяет наличие любого элемента HTML, но не обязательно полезен).

    В HTML 4.01 нельзя использовать атрибуты класса:,,,,,