HTML тег body | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 07.03.2009
Тег <body> (с англ. тело) — тег-контейнер, определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<body>...</body>
Атрибуты
Основные Вспомогательные События
alink | задает цвет активной ссылки (в момент нажатия). Не рекомендуется в спецификации HTML 4.01! |
---|---|
background | задает URL фонового рисунка. Не рекомендуется в спецификации HTML 4.01! |
bgcolor | задает цвет фона страницы |
bgproperties | при установке bgproperties=»fixed» фон фиксируется и не прокручивается вместе со страницей Отсутствует в спецификации HTML 4.01! |
bottommargin | определяет отступ от нижнего края окна браузера. Отсутствует в спецификации HTML 4.01! |
class | определяет имя используемого класса |
dir | задает направление
|
id | уникальный индетификатор |
lang | определяет язык отображаемого документа |
leftmargin | определяет отступ от левого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
link | задает цвет ссылок. Не рекомендуется в спецификации HTML 4.01! |
marginheight | задает высоту вехнего и нижнего полей документа Работает только в браузерах Netscape. Отсутствует в спецификации HTML 4.01! |
marginwidth | задает ширину левого и правого полей документа Работает только в браузерах Netscape. Отсутствует в спецификации HTML 4.01! |
onblur | потеря фокуса элементом. Отсутствует в спецификации HTML 4.01! |
onclick | щелчек на элементе |
ondblclick | двойной щелчек на элементе |
onerror | ошибка сценария на странице. Отсутствует в спецификации HTML 4.01! |
onfocus | получение фокуса элементом. Отсутствует в спецификации HTML 4.01! |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onload | окончание загрузки страницы |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
onresize | изменение пользователем размера окна. Отсутствует в спецификации HTML 4.01! |
onunload | выгрузка браузером текущего документа из окна или фрейма |
rightmargin | определяет отступ от правого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
scroll | управляет отображением полос прокрутки
Отсутствует в спецификации HTML 4.01! |
style | задает встроенную таблицу стилей |
text | задает цвет текста. Значение по умолчанию #000000. Не рекомендуется в спецификации HTML 4.01! |
title | добавляет всплывающую подсказку |
topmargin | определяет отступ от верхнего края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
vlink | задает цвет посещенных ссылок. По умолчанию для IE и Opera #800080, для Firefox #551a8b. Не рекомендуется в спецификации HTML 4.01! |
Пример
<html>
<head>
...
</head>
<body background="fon.jpg" bgcolor="#302020" text="#EEE" link="#44C1DC" vlink="#721CA4">
...
тело документа.
...
</body>
</html>
Рекомендации по использованию
- по спецификациям XHTML открывающий (<body>) и закрывающий (</body>) тег обязателен
- включает в себя всю содержательную часть веб-страницы
- может содержать блочные элементы, теги <script>, <ins> и <del>
- взаимоисключающий элемент с тегом <frameset>
- обязательных атрибутов нет
- большинство атрибутов данного тега отсутствует либо не рекомендуется в спецификации HTML 4.01. Настройки, которые задают эти атрибуты можно и нужно выполнять, используя таблицы стилей
- некоторые браузеры по умолчанию отображают элемент с отступами
Согласно спецификации HTML4.01 открывающий и закрывающий теги не обязательны. Тем не менее, рекомендуется их использовать, для четкого структурирования текста страницы.
Тег <body> часто используется для размещения обработчика событий onLoad, для того, чтобы выполнить определенные действия, после того, как документ загрузится.
Твой код:
<html> <head> <title></title> </head> <body> …тело документа… </body> </html> Сделай код и жми тутРезультат:
большой полигонHTML тег body | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 22.01.2011
Тег <body> (с англ. тело) — тег-контейнер, определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<body>...</body>
Атрибуты
Основные Вспомогательные События
alink | задает цвет активной ссылки (в момент нажатия). Не рекомендуется в спецификации HTML 4.01! |
---|---|
background | задает URL фонового рисунка. Не рекомендуется в спецификации HTML 4.01! |
bgcolor | задает цвет фона страницы |
bgproperties | при установке bgproperties=»fixed» фон фиксируется и не прокручивается вместе со страницей |
bottommargin | определяет отступ от нижнего края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
class | определяет имя используемого класса |
dir | задает направление
|
id | уникальный идентификатор |
lang | определяет язык отображаемого документа |
leftmargin | определяет отступ от левого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
link | задает цвет ссылок. Не рекомендуется в спецификации HTML 4.01! |
marginheight | задает высоту вехнего и нижнего полей документа Работает только в браузерах Netscape. Отсутствует в спецификации HTML 4.01! |
marginwidth | задает ширину левого и правого полей документа Работает только в браузерах Netscape. Отсутствует в спецификации HTML 4.01! |
onblur | потеря фокуса элементом. Отсутствует в спецификации HTML 4.01! |
onclick | щелчок на элементе |
ondblclick | двойной щелчок на элементе |
onerror | ошибка сценария на странице. Отсутствует в спецификации HTML 4.01! |
onfocus | получение фокуса элементом. Отсутствует в спецификации HTML 4.01! |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onload | окончание загрузки страницы |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
onresize | изменение пользователем размера окна. Отсутствует в спецификации HTML 4.01! |
onunload | выгрузка браузером текущего документа из окна или фрейма |
rightmargin | определяет отступ от правого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
scroll | управляет отображением полос прокрутки
Отсутствует в спецификации HTML 4.01! |
style | задает встроенную таблицу стилей |
text | задает цвет текста. Значение по умолчанию #000000. Не рекомендуется в спецификации HTML 4.01! |
title | добавляет всплывающую подсказку |
topmargin | определяет отступ от верхнего края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01! |
vlink | задает цвет посещенных ссылок. По умолчанию для IE и Opera #800080, для Firefox #551a8b. Не рекомендуется в спецификации HTML 4.01! |
Пример
<html>
<head>
...
</head>
<body background="fon.jpg" bgcolor="#302020" text="#EEE" link="#44C1DC" vlink="#721CA4">
тело документа.
...
</body>
</html>
Рекомендации по использованию
- по спецификациям XHTML открывающий (<body>) и закрывающий (</body>) тег обязателен
- включает в себя всю содержательную часть веб-страницы
- может содержать блочные элементы, теги <script>, <ins> и <del>
- взаимоисключающий элемент с тегом <frameset>
- обязательных атрибутов нет
- большинство атрибутов данного тега отсутствует либо не рекомендуется в спецификации HTML 4.01. Настройки, которые задают эти атрибуты можно и нужно выполнять, используя таблицы стилей
- некоторые браузеры по умолчанию отображают элемент с отступами
Согласно спецификации HTML4.01 открывающий и закрывающий теги не обязательны. Тем не менее, рекомендуется их использовать, для четкого структурирования текста страницы.
Тег <body> часто используется для размещения обработчика событий onLoad, для того, чтобы выполнить определенные действия, после того, как документ загрузится.
Твой код:
<html> <head> <title></title> </head> <body> …тело документа… </body> </html> Сделай код и жми тутРезультат:
большой полигонПо теме
Урок 4: «Тело» сайта, тег «body»
Давно я не писал уроков HTML, но сегодня решил это исправить — нужно продолжать изучать HTML язык. Итак, сегодня я расскажу про то, что такое «тело» сайта и немного про атрибуты данного тега.
«Тело» сайта — разговорный термин среди программистов и HTML верстальщиков. Под выражением «тело» сайта подразумевают теги
<body>
и</body>
/ Между данными тегами располагается основное содержимое сайта, все блоки, изображения, теги, текст и так далее, что будет отображаться в тот момент, когда посетитель зашел на Ваш сайт.Тегу «body» можно задать атрибуты, например фон страницы или цвет текста. Фон HTML страницы задает атрибут bgcolor:
<BODY bgcolor="#00ff00"></BODY>
Цвет страницы можно задать как шестнадцатизначным номером цвета, так и его названием из стандартной палитры цветов:
<BODY bgcolor="Green"></BODY>
Чтобы задать цвет текста, используется атрибут text. Оформляется он почти так же, как и атрибут bgcolor:
<BODY text="Red"></BODY>
либо<BODY text="#FF0000"></BODY>
Атрибуты «bgcolor» и «text» можно использовать и одновременно:
<BODY bgcolor="Green" text="Red"></BODY>
Вместо bgcolor можно использовать другой атрибут — background. Этот атрибут позволяет назначить в качестве фона HTML страницы — картинку.
Оформляется этот атрибут следующим способом:
<BODY background="http://site.site/kartinka.jpg">
где site.site — адрес вашего сайта, а kartinka.jpg — изображение, которое будет фоном вашей HTML страницы.
Пример элементарного шаблона сайта с использованием атрибутов тега «body»:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ключевые, слова" />
<meta name="description" content="описание сайта" />
<title>Наш сайт!</title>
</HEAD>
<BODY bgcolor="Green" text="Red">
Атрибуты тега "Body"!!!
</BODY></HTML>
Скачать пример HTML шаблона: stranichkahtml.zip
Пример получился, конечно, не ахти, поэтому впереди Вас ждет ещё много уроков HTML!
Бюро Погодаева — продвижение сайта цены
Почта: [email protected]
Телефон: +7(495)966-28-77
При верстке шаблонов и дизайнов верстальщики редко используют атрибуты тега «body», обычно эти параметры задаются в CSS. Как подключить css-стили к шаблону можно прочитать в Уроке №3: Как подключить CSS стили оформления в шаблоне?. О том, как правильно оформить «тело» сайта, я расскажу в следующем уроке №5. И помните, что создание HTML сайта не так сложно, как это кажется в начале!
HTML против Body в CSS
От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html.
Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.
Как элементы HTML и body связаны друг с другом
Давайте рассмотрим стандартную структуру базового HTML документа:
<!DOCTYPE html> <html lang=»en»> <head> <!— Мета-данные и т.д. —> </head> <body> <!— Здесь начинается контент —> <body> </html>
<!DOCTYPE html> <html lang=»en»>
<head> <!— Мета-данные и т.д. —> </head>
<body> <!— Здесь начинается контент —> <body>
</html> |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ спецификации html определяется как корневой элемент документа, и мы можем это четко видеть из вышеприведенного примера: элемент html находится на самом верхнем уровне по сравнению с другими элементами. Выше подниматься уже некуда, т.е. это самый первый элемент, от которого могут наследоваться стили.
Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне.
Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор :root. Следующие два селектора являются равнозначными:
За исключением того, что селектор :root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1).
Поэтому нам следует всегда задавать глобальные стили для html, правильно?
Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили.
Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:
background
bgcolor
marginbottom
marginleft
marginright
margintop
text
В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):
background — background
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееbgcolor — background, background-color
marginbottom — margin-bottom
marginleft — margin-left
marginright — margin-right
margintop — margin-top
text — font
Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html.
Поэтому нам следует всегда задавать глобальные стили для body, правильно?
Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.
Работа с единицами измерения rem
Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого:
.module { width: 40rem; }
.module { width: 40rem; } |
Единица измерения rem, в данном случае, будет относительной по отношению к значению свойства font-size у элемента html, который и является корнем документа. Таким образом, элемент с классом .module будет масштабироваться в зависимости от того, какое значение задано у пользователя по умолчанию для корня документа.
У Джонатана Снука (Jonathan Snook) есть классическая статья, которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem.
Причудливое свойство background-color
Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html.
Если нужно, чтобы фоновый цвет заливал всю область просмотра, то лучше всего сразу задать его для элемента html.
Заключение
Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body.
Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS.
Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях!
Автор: Geoff Graham
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть| HTML | WebReference
Элемент <tbody> (от англ. table body — тело таблицы) предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Допускается применять несколько элементов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.
Синтаксис
<table>
<thead> .... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
Закрывающий тег
Не обязателен.
Атрибуты
- align
- Определяет выравнивание текста в строке.
- char
- Выравнивание содержимого ячеек относительно заданного символа.
- charoff
- Смещение содержимого ячеек относительно указанного символа.
- bgcolor
- Цвет фона ячеек, которые расположены внутри контейнера <tbody>.
- valign
- Выравнивание содержимого ячеек по вертикали.
Также для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TBODY</title>
</head>
<body>
<table border="1">
<tbody align="right">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</tbody>
</table>
</body>
</html>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 10.10.2018
Редакторы: Влад Мержевич
Тег | HTML справочник
HTML тегиЗначение и применение
Следующие HTML теги используются для разделения таблицы на части:
- Тег <thead> используется для содержания заголовка группы в таблице («шапка таблицы», не путайте с заголовками).
- Тег <tfoot> используется для содержания «подвала» таблицы (футер).
- Тег <tbody> используется для содержания «тела» таблицы (боди).
Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).
Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right center justify char | Не поддерживается в HTML5. Выравнивает содержимое внутри элемента. |
char | character | Не поддерживается в HTML5. Выравнивает содержимое в элементе по заданному символу. Атрибут char может быть использован только если атрибут align = «char». |
charoff | number | Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание в элементе с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char». |
valign | top bottom baseline middle | Не поддерживается в HTML5. Вертикальное выравнивание содержимого внутри элемента. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <tbody></title> </head> <body> <table> <thead> <tr> <th>Услуга</th><th>Стоимость</th> </tr> </thead> <tfoot> <!-- Тег <tfoot> применяется для создания подвала таблицы. Его принято писать после тега<thead>, но отображается он в самом низу таблицы. --> <tr> <td>Сумма</td><td>3 000</td> </tr> </tfoot> <tbody> <tr> <td>Чтение в слух</td><td>1 000</td> </tr> <tr> <td>Игра на перфораторе</td><td>2 000</td> </tr> </tbody> </table> </body> </html>
Результат нашего примера:
Пример использования тегов <thead>, <tbody> и <tfoot>.Отличия HTML 4.01 от HTML 5
В HTML 5 были удалены все атрибуты тега.Значение CSS по умолчанию
tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиHTML vs Body в CSS
Разница между <html> и <body> очевидна. Это, пожалуй, одна из тех вещей, которые попадают в категорию тривиальных. Тем не менее, у меня есть плохая привычка применять глобальные стили к <body>, а если что-то не работает, переносить в <html>, не задумываясь.
Тем не менее, и новичкам и ветеранам неплохо понимать различия между этими элементами. В этой статье мы поговорим о них, а также рассмотрим некоторые примеры, когда имеет смысл применение стилей к тому или иному элементу.
Как связаны html и body
Рассмотрим стандартную структуру для базового HTML документа:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
Спецификация определяет <html> как корневой элемент документа, и мы ясно видим, что в приведенном примере <html> является элементом самого верхнего уровня. Здесь нет уровней, откуда могли бы быть унаследованы стили.
Непосредственно в <html> находятся только два элемента: <head> и <body>. На самом деле, спецификация определяет <body> прямо противоположно <head>, поскольку это два элемента, которые необходимо различать.
Итак, суть в том, что <html> является корневым элементом документа, а <body> является потомком, содержащимся в нем. Cелектор :root в CSS и html определяют одно и то же:
:root {
}
html {
}
Единственное отличие в том, что :root имеет большую специфичность: (0, 0, 1, 0) против (0, 0, 0, 1).
Таким образом, мы всегда должны применять глобальные стили к <html>, не так ли?
Это наталкивает на мысль, что все стили, которые должны быть унаследованы всеми элементами, необходимо применять к <html>, поскольку это корневой элемент в документе. Элемент <html> идет выше <body> в иерархии, поэтому должен содержать все глобальные стили.
Но это не совсем так. На самом деле, ряд атрибутов в спецификации изначально был связан с элементом <body>:
- background
- bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
Поскольку эти атрибуты в настоящее время считаются устаревшими, рекомендуется вместо них использовать соответствующие CSS свойства:
Атрибут | CSS свойство |
---|---|
background | background |
bgcolor | background background-color |
marginbottom | margin-bottom |
marginleft | margin-left |
marginright | margin-right |
margintop | margin-top |
text | font |
Учитывая, что эти свойства CSS возникли из встроенных атрибутов, которые были связаны с <body>, представляется целесообразным применять их непосредственно к <body> в CSS, а не к элементу <html>.
Таким образом, мы всегда должны применять глобальные стили к <body>, не так ли?
Ну, не совсем. Все-таки есть ситуации, где имеет смысл применить стили к <html>. Давайте рассмотрим пару таких сценариев.
Работа с единицами измерения rem
Единица измерения rem связана с корнем документа. Например, если написать что-то вроде этого:
.module {
width: 40rem;
}
Единица измерения rem рассчитывается относительно font-size элемента <html>, который является корнем документа. Таким образом, класс .module будет масштабироваться относительно корневого уровня.
Классический пост Джонатана Снука прекрасно иллюстрирует, как задать font-size элемента <html> в процентах для работы с rem.
Хитрый background-color
Существует одна странная вещь в CSS, если задать background-color элементу <body>, он заливает весь вьюпорт, даже если элемент не занимает все пространство. Если при этом задать background-color для <html>, этого не происходит.
Подводя итог
Надеюсь, эта статья проливает некоторый свет на ключевые различия между использованием <html> и <body> в CSS. Есть также различия в JavaScript. Например, получить элемент <html> можно с помощью document.rootElement, а <body> с помощью document.body.
Мы могли бы, конечно, более детально рассмотреть технические различия между ними, но цель в данном случае, углубить понимание, чтобы принимать более обоснованные решения при написании CSS.
Есть ли у вас другие примеры, где это имеет смысл задавать стили именно для <html> или для <body>?