Что такое класс в html: Атрибут class — HTML

Posted:

Июл 2, 2023

Comments:

0 Comments

Что такое класс в html: Атрибут class — HTML — Дока

Содержание

Атрибут class — HTML — Дока

Кратко

Скопировано

Универсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в CSS и позволяет управлять стилями элемента. К тому же по имени класса удобно искать и манипулировать элементами на странице при помощи JavaScript.

Пример

Скопировано

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

...<!-- Первый заголовок --><h3>В Санкт-Петербурге</h3><p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p><!-- Второй заголовок --><h3>В России</h3><p>«Умом Россию не понять...»</p><!-- Третий заголовок --><h3>В мире</h3><p>На Брайтон Бич опять идут дожди.</p>...
          ...
<!-- Первый заголовок -->
<h3>В Санкт-Петербурге</h3>
<p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон. </p>
<!-- Второй заголовок -->
<h3>В России</h3>
<p>«Умом Россию не понять...»</p>
<!-- Третий заголовок -->
<h3>В мире</h3>
<p>На Брайтон Бич опять идут дожди.</p>
...

Открыть демо в новой вкладке

🤖 Как при текущей разметке можно изменить цвет текста первого заголовка? Можно обернуть все заголовки в разные дополнительные теги. И использовать их комбинации в качестве селекторов для написания стилей. Но это решение будет неверным. Разметка распухнет, её сложно будет читать. Так делать не нужно.

Чтобы выделить какой-то отдельный элемент или набор элементов и применить стили выборочно можно использовать атрибут class.

...<!-- Первый заголовок --><h3>В Санкт-Петербурге</h3><p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p><!-- Второй заголовок --><h3>В России</h3><p>«Умом Россию не понять...»</p><!-- Третий заголовок --><h3>В мире</h3><p>На Брайтон Бич опять идут дожди. </p>...
          ...
<!-- Первый заголовок -->
<h3>В Санкт-Петербурге</h3>
<p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.</p>
<!-- Второй заголовок -->
<h3>В России</h3>
<p>«Умом Россию не понять...»</p>
<!-- Третий заголовок -->
<h3>В мире</h3>
<p>На Брайтон Бич опять идут дожди.</p>
...

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

.news__local {  color: #ed6742;}
          .news__local {
  color: #ed6742;
}

Открыть демо в новой вкладке

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

Как понять

Скопировано

Имя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class. Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.

Как пишется

Скопировано

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

<p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

При выборе имени класса следует придерживаться нескольких правил:

В именах классов используй только английские слова.

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм. </p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

Имена классов пишутся маленькими буквами.

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм. 
</p>

Для разделения двух слов используются тире (-) или знак подчёркивания (_). Не используй camelCase 🐫

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм. 
</p>

Лучше не использовать больше трёх слов в имени класса.

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

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

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм. </p><p>Экзистенциализм сложен.</p><p>Художественное переживание последовательно.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><p>Экзистенциализм сложен.</p><p>Художественное переживание последовательно.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<p>Экзистенциализм сложен.</p>
<p>Художественное переживание последовательно.</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<p>Экзистенциализм сложен.</p>
<p>Художественное переживание последовательно.</p>

Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><p>Экзистенциализм сложен.</p><p>Художественное переживание последовательно.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><p>Экзистенциализм сложен.</p><p>Художественное переживание последовательно.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<p>Экзистенциализм сложен.</p>
<p>Художественное переживание последовательно.</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм. 
</p>
<p>Экзистенциализм сложен.</p>
<p>Художественное переживание последовательно.</p>

Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.

<!-- Плохо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p><!-- Хорошо --><p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <!-- Плохо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>
<!-- Хорошо -->
<p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм. 
</p>

Не используйте пробел для разделения слов внутри одного имени класса.

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

<p>  Его экзистенциальная тоска выступает как побудительный мотив творчества,  однако символизм начинает импрессионизм.</p>
          <p>
  Его экзистенциальная тоска выступает как побудительный мотив творчества,
  однако символизм начинает импрессионизм.
</p>

Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.

Подсказки

Скопировано

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

<p>Экзистенциализм сложен.</p>
          <p>Экзистенциализм сложен. </p>

💡 Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id. Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.

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

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

🛠 После того, как разметка и стили написаны, посмотри на них внимательно. Высока вероятность, что написано несколько одинаковых блоков стилей для разных классов. Имеет смысл оптимизировать код и вынести повторяющиеся стили в отдельный блок и задать всем похожим элементам один класс.

🛠 Представляй каждый блок, из которого состоит страница, как самостоятельный элемент, который можно будет убрать с текущей страницы и перенести на другую. Задавай такие имена классов, которые не будут привязаны к странице. Думай компонентами 😉

Классы | htmlbook.ru

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

Тег.Имя класса { свойство1:
значение; свойство2: значение; . .. }

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

Пример 8.1. Использование классов

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>

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

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

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

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

.Имя класса { свойство1: значение;
свойство2: значение; … }

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8. 2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   .gost {
    color: green; /* Цвет текста */
    font-weight: bold; /* Жирное начертание */
   }
   .term {
    border-bottom: 1px dashed red; /* Подчеркивание под текстом */
   }
  </style>
 </head> 
 <body>
   <p>Согласно <span>ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b>предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы:
ячейкам таблицы, ссылкам, абзацам и др.
В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #666; /* Рамка вокруг таблицы */
   }
   th {
    background: #009383; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   tr.odd {
    background: #ebd3d7; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Белый</td><td>10</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
   </tr>
   <tr>
    <td>Аметист</td><td>Голубой</td><td>7</td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
   </tr>
   <tr>
    <td>Сапфир</td><td>Голубой</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

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

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако тегов</title>
  <style type="text/css">
   . level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">цвет</a> 
   <a href="/term/95">фон</a> 
   <a href="/term/11">палитра</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свет</a> 
   <a href="/term/44">панели</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">прямоугольник</a> 
   <a href="/term/14">пиксел</a> 
   <a href="/term/27">градиент</a> 
  </div>
 </body>
</html>

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

Рис. 8.4. Облако тегов

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

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

1. Какое имя класса написано правильно?

2layer1
1layer
Яndex
pink-floyd
28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

Зелёный.
Синий.
Жёлтый.
Оранжевый.
Чёрный.

3. Как задать стиль у тега <div>DOOM</div>?

div[iddqd] { color: red; }
div. iddqd { color: red; }
iddqd.div { color: red; }
div#iddqd { color: red; }
div=iddqd { color: red; }

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

s1
s2
s3
s2 s4
s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4

селекторы

Статьи по теме

Классы

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

❮ Назад
Далее ❯

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

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

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

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

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

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

 
 элементы будут одинаково оформлены в соответствии с  .city 
 определение стиля в разделе заголовка:
 Пример 
  
 
 
Лондон
  
Лондон — столица Англии.
Париж
  
Париж — столица Франции.
Токио
  
Токио — столица Японии.
  
 Попробуйте сами »
 В следующем примере у нас есть два элемента   
 с атрибутом  класса  со значением
 "примечание". Оба   
 элементы будут одинаково оформлены в соответствии с  .note 
 определение стиля в разделе заголовка:
 Пример 
  
 
 
Мой 
Важный Заголовок
Это важно текст.
 
 Попробуйте сами »
  Совет:  Атрибут  class  можно использовать для  любого HTML-элемента .
  Примечание:  Имя класса чувствительно к регистру!
  Совет:  Вы можете узнать больше о CSS в нашем Учебнике по CSS.
 Синтаксис для класса 
 Чтобы создать класс; напишите символ точки (.), за которым следует
 имя класса.
 Затем определите свойства CSS в фигурных скобках {}:
 Пример 
 Создайте класс с именем «город»:
  
 
 
Лондон
Лондон — столица Англии.
Париж
Париж — столица Франции.
Токио
Токио — столица Японии.
 
 
 Попробуйте сами »
 Несколько классов 
 HTML-элементы могут принадлежать более чем одному классу.
 Чтобы определить несколько классов, разделите имена классов пробелом, например <дел
class="главный город">. Элемент будет оформлен в соответствии со всеми
 указаны классы.
 В следующем примере первый элемент 
 принадлежит как 
 город  класса, а также к основному классу  ,
 и получит стили CSS из обоих классов: 
 Пример 
Лондон
Париж
Токио
 Попробуйте сами »
 Различные элементы могут использовать один и тот же класс 
 Различные элементы HTML могут указывать на одно и то же имя класса.
 В следующем примере оба 
 и 
 
 указать на класс "город"
 и будет иметь тот же стиль:
 Пример 
Париж
 <р
 >Париж — столица Франции
 Попробуйте сами »
 Использование атрибута класса в JavaScript 
 Имя класса также может использоваться JavaScript для выполнения определенных задач для
 конкретные элементы.
 JavaScript может получить доступ к элементам с определенным именем класса с помощью метода  getElementsByClassName() :
 Пример 
 Нажмите кнопку, чтобы скрыть все элементы с именем класса
 "город":
 Попробуйте сами »
 Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
 Вы узнаете больше о JavaScript в нашей главе HTML JavaScript или можете изучить нашу
 Учебник по JavaScript.
 Резюме главы

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

`HTML-упражнения`

`Проверьте себя с помощью упражнений`

`Упражнение:`

Создайте селектор класса с именем "специальный".

Добавьте свойство цвета со значением "синий" в "специальный" класс.

<голова> <стиль>

;

<тело>

Мой абзац

Начать упражнение

❮ Предыдущий Следующий ❯

`ВЫБОР ЦВЕТА`

`Лучшие учебники`

Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебное пособие по W3. CSS Учебное пособие по Bootstrap Учебное пособие по PHP Учебное пособие по Java Учебное пособие по C++ Учебное пособие по jQuery 9000 3

`Лучшие ссылки`

HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference

902 79 лучших примеров

Примеры HTML Примеры CSS Примеры JavaScript Примеры How To Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery

FORUM | О

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

`Класс HTML (с примерами)`

В этом уроке мы узнаем о классе HTML с помощью примеров.

Класс HTML — это атрибут, который можно добавить к элементу HTML, чтобы присвоить ему определенное имя класса. Например,

 Programiz
<стиль>
    .лого {
        цвет синий;
    }

Вывод браузера

Атрибут class позволяет CSS и JavaScript получать доступ к коду HTML. В приведенном выше примере элемент

с именем класса logo оформлен селектором .logo .

Примечание : Мы используем . перед именем класса в CSS.

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

Элемент может иметь более одного класса. Например,

 Лили
<стиль>
    .животное {
        красный цвет;
    }
   .собака {
       граница: 1px сплошной черный
    }

Вывод браузера

В приведенном выше примере элемент

имеет два имени класса: животное и собака . Мы можем добавить более одного класса к элементу HTML и разделить их пробелом.

`Одно и то же имя класса для HTML-элементов`

Мы также можем предоставить одно и то же имя класса для нескольких HTML-элементов. Это упрощает применение одного и того же стиля к нескольким элементам. Давайте посмотрим на пример,

 Собака
Обезьяна
<стиль>
    .животное {
        цвет синий;
     }

Вывод браузера

Здесь мы использовали одно и то же имя класса animal для двух элементов

.

`Класс с Javascript в HTML`

Атрибут class позволяет javascript получить доступ к элементу через селекторы классов или API getElementByClassName . Например,

 ЯБЛОКО
 <скрипт>
    пусть элемент = document.getElementsByClassName ("фрукты") [0]
    element.innerHTML = "ОРАНЖЕВЫЙ"

Вывод браузера

В приведенном выше примере мы использовали document.getElementsByClassName("fruits") для доступа к элементу HTML, где fruit — это имя класса в элементе

. Затем свойство innerHTML изменяет содержимое (текст внутри тега

) с APPLE на ORANGE .

`На что следует обратить внимание`

Имена классов вводятся с учетом регистра. Следовательно, животное и животное — это два разных имени класса.
Нельзя использовать пробел в имени класса. Если вы используете пробел в имени класса, оно будет рассматриваться как два отдельных имени класса. Например, если у вас есть следующий CSS:

 .мой класс {
  размер шрифта: 14px;
  цвет синий;
}

Это не применит стили к элементам с классом мой класс .

This entry was posted in Популярное

Posted:

Comments:

Что такое класс в html: Атрибут class — HTML — Дока

Атрибут class — HTML — Дока

Кратко

Пример

Как понять

Как пишется

Подсказки

На практике

Алёна Батицкая советует

Классы | htmlbook.ru

Одновременное использование разных классов

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

Ответы

Статьи по теме

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

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

Пример

Лондон

Париж

Токио

Пример

Мой

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

Пример

Лондон

Париж

Токио

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

Пример

Лондон

Париж

Токио

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

Пример

Париж

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

Пример

Резюме главы

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Класс HTML (с примерами)

Programiz

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

Лили

Одно и то же имя класса для HTML-элементов

Собака

Обезьяна

Класс с Javascript в HTML

ЯБЛОКО

На что следует обратить внимание

Рубрики

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

`HTML-упражнения`

`Проверьте себя с помощью упражнений`

`Упражнение:`

`ВЫБОР ЦВЕТА`

`Лучшие учебники`

`Лучшие ссылки`

`Класс HTML (с примерами)`

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

`Одно и то же имя класса для HTML-элементов`

`Класс с Javascript в HTML`

`На что следует обратить внимание`

`Рубрики`