Классы — Учебник HTML — schoolsw3.com
❮ Назад Далее ❯
Использование атрибута class
Атрибут class часто используется для указания на имя класса в таблице стилей.
Он также может быть использован JavaScript для доступа и манипулирования элементами с определенным именем класса.
В следующем примере мы имеем три элемента <div>
с атрибутом class и со значением «city».
Все три элемента <div> будут стилизованы одинаково в соответствии с определением стиля
.city в головном разделе:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h3>Лондон</h3>
<p>Лондон — столица Англии.
</div>
<div>
<h3>Париж</h3>
<p>Париж — столица Франции.</p>
</div>
<div>
<h3>Токио</h3>
<p>Токио — столица Японии.</p>
</div>
</body>
</html>
Результат:
Лондон
Лондон — столица Англии.
Париж
Париж — столица Франции.
Токио
Токио — столица Японии.
Попробуйте сами »
Использование атрибута class для встроенных элементов
Атрибут class также может быть использован для встроенных элементов:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<h2>Мой <span>Important</span> Заголовок</h2>
<p>Это уже кое-что <span>important</span> text.
</p>
</body>
</html>
Попробуйте сами »
Совет: Атрибут class может быть использован на каждом HTML элементе.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.
Определение стилей для класса
Чтобы определить свойства CSS для класса, напишите точку (.) символ, за которым следует название класса. Затем добавьте свойства CSS в фигурные скобки {}:
Пример
Стиль всех элементов с именем класса «city»:
<style>
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h3 class=»city»>Лондон</h3>
<p>Лондон — столица Англии.</p>
<h3 class=»city»>Париж</h3>
<p>Париж — столица Франции.
</p>
<h3 class=»city»>Токио</h3>
<p>Токио — столица Японии.</p>
Результат:
Лондон
Лондон — столица Англии.
Париж
Париж — столица Франции.
Токио
Токио — столица Японии.
Попробуйте сами »
Несколько классов
HTML элементы могут иметь более одного имени класса.
Чтобы указать несколько классов, разделите имена классов пробелом, например <div>. Это позволяет объединить несколько классов CSS для одного HTML элемента.
В следующем примере первый элемент <h3> принадлежит обоим классам
city, а также к классу main
Пример
<h3>Лондон</h3>
<h3>Париж</h3>
<h3>Токио</h3>
Попробуйте сами »
Различные элементы могут иметь один и тот же класс
Различные HTML элементы могут указывать на одно и то же имя класса.
В следующем примере оба варианта <h3> и <p>
указывает на то, что класс «city» будет разделять один и тот же стиль:
Пример
<h3>Париж</h3>
<p>Париж — столица Франции.</p>
Попробуйте сами »
Использование атрибута class в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода
Пример
Нажмите на кнопку, чтобы скрыть все элементы с именем класса «city»:
<script>
function myFunction() {
var x = document.getElementsByClassName(«city»);
for (var i = 0; i < x.length; i++) {
x[i].style.display = «none»;
}
}
</script>
Попробуйте сами »
Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
Вы узнаете больше о JavaScript в разделе HTML JavaScript, или вы можете изучить, JavaScript Учебник.
Краткое содержание главы
- HTML атрибут
classуказывает одно или несколько имен классов для элемента - Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
- Атрибут
classможет быть использован для любого HTML элемента - Имя класса чувствительно к регистру
- Различные элементы HTML могут указывать на одно и то же имя класса
- JavaScript может получить доступ к элементам с определенным именем класса с помощью мтода
getElementsByClassName()
HTML Упражнения
Проверьте себя с помощью упражнений
Упражнение:
Создайте селектор класса с именем «special».
Добавьте свойство color со значением «blue» внутри класса «special».
<!DOCTYPE html>
<html>
<head>
<style>
;
</style>
</head>
<body>
<p>Мой параграф</p>
</body>
</html>
❮ Назад Далее ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.
CSS УчебникBootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
Атрибуты class HTML уроки для начинающих академия
❮ Назад Дальше ❯
Использование атрибута Class
Атрибут class указывает одно или несколько имен классов для элемента HTML.
Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.
В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:
Пример
Используйте CSS для оформления всех элементов с именем класса «City»:
<style>
.
city {
background-color: tomato;
color: white;
padding:
10px;
}
</style>
<h3 class=»city»>London</h3>
<p>London is the capital of England.</p>
<h3 class=»city»>Paris</h3>
<p>Paris is the capital of France.</p>
<h3 class=»city»>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Совет: Атрибут Class можно использовать для любого элемента HTML.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Использование атрибута Class в JavaScript
JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName() method:
Пример
Когда пользователь щелкает по кнопке, скройте все элементы с именем класса «city»:
<script>
function myFunction() {
var x = document.
getElementsByClassName(«city»);
for (var i = 0; i < x.length;
i++) {
x[i].style.display = «none»;
}
}
</script>
Совет: Изучайте JavaScript в главе HTML JavaScriptили в нашем Справочнике по JavaScript.
Несколько классов
Элементы HTML могут иметь более одного имени класса, каждое имя класса должно быть разделено пробелами.
Пример
Элементы стиля с именем класса «City», а также элементы стиля с именем класса «Main»:
<h3
class=»city main»>London</h3>
<h3>Paris</h3>
<h3
class=»city»>Tokyo</h3>
В приведенном выше примере первый элемент <h3> принадлежит как классу «City», так и классу «Main».
Тот же класс, другой тег
Различные теги, такие как <h3> и <p>, могут иметь одно и то же имя класса и тем самым использовать один и тот же стиль:
Пример
<h3>Paris</h3>
<p
class=»city»>Paris is the capital of France</p>
❮ Назад Дальше ❯
Атрибут класса HTML
❮ Пред.
Следующий ❯
Атрибут класса HTML используется для указания одного или нескольких имен классов для элемента. Обычно атрибут класса указывает на класс в таблице стилей. Имя класса чувствительно к регистру.
Этот атрибут также может использоваться JavaScript через HTML DOM для внесения определенных изменений в элементы HTML с указанным именем класса.
В HTML5 вы можете использовать атрибут класса для любого элемента HTML.
В HTML 4.01 атрибут class нельзя использовать со следующими элементами: <голова>,, <база>, <базовый шрифт>, <параметр>, <стиль>, <мета>, <скрипт> и <название>.
Хотя конкретных требований к наименованию классов нет, лучше использовать имена, описывающие смысловое назначение элемента, а не его представление. Имя должно начинаться с буквы a-z или A-Z, а за ним могут следовать буквы, цифры (0-9), символы подчеркивания («_») и дефисы («-«).
Пример атрибута класса HTML:
<голова>
Название документа
<стиль>
.
красный {
красный цвет;
}
.апельсин {
оранжевый цвет;
}
<тело>
Пример атрибута класса HTML
Это какой-то красный абзац.
Это какой-то текст.
Это какой-то желтый абзац.
красный {
красный цвет;
}
.апельсин {
оранжевый цвет;
}
<тело>
Попробуй сам »
В CSS, если вы хотите выбрать элементы с определенным классом, используйте символ точки (.), за которым следует имя класса.
Пример атрибута класса HTML, используемого с CSS:
<голова>
Название документа
<стиль>
.заголовок {
цвет фона: #1c87c9;
цвет: #ffffff;
отступ: 20 пикселей;
}
<тело>
Пример атрибута класса
Заголовок
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «De Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.
Заголовок
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. размещение печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «De Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.
Попробуй сам »
Элементы HTML также могут иметь более одного имени класса. Каждый из них должен быть разделен пробелом.
Пример атрибута класса HTML с несколькими именами классов:
<голова>
Название документа
<стиль>
.заголовок {
цвет фона: #202131;
цвет: #дддддд;
отступ: 15px 25px;
}
. текст-справа {
выравнивание текста: вправо;
}
<тело>
Пример нескольких классов
<р>
Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
Лондон
<р>
Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
Париж
<р>
Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
Токио
текст-справа {
выравнивание текста: вправо;
}
<тело>
Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
Попробуй сам »
Различные теги, такие как
и
, могут иметь одно и то же имя класса и один и тот же стиль.
Пример атрибута класса HTML с элементами
и
:
<голова>
Название документа
<стиль>
.grey-текст {
цвет: #808080;
}
<тело>
Пример атрибута класса
Заголовок
<р>
Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
Попробуй сам »
Узнайте, как использовать атрибут класса HTML
TL;DR — атрибут класса HTML определяет имя класса. Вы можете использовать его для выбора и доступа к элементам HTML для различных задач, выполняемых с использованием CSS и JavaScript.
Содержание
- 1. Определение класса HTML
- 2. Использование классов HTML для CSS
- 2.1. Наиболее распространенные свойства для классов стилей
- 3. Работа с классами в JavaScript
- 4. Класс HTML: полезные советы
Определение класса HTML
Добавление класса HTML ничем не отличается от любого другого атрибута. Вы должны включить его в открывающий тег и определить значение, заключенное в кавычки :
| Синтаксис | <тег>контент |
| Пример | Мойте руки! |
В HTML можно также определить несколько классов для одного элемента.
Все они должны быть включены в те же пара кавычек и разделены пробелами :
| Синтаксис | <тег>контент |
| Пример | Мойте руки! |
Примечание: помните, что классы HTML чувствительны к регистру .
Использование классов HTML для CSS
Наиболее распространенное использование классов HTML — это стилизация CSS. Вы можете создать определенный стиль и назначить его определенному классу в HTML. Все элементы, для которых указан этот класс, наследуют стиль:
Пример
<стиль>
.зеленый {
цвет: зеленый;
поле слева: 20px;
}
Попробуйте живое обучение на Udacity
Все свойства стиля должны быть окружены тегами
Попробуйте живое обучение на Udacity
Чтобы указать цвет фона , вы можете использовать background-color:
Пример
Попробуйте в прямом эфире Узнайте на Udacity
Совет: используйте палитру цветов, чтобы получить значения для точного тона, который вам нужен.
Чтобы выровнять элемент, используйте text-align. Для этого свойства есть три возможных значения: слева , по центру или справа :
Пример
<стиль>
.align-c {
выравнивание текста: по центру;
}
Попробуйте вживую. Учитесь на Udacity
Свойство padding создает пространство между содержимым элемента и его границей :
Пример
Попробуйте вживую. Учитесь на Udacity
Работа с классами в JavaScript
Если у вас есть какие-то знания в JavaScript, вы можете узнать свойство className. Разработчики используют его, чтобы установить или вернуть имя класса для элемента HTML.
Чтобы получить доступ к элементам, для которых указано определенное имя класса HTML, необходимо использовать метод document.getElementsByClassName() в JavaScript:
Пример
var ].имя_класса; var sampleElem2 = document.
