Css body: Тег body | Справочник HTML CSS — Вебджем.рф | Создание и продвижение сайтов

Содержание

— HTML | MDN

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

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

alink Этот API вышел из употребления и его работа больше не гарантируется.

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

background Этот API вышел из употребления и его работа больше не гарантируется.

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

bgcolor Этот API вышел из употребления и его работа больше не гарантируется.

Цвет фона документа.

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

bottommargin Этот API вышел из употребления и его работа больше не гарантируется.

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

leftmargin Этот API вышел из употребления и его работа больше не гарантируется.

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

link Этот API вышел из употребления и его работа больше не гарантируется.

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

(en-US) вместе с псевдоклассом :link.

onafterprint

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

onbeforeprint

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

onbeforeunload

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

onblur

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

onerror

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

onfocus

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

onhashchange

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

onlanguagechange Экспериментальная возможность

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

onload

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

onmessage

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

onoffline

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

ononline

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

onpopstate

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

onredo

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

onresize

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

onstorage

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

onundo

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

onunload

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

rightmargin Этот API вышел из употребления и его работа больше не гарантируется.

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

text Этот API вышел из употребления и его работа больше не гарантируется.

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

topmargin Этот API вышел из употребления и его работа больше не гарантируется.

Отступ от верхнего края элемента <body>

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

vlink Этот API вышел из употребления и его работа больше не гарантируется.

Цвет текста посещённой гипертекстовой ссылки. Этот метод не согласован, вместо него используйте 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

with JavaScript enabled.

Enable JavaScript to view data.

<html>
<head>

Last modified: 7 нояб. 2022 г., by MDN contributors

Тег | 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. Всплывающее окно в документе

Документ

Структура HTML-кода
Структура XHTML-документа
Теги верхнего уровня
Цвет ссылок

&двоеточие; Элемент «Тело документа» — HTML: Язык гипертекстовой разметки

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

Этот элемент включает глобальные атрибуты.

ссылка «> Устаревший

Цвет текста для гиперссылок при выборе. Не используйте этот атрибут! Используйте CSS 9Вместо этого свойство 0004 color в сочетании с псевдоклассом :active .

фон Устаревший

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

цвет Устаревший

Цвет фона документа.

Не используйте этот атрибут! Вместо этого используйте свойство CSS background-color для элемента.

нижнее поле Not for use in new websites.»> Устаревший

Край нижней части тела. Не используйте этот атрибут! Вместо этого используйте свойство CSS margin-bottom для элемента.

левое поле Устаревший

Край левой части тела. Не используйте этот атрибут! Вместо этого используйте свойство CSS margin-left для элемента.

ссылка Устаревший

Цвет текста для непосещенных гипертекстовых ссылок. Не используйте этот атрибут! Используйте цвет CSS в сочетании с псевдоклассом :link .

после печати

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

перед печатью

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

перед выгрузкой

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

размытие

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

при ошибке

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

онфокус

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

onhashchange

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

onlanguagechange

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

под нагрузкой

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

сообщение

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

в автономном режиме

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

онлайн

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

onpopstate

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

онредо

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

при изменении размера

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

на складе

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

онундо

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

при разгрузке

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

правое поле Устаревший

Поле справа от тела. Не используйте этот атрибут! Используйте CSS свойство margin-right для элемента вместо этого.

текст Устаревший

Основной цвет текста. Не используйте этот атрибут! Вместо этого используйте свойство CSS color для элемента.

верхнее поле Not for use in new websites.»> Устаревший

Край верхней части тела. Не использовать этот атрибут! Вместо этого используйте свойство CSS margin-top для элемента.

влинк Устаревший

Цвет текста посещенных гиперссылок. Не используйте этот атрибут! Вместо этого используйте свойство CSS color в сочетании с псевдоклассом :visited .

 
  <голова>
    Название документа
  
  <тело>
    Это абзац

Загрузка таблиц браузера только BCD9. Включите JavaScript для просмотра данных.

<голова>

Последнее изменение: 31 октября 2022 г. , участниками MDN

html — CSS стиль тега BODY, проблема

спросил 11 лет, 1 месяц назад

Изменено 11 лет, 1 месяц назад

Просмотрено 43к раз

Я давно не занимался разработкой CSS/HTML, и у меня возникли некоторые проблемы со стилем тега body с помощью CSS.

Я стремлюсь сделать так, чтобы HTML-тег был оформлен с использованием цвета фона, а затем стилизовал тег body так, чтобы он имел ширину 80% и другой цвет фона, и все это работает нормально.

Проблема в том, что цвет фона опускается только на одну высоту экрана, а затем исчезает, и я не могу понять, почему!

Мой CSS:

 body {
    ширина: 80%;
    поле слева: авто;
    поле справа: авто;
    минимальная высота: 100%;
    высота:100%;
    цвет фона: #FFFFFF;
    радиус границы: 20px;
    -moz-border-radius: 20px
}
HTML {
    цвет фона: #000000;
    высота: 100%
}
заголовок, навигация, статья {
    дисплей: блок
}
навигация {
    плыть налево;
    ширина: 20%
}
статья {
    поплавок: справа;
    ширина: 79%
}

Буду рад любым предложениям, спасибо.

РЕДАКТИРОВАТЬ: после всех предложений здесь лучший результат, который я мог получить с помощью моего CSS, выглядит так:

 #content
{
    ширина: 80%;
    поле слева: авто;
    поле справа: авто;
    высота:100%;
    минимальная высота: 500 пикселей;
    цвет фона: #FFFFFF;
    радиус границы: 20px;
    -moz-border-radius: 20px;
}
html, тело
{
    цвет фона: #000000;
    маржа: 0;
    заполнение: 0;
    высота: 100%;
}
заголовок, навигация, статья
{
    дисплей: блок
}
навигация
{
    плыть налево;
    ширина: 20%
}
статья
{
    поплавок: справа;
    ширина: 79%
}

Это все еще не делает то, что я хочу, но это CSS, который лучше всего работает с оболочкой до сих пор

html
css

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

Вот почему:

 тело {
    высота:100%;
}
HTML {
    высота: 100%;
}

Спросите себя: 100% что? Ответ , а не 100% содержимого. Высота в процентах всегда относится к проценту от высоты родительский элемент . Поскольку вы не указали явную высоту (в пикселях), браузер использует высоту области просмотра и вычисляет высоту тела как 100% от этой.

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

Если вы не укажете высоту для html или body , они будут такими же высокими, как содержимое, но фон для html по-прежнему будет заполнять окно просмотра.

Итак, решение таково:

 html {
    высота:100%;
    /* устанавливает html на высоту области просмотра
      (цвет bg по-прежнему будет закрывать область просмотра) */
}
тело {
    /* не задавайте явную высоту */
    минимальная высота: 100%;
    /* расширяет тело до высоты html,
       но позволяет ему расширяться дальше
       если содержимое выше области просмотра */
}

Вам не нужны дополнительные элементы контента; корпус ведет себя как любой другой элемент. Только html немного отличается, поскольку его фоновый цвет будет охватывать всю область просмотра, даже если вычисленная высота отличается от области просмотра или любых дочерних элементов.

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

Дело в том, что вы явно установили высоту элемента body на 100%; вам нужен только атрибут min-height, если он всегда должен быть как минимум на один экран выше.

Я бы также не стал изменять размер элемента body до ширины 80%, я бы предпочел использовать для этого элемент внутри тела.

Может возникнуть несколько проблем:

Во-первых, попробуйте поменять местами минимальную высоту и высоту, потому что, устанавливая высоту после минимальной высоты, вы эффективно переопределяете минимальную высоту.

Во-вторых, проверьте свой браузер, т. е. 7 и ниже, я думаю, не поддерживают минимальную высоту, попробуйте примеры w3schools, чтобы увидеть, правильно ли они работают в вашем браузере.

В-третьих, вы можете обернуть свой контент либо во вкладки контента для html5 (с помощью ie hack), либо в div, потому что ie. снова не будет правильно отображать тег body.

Наконец, я бы установил минимальную высоту на произвольное значение, например 500 пикселей, потому что 100% просто гарантирует, что она достаточно велика, чтобы вместить содержимое.

высота: 100%; минимальная высота: 500 пикселей;

Задайте для тела только фоновый цвет и поместите обертку вокруг содержимого. Стилизация этого обертывающего div — лучший способ, если вы хотите центрировать весь контент, поскольку установите ширину тела на 80%. Способ с обертыванием div также упрощает закругление угла.

Пример результирующего html:

 <дел> .... Ваш контент .Навигация по записям
Что вы делаете чтобы снять стресс: Как снять стресс и обрести душевное равновесие — Лайфхакер
Smm менеджер должность: кто это, чем он занимается и сколько зарабатывает
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  

  
Рубрики
Css
Html
Js
Адаптивный сайт
Верстка
Идеи
С чего начать
Советы
Шаблоны
Разное
 © Компания  Вебджем.рф  2009 - 2024 | Все права защищены.

Спецификация
Стандарт HTML # the-body-element