Body css: Тег | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
1.0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Элемент <body> предназначен для хранения содержания
веб-страницы (контента), отображаемого в окне браузера. Информацию, которую
следует выводить в документе, следует располагать именно внутри контейнера <body>.
К такой информации относится текст, изображения, теги, скрипты JavaScript и
т.д.

Тег <body> также применяется для определения
цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается
и взамен для указания цветовой схемы рекомендуется использовать стили, применяя
их к селектору BODY. Тем не менее, большинство атрибутов
до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения
обработчика событий, например, onload, которое
выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <body> на веб-странице
не являются обязательными, однако хорошим стилем считается их использование,
чтобы определить начало и конец HTML-документа.

Синтаксис

<body>
  ...
</body>

Атрибуты

alink: Устанавливает цвет активной ссылки.
background: Задает фоновый рисунок на веб-странице.
bgcolor: Цвет фона веб-страницы.
bgproperties: Определяет, прокручивать фон совместно с текстом или нет.
bottommargin: Отступ от нижнего края окна браузера до контента.
leftmargin: Отступ по горизонтали от левого края окна браузера до контента.
link: Цвет ссылок на веб-странице.
rightmargin: Отступ от правого края окна браузера до контента.
scroll: Устанавливает, отображать полосы прокрутки или нет.
text: Цвет текста в документе.
topmargin: Отступ от верхнего края окна браузера до контента.
vlink: Цвет посещенных ссылок.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Открывающий и закрывающий теги не обязательны.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег BODY</title>
  <meta charset="utf-8">
 </head>
 <body onload="alert('Документ загружен')">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат текущего примера показан на рис. 1. При использовании события onload тега <body> выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе

Урок 5: «Тело» сайта, тег «body» + CSS

Довольно редко я пишу html уроки, а писать их надо… Ну что же? Продолжим дальше?
Итак, сегодня я расскажу о том, как оформить «тело сайта» через CSS.

Что нужно сделать перед тем, как начать оформлять «тело сайта»?

1) Прочитать уроки HTML верстки 1 — 4

2) Создать файл CSS в той же папке, где храниться ваш HTML шаблон с названием style.css (бывает, что создают его и под названием main.css)

3) Подключить только что созданный файл css следующей строчкой:

<link rel="stylesheet" href="style.css" type="text/css" >

Более подробно об этом написано в уроке №3

4) Читать статью дальше.

Итак, Вы создали файл style.css и подключили стили в своем HYML-шаблоне. Сейчас Вам нужно в css-файле написать слово body и открыть стили знаком «{» без кавычек. Дальше Вы можете указать общий цвет текста на страницы, шрифт и размер текста, фон, отступы, выравнивание и другие параметры. Дальше нужно закрыть класс знаком «}» без кавычек. Должно получиться примерно так:

body {
  color: #000; /*Цвет текста: черный*/
  background: #FFFFFF; /*Цвет фона: белый*/ 
  word-wrap: break-word; /*Переносить слово, если не влезает: да*/
  font-size: 65%; /*Размер текста: 65%*/
  font-family: Verdana, Arial, Sans-Serif; /*Шрифты:Verdana, Arial, Sans-Serif*/
}

Обращаю внимание на то что, каждый новый стиль пишется с новой строки или через пробел, а также после стилей ставится точка с запятой. Комментарии в css обозначаются следующим образом: /*комментарий*/ .

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

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

На сегодня Всё, создавайте сайт самостоятельно, последнее время цены так кусаются…

HTML против Body в CSS

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

Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.

Как элементы HTML и body связаны друг с другом

Давайте рассмотрим стандартную структуру базового HTML документа:

<!DOCTYPE html>
<html lang=»en»>

<head>
<!— Мета-данные и т.д. —>
</head>

<body>
<!— Здесь начинается контент —>
<body>

</html>

<!DOCTYPE html>

<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 справочник

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

Описание

HTML тег <body> определяет содержимое (контент) HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.). Он должен быть единственным в документе и всегда должен располагаться внутри элемента <html>, сразу после элемента <head>.

Тег <body> часто используется для размещения обработчиков событий, например onload, который позволяет выполнить скрипт после того, как содержимое документа будет загружено.

Примечание: все атрибуты (vlink, text, link, bgcolor, background, alink), ранее используемые с элементом <body>, считаются устаревшими и запрещены к использованию в HTML5, поэтому для определения цвета заднего фона, цвета текста или ссылок, а так же для добавления фонового изображения и т.д. используйте CSS.

Элемент <body> является блочным и по умолчанию имеет небольшой внешний отступ со всех сторон, его высота определяется его содержимым. Чтобы растянуть его на всю высоту окна браузера, нужно указать высоту для него и для элемента <html> равную 100%:

html, body { height: 100%; }

Несмотря на то, что по умолчанию высота элемента <body> не охватывает всё окно браузера, если указать фон для него, он будет охватывать всю видимую область, однако если установить фон и для элемента <body> и для элемента <html>, то фон элемента <body> будет равняться его текущей высоте.

Атрибуты

Тег <body> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


body {
    display: block;
    margin: 8px;
}

body:focus {
    outline: none;
}

Пример


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>

  <body>
    Содержимое страницы
  </body>

</html>

Результат данного примера в окне браузера:

| Справочник HTML

Элемент <body> (от англ. «body» ‒ «тело») предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.).

Примечание: Открывающий тег элемента <body> может быть опущен, если первым элементом в нём не являются символ пробела, комментарий, элементы <script> или <style>. Закрывающий тег может быть опущен, если элемент body имеет содержимое или начальный тег, и за ним непосредственно не следует комментарий.

Синтаксис

<body>...</body>

Закрывающий тег

Не обязателен.

Атрибуты

alinkУстарел в HTML5: Устанавливает цвет активной ссылки. Используйте вместо него свойство CSS color в сочетании с псевдоклассом :active.
backgroundУстарел в HTML5: Задает фоновый рисунок на веб-странице. Используйте вместо него свойство CSS background.
bgcolorУстарел в HTML5: Цвет фона веб-страницы. Используйте вместо него свойство CSS background-color.
bgpropertiesУстарел в HTML5: Определяет, прокручивать фон совместно с текстом или нет. Используйте вместо него свойство CSS background-attachment.
bottommarginУстарел в HTML5: Отступ от нижнего края окна браузера до контента. Используйте вместо него свойство CSS margin-bottom.
leftmarginУстарел в HTML5: Отступ по горизонтали от левого края окна браузера до контента. Используйте вместо него свойство CSS margin-left.
linkУстарел в HTML5: Цвет ссылок на веб-странице.
rightmarginУстарел в HTML5: Отступ от правого края окна браузера до контента. Используйте вместо него свойство CSS margin-right.
scrollУстарел в HTML5: Устанавливает, отображать полосы прокрутки или нет. Используйте вместо него свойство CSS overflow.
textУстарел в HTML5: Цвет текста в документе. Используйте вместо него свойство CSS color.
topmarginУстарел в HTML5: Отступ от верхнего края окна браузера до контента. Используйте вместо него свойство CSS margin-top.
vlinkУстарел в HTML5: Цвет посещённых ссылок. Используйте вместо него свойство CSS color в сочетании с псевдоклассом :visited.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <body> со следующими значениями CSS по умолчанию:

body { 
    display: block;
    margin: 8px;
}

body:focus { 
    outline: none;
}

Различия между HTML 4.01 и HTML5

Все используемые ранее атрибуты, были удалены из HTML5.

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

Элемент <body>

Пример HTML:

Попробуй сам

<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Содержимое документа...
</body>
</html>

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

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

Элемент
<body>	1+	1+	1+	1+	1+	1+

Элемент
<body>	1+	1+	6+	1+

Тег HTML область контента. Атрибуты, параметры, закрывающий тег

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

Текст, картинки, формы, блоки, таблицы, списки и т.д. — все это указывают внутри тега <body>. Перед тегом body может находиться тег <head>, предназначенный в основном для хранения системной информации (подробнее про head).

Синтаксис

<body>контент веб страницы</body>

Закрывающий тег body

По условиям спецификации HTML5 использовать закрывающий тег body не обязательно. Браузеры при этом ставят </body> тег автоматически, просчитывая его место в коде. Однако, во избежания внештатных ситуаций мы рекомендуем все-таки ставить закрывающий тег body вручную в документе.

Перед закрывающим тегом <body> часто ставят подключение скриптов JavaScript. Например, системные скрипты для работы сайта, скрипты визуальных элементов (галерей, слайдеров, эффектов плавности и т.п.), скрипты счетчиков посещаемости Google Analytics и Яндекс Метрика (рекомендации по месту установки счетчиков могут меняться, смотрите инструкции от Google и Яндекс на момент установки).

Пример использования <body> в HTML коде

<html>
<head>
<!-- содержимое head области -->
</head>
<body>
<!-- начало контента страницы -->
<p>Какой-то абзац</p>
<div>Какой-то блок</div>
<!-- конец контента страницы -->
</body>
</html>

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

Устаревшие атрибуты тега body

В HTML5 тег <body> не имеет параметров или атрибутов. Ниже в таблице приведены устаревшие атрибуты тега body. Используйте стилизацию с помощью CSS вместо них.

Атрибут	Описание
alink	Цвет активной ссылки (цвет ссылки при клике на нее)
background	Фоновая картинка страницы
bgcolor	Фоновый цвет страницы
link	Цвет непосещенных ссылок
text	Цвет текста на странице
vlink	Цвет ссылок по которым был переход (посещенных данным пользователем)

| HTML | WebReference

Элемент <body> (от англ. body — тело) предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т. д.

<body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору body.

Часто <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Закрывающий тег

Не обязателен.

Атрибуты

alink: Устанавливает цвет активной ссылки.
background: Задает фоновый рисунок на веб-странице.
bgcolor: Цвет фона веб-страницы.
bgproperties: Определяет, прокручивать фон совместно с текстом или нет.
bottommargin: Отступ от нижнего края окна браузера до контента.
leftmargin: Отступ по горизонтали от левого края окна браузера до контента.
link: Цвет ссылок на веб-странице.
rightmargin: Отступ от правого края окна браузера до контента.
scroll: Устанавливает, отображать полосы прокрутки или нет.
text: Цвет текста в документе.
topmargin: Отступ от верхнего края окна браузера до контента.
vlink: Цвет посещённых ссылок.

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

Пример

<!DOCTYPE html>
<html>
<head>
<title>BODY</title>
<meta charset=»utf-8″>
</head>
<body onload=»alert(‘Документ загружен’)»>
<p>Еще Аристотель в своей «Политике» говорил,
что музыка, воздействуя на человека, доставляет
«своего рода очищение, то есть облегчение,
связанное с наслаждением».</p>
</body>
</html>

Результат текущего примера показан на рис. 1. При использовании события onload элемента <body> выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2020

Редакторы: Влад Мержевич

HTML против тела в CSS

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

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

Как связаны HTML и основной текст

Рассмотрим эту стандартную структуру для базового документа HTML:

Спецификация определяет как корневой элемент документа, и мы можем ясно видеть это в приведенном выше примере: элемент является самым верхним уровнем всех других элементов.На этом деньги останавливаются, потому что больше нет уровней, кроме тех, от которых стили могут быть унаследованы.

Отсюда и составляют единственные два элемента, которые попадают непосредственно внутрь . Фактически, спецификация определяет прямо в отличие от , поскольку это единственные два элемента, которые необходимо различать.

Итак, суть в том, что — это корневой элемент документа, где — это потомок, содержащийся в нем.Фактически, в CSS есть селектор : root . Они нацелены на одно и то же:

 : root {

}
html {

}

За исключением : корень имеет более высокую специфичность: (0, 0, 1, 0) vs (0, 0, 0, 1).

Значит, мы всегда должны помещать глобальные стили на , верно?

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

Но это не совсем так. Фактически, встроенные атрибуты для следующих элементов изначально были присвоены в спецификации:

фон
bgcolor
край снизу
маржа слева
маржа
margintop
текст

Пока эти атрибуты

HTML-стилей CSS

CSS — это каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких
веб-страницы сразу.

Управление текстом

цветов,
Ящики

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

С помощью CSS вы можете контролировать цвет, шрифт, размер текста, интервал
между элементами, как элементы расположены и расположены, какой фон
должны использоваться изображения или цвета фона, разные дисплеи для разных устройств
и размеры экрана, и многое другое!

Совет: Слово каскадно означает, что стиль
примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри
родитель.Итак, если вы установите цвет основного текста на «синий», все заголовки,
абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете
что-то другое)!

Использование CSS

CSS можно добавить в HTML-документы тремя способами:

Встроенный — с использованием атрибута стиля внутри HTML-элементов
Внутренний — с использованием элемента