Загрузка...

Классы в HTML

После div — общие наклейки class для стилей.

Почему общие имена лучше

Стили остаются согласованными.

Прямой ответ

Пишите class="note", делитесь, разделяйте пробелами. В CSS .note. Без # в атрибуте.

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

Общий класс на нескольких элементах

Два абзаца class="note".

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

Разбор общего класса

оба note
.note выбирает группу

Несколько классов на одном элементе

card и featured вместе.

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

Разбор нескольких классов

два токена
.card + .featured

Привычки именования

Короткие ясные имена.

Практика

два tip
стиль .tip
второй класс
исправить опечатку

Частые ошибки

в class
запятые вместо пробелов
.note в HTML

Кратко

class = крючок CSS/JS
делить и комбинировать
дальше: id

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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

Язык