Body css: Атрибут bgcolor | htmlbook.ru

Leave a Comment / Css / By /

Тег body

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

Простой HTML-документ с минимальным количеством требуемых тегов:

<html>
<head>
<title>Название документа</title>
</head>

<body>
Содержание документа……
</body>

</html>

Определение и использование

Тег <body> определяет тело документа.

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

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

Элемент
<body>ДаДаДаДаДа

Различия между HTML 4,01 и HTML5

Все атрибуты макета удаляются в HTML5.

Атрибуты

АтрибутЗначениеОписание
alinkcolorНе поддерживается в HTML5.
Задает цвет активной ссылки в документе
backgroundURLНе поддерживается в HTML5.
Задает фоновое изображение для документа
bgcolorcolorНе поддерживается в HTML5.
Задает цвет фона документа
linkcolorНе поддерживается в HTML5.
Задает цвет непосещаемых ссылок в документе
textcolorНе поддерживается в HTML5.
Задает цвет текста в документе
vlinkcolorНе поддерживается в HTML5.
Определяет цвет посещенных ссылок в документе

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

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

Атрибуты события

Тег <body> также поддерживает Атрибуты событий в HTML.

Похожие страницы

HTML Учебник: HTML Элементы

HTML DOM Ссылки: Body Объекта

HTML DOM Ссылки: document.body Свойство

Параметры CSS по умолчанию

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

Пример

body {
    display: block;
    margin: 8px;
}

body:focus {
    outline: none;
}

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

css — Тэги и : какому следует присваивать стили визуального оформления всей страницы?

Вопрос задан

Изменён 6 лет 4 месяца назад

Просмотрен 780 раз

В некоторых примерах я видел, что тегу <html> устанавливают параметры margin, padding и другие, а сам всегда начинал присвоение стилей с <body>. Вопрос такой: какая разница с точки зрения визуального оформления (color, background-color, padding, margin и т. д.) между <body> и <html>, или какому тегу из этих двух тэгов можно присваивать стили, а какому — не стоит?

  • html
  • css

1

Вообще, любому из них — в зависимости от того, что удобнее.

Но есть несколько особенностей.

Единица измерения rem — это размер шрифта html (или :root), но не body:

html { font-size: 100px; }
section { font-size: 20px; } /* drop inheritance */
div { font-size: 1rem; } /* 100px */
<section><div>123</div></section>
body { font-size: 100px; }
section { font-size: 20px; } /* drop inheritance */
div { font-size: 1rem; } /* default */
<section><div>123</div></section>

Если задан фон только у body, то он распространяется на html. Но если у обоих, то он будет разный. По умолчанию body не занимает весь экран — добавим границ:

body {
  background: silver;
  border: 4px solid red;
}
Just some text
html {
  background: white; /* not taken from body now */
}

body {
  background: silver;
  border: 4px solid red;
}
Just some text

По умолчанию body имеет отступы:

html {
  margin: 0; /* doesn't work */
}

body {
  border: 4px solid red;
}
Just some text
body {
  border: 4px solid red;
  margin: 0; /* reset here, not on html */
}
Just some text

Элементы из head не обязаны быть невидимыми.

(  document.head.querySelector('title')
|| document.head.appendChild(document.createElement('title'))
).textContent = "Just a title";
head, title {
  display: block;
}
Page content goes here. ..

2

Если коротко, то смело присваивайте стили и к <html> и <body> в зависимости от целей вёрстки.

Если подробнее:

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

  3. Т.е. по сути на конструкцию:

    <html>
  <body>
  </body>
</html>

    нужно смотреть как на:

    <div>
  <div>
  </div>
</div>

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

Например:

--------------------------
| HTML                  _|______ Чтобы повлиять на внутренний отступ <html>,
|    ----------------  | |       необходимо будет задать свойство padding
|    | BODY         |<-->|       непосредственно для самого <html>, а иначе 
|    ----------------    |       к этому свойству будет не подобраться.
|                        |       
--------------------------

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Разница в применении CSS к html, body и универсальному селектору *?

спросил

Изменено 2 года, 11 месяцев назад

Просмотрено 20 тысяч раз

Чем эти три правила отличаются при применении к одному и тому же HTML-документу?

 HTML {
    черный цвет;
    цвет фона: белый;
}
тело {
    черный цвет;
    цвет фона: белый;
}
* {
    черный цвет;
    цвет фона: белый;
}
  • HTML
  • CSS
  • CSS-селекторы

3

  1.  html {
    черный цвет;
    цвет фона: белый;
}

    Это правило применяет цвета к элементу html . Все потомки элемента html наследуют его цвет (но не background-color ), включая body . Элемент body не имеет цвета фона по умолчанию, что означает, что он прозрачен, поэтому 9Фон 0029 html будет отображаться до тех пор, пока вы не установите фон для

    body .

    Хотя фон html закрашивается по всей области просмотра, сам элемент html не охватывает всю высоту области просмотра автоматически; фон просто распространяется на область просмотра. Смотрите этот ответ для деталей.

  2.  корпус {
    черный цвет;
    цвет фона: белый;
}

    Это правило применяет цвета к корпус элемент. Все потомки элемента body наследуют его цвет .

    Аналогично тому, как фон html автоматически распространяется на область просмотра, фон body будет автоматически распространяться на html до тех пор, пока вы не установите фон для html . Смотрите этот ответ для объяснения. Из-за этого, если вам нужен только один фон (в обычных обстоятельствах), использование первого или второго правила не будет иметь никакого значения.

    Однако вы можете комбинировать стили фона для html и body с другими трюками, чтобы получить отличные фоновые эффекты, как я сделал здесь. Смотрите приведенный выше связанный ответ, чтобы узнать, как это сделать.

  3.  * {
    черный цвет;
    цвет фона: белый;
}

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

    Поскольку это полностью разрывает цепочку наследования для любого свойства, которое обычно наследуется, например, color , установка этих свойств в правиле * считается плохой практикой, если только у вас нет очень веской причины прерывать наследование таким образом (большинство случаи использования, которые включают нарушение наследования, требуют, чтобы вы сделали это только для одного элемента, а не для всех из них).

5

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

javascript — Как применить CSS к элементу тела HTML?

спросил

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

Просмотрено 67 тысяч раз

Я пытаюсь избавиться от этого:

 document. body.className = "someclass";

Я хочу сделать это в CSS.

 body.someclass {
.
.
.
}

, к сожалению, я не могу заставить это работать в Firefox, chrome.

Я что-то не так делаю? Можем ли мы каким-либо образом применить класс CSS к телу?

  • javascript
  • html
  • xhtml
  • css

Здесь вы делаете две разные вещи. Ваш JavaScript фактически присваивает класс «someclass» вашему элементу body, в то время как ваш CSS — это стиль элемента body с классом «someclass», он не будет назначать ему класс, это не задача CSS. Вы бы сделали это в простом (X)HTML, например:

1

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

ПОСКОЛЬКУ существует только одно тело, я никогда не добавлял к нему идентификатор или класс. Просто стиль:

 корпус {
    цвет фона: красный;
}

Если у вас есть класс, который вы хотите использовать повторно, используйте запятую в селекторе:

 .coolStyle, body {
    вес шрифта: полужирный;
    красный цвет;
    оформление текста: мерцание;
}

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

2

Нет необходимости в классе для тела, так как в вашем документе будет только одно тело. Если, возможно, вы не хотите изменить стиль тела, по какой-то причине изменив класс JavaScript.

Если вам нужно указать класс для тела, сделайте это так:

 <тело>

Затем получите доступ к классу и измените стиль в вашем css следующим образом:

 body.

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

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