Body class в html что это
Перейти к содержимому

Body class в html что это

  • автор:

Классы

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Классы   
Согласно , шумовой характеристикой рабочих мест при постоянном шуме являются уровни звуковых давлений в децибелах в октавных полосах. Совокупность таких уровней называется , номер которого численно равен уровню звукового давления в октавной полосе со среднегеометрической частотой 1000 Гц.

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Камни    АлмазАметистСапфир
НазваниеЦветТвердость по Моосу 
 
Белый10 
 
РубинКрасный9 
 
Голубой7 
 
ИзумрудЗеленый8 
 
Голубой9

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Облако тегов    
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент

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

Облако тегов

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

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

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

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

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 28_days_later

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

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

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.
  1. div[iddqd]
  2. div.iddqd
  3. iddqd.div
  4. div#iddqd
  5. div=iddqd

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

Атрибут class

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

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

Значение по умолчанию

Применяется к тегам

Пример

HTML5 IE Cr Op Sa Fx

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

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

Body class в html что это

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

   Заголовок страницы  
Заголовок 1
 
Это параграф.

Атрибуты тега :

  • onbeforeunload — сценарий, который выполнится, когда пользователь соберётся покинуть страницу.
  • onhashchange — сценарий, который выполнится при изменении URL.
  • onmessage — сценарий, который выполнится при получении сообщения от приложения.
  • onoffline — сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.
  • ononline — сценарий для запуска, когда браузер начинает работать в режиме онлайн.
  • onpagehide — сценарий, который выполняется, когда пользователь переходит со страницы.
  • onpageshow — сценарий, который выполняется, когда пользователь переходит на страницу.
  • onunload — сценарий, который выполняется, когда пользователь покидает страницу.
  • onafterprint — сценарий, который выполнится после печати веб-страницы.
  • onbeforeprint — сценарий, который выполнится перед печатью веб-страницы.
  • onlanguagechange — сценарий, который выполнится при изменении языка документа.
  • onmessageerror — сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.
  • onpopstate — сценарий, который выполнится при изменении состояния истории браузера.
  • onrejectionhandled — сценарий, который выполнится при обработке отклоненного обещания в объекте Promise .
  • onstorage — сценарий, который выполнится при изменении данных в объекте localStorage или sessionStorage .
  • onunhandledrejection — сценарий, который выполнится при возникновении отклоненного обещания в объекте Promise без обработки.

Примеры использования

   Заголовок страницы  
Мой веб-сайт
 
Добро пожаловать на мой веб-сайт!

Веб-страница со ссылками:

   Заголовок страницы  
Мой веб-сайт
 
Добро пожаловать на мой веб-сайт!






 Visit Example.com

Веб-страница с изображениями:

   Заголовок страницы  
Мой веб-сайт
 
Добро пожаловать на мой веб-сайт!

Для чего использовать тег

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

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

Ограничения

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

Нюансы

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

���� Другие теги для создания структуры документа

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Body class в html что это

HTML-элемент представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент .

  • Элемент представляет интерфейс HTMLBodyElement .
  • Вы можете получить доступ к элементу через свойство document.body .

Атрибуты

К этому элементу применимы глобальные атрибуты.

Цвет текста гиперссылок, когда они выделены. Этот метод не согласован, вместо него используйте CSS-свойство color (en-US) вместе с псевдоклассом :active .

URI изображения для использования в качестве фона. Этот метод не согласован, вместо него используйте CSS-свойство background .

Цвет фона документа. Этот метод не согласован, вместо него используйте CSS-свойство background-color .

Отступ от нижнего края элемента . Этот метод не согласован, вместо него используйте CSS-свойство margin-bottom .

Отступ от левого края элемента . Этот метод не согласован, вместо него используйте CSS-свойство margin-left .

Цвет текста непосещенных гипертекстовых ссылок. Этот метод не согласован, вместо него используйте CSS-свойство color (en-US) вместе с псевдоклассом :link .

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

Функция для вызова, когда пользователь отправляет документ на печать.

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

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

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

Функция для вызова, когда документ получает фокус.

Функция для вызова, когда изменяется часть идентификатора фрагмента (начинается с символа ‘#’ ) текущего адреса документа.

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

Функция для вызова, когда документ закончил загрузку (страницы загружена).

Функция для вызова, когда документ получил сообщение.

Функция для вызова, когда происходит сбой сетевого соединения.

Функция для вызова, когда произошло восстановление сетевого соединения.

Функция для вызова, когда пользователь осуществил управление историей сеанса.

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

Функция для вызова, когда размер документа был изменён.

Функция для вызова, когда изменяется содержимое хранилища (Web Storage).

Функция для вызова, когда произошло продвижение пользователя назад по истории транзакций (например, переход на предыдущую страницу в активной вкладке).

Функция для вызова, когда пользователь покидает страницу (закрытие вкладки или окна браузера).

Отступ от правого края элемента . Этот метод не согласован, вместо него используйте CSS-свойство margin-right .

Основной цвет текста. Этот метод не согласован, вместо него используйте CSS-свойство color (en-US).

Отступ от верхнего края элемента . Этот метод не согласован, вместо него используйте CSS-свойство margin-top .

Цвет текста посещённой гипертекстовой ссылки. Этот метод не согласован, вместо него используйте CSS-свойство color (en-US) вместе с псевдоклассом :visited .

Пример

html> head> title>Заголовок документаtitle> head> body> p>Это параграфp> body> html>

Спецификации

Specification
HTML Standard
# the-body-element

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Похожие публикации:
  1. Как открыть powershell в папке
  2. Как создать матрицу в c
  3. Какие бывают api
  4. Какие вопросы можно задать компании

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *