Разное

Body html: Атрибут text | htmlbook.ru

04.06.2021

Содержание

— HTML | MDN

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

Категории контента Секционный корень
Разрешённое содержимое Потоковый контент.
Пропуск тега Открывающий тег может быть пропущен, если первое, что находится внутри него, не является пробелом, комментарием, элементом <script> или элементом <style>. Закрывающий тег может быть пропущен если элемент <body> содержит контент или имеет открывающий тег, и за ним сразу не следует комментарий.
Разрешённые родительские элементы Этот элемент должен быть вторым в элементе <html>
Разрешённые роли ARIA Отсутствуют
DOM-интерфейс HTMLBodyElement
  • Элемент <body> представляет интерфейс HTMLBodyElement.
  • Вы можете получить доступ к элементу <body> через свойство document.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 Это экспериментальное API, которое не должно использоваться в рабочем коде.
Функция для вызова при изменении предпочитаемых языков.
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>

BCD tables only load in the browser

Тег | 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 может находиться тег <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 тег 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 определяет отступ от нижнего края окна браузера.
Не поддерживается Firefox!
Отсутствует в спецификации HTML 4.01!
class определяет имя используемого класса
dir задает направление
  • ltr — направление слева направо (по умолчанию)
  • rtl — направление справа налево
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 управляет отображением полос прокрутки
  • yes — отображает полосы прокрутки (по умолчанию)
  • no — запрещает показ полос прокрутки
Работает только в IE!
Отсутствует в спецификации 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> определяет контент HTML документа (текст, изображения, ссылки и т.д.). Он располагается внутри элемента <html>, после тега <head>. В одном документе допускается использование только одного тега <body>.

Синтаксис¶

Tег <body> парный. Его содержимое пишется между открывающим (<body>) и закрывающим (</body>) тегами.

Пример¶

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

Результат¶

Атрибуты¶

Атрибуты Значение Описание
alink color Определяет цвет активной ссылки.
Не используется в HTML5.
background URL Устанавливает фоновое изображение.
Не используется в HTML5.
bgcolor color Определяет цвет фона.
Не используется в HTML5.
link color Определяет цвет непосещенных ссылок.
Не используется в HTML5.
text color Определяет цвет текста документа.
Не используется в HTML5.
vlink color Определяет цвет посещенной ссылки.
Не используется в HTML5.

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

Как добавить стиль к тегу <body> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <body>:

Цвет текста внутри тега <body>:

Стили форматирования текста для тега <body>:

Другие свойства для тега <body>:


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


HTML теги html, head, body — теги, которые есть на любой страничке интернета

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов… И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке — <html>, <head> и <body>. Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — тег-декларация <!DOCTYPE>, поэтому затрагивать его мы не будем.

В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про теги форматирования документа (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги <html>, <head> и <body> ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега <html>


Итак, тег является контейнерным (понятие и виды тегов). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.

Теоретически, он и сам может понять что и как. Ведь что такое браузер? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

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

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. Атрибут title — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Предпочтительнее использовать атрибут title не в теге <html>, а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.

Функция тега <head>


И следующим на очереди идет тег <head>. В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам. Тег является контейнерным и следует сразу после , только в отличии от последнего, закрывающий тег  стоит не в конце документа, а перед открывающим тегом .

Какую же информацию можно увидеть в <head>? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров. Единственное, что вы хоть как-то можете увидеть это тег <title>, который отвечает за заголовок окна веб-страницы. Вот пример:

Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content=»text/html; charset=UTF-8″). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка

		<link href="http://monetavinternete.ru/.../style.css" rel="stylesheet" media="screen" type="text/css" />

указывает на то, что подключен (rel=»stylesheet») файл с каскадными таблицами стилей (type=»text/css»), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей.

Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с блогом на WordPress) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack, поэтому они и присутствуют в пределах <head>.

Все три являются частью внутренней оптимизации сайта. Тег описания может выступать в роли сниппета в поисковой выдаче (вопрос довольно спорный, но все-таки следует заполнить данный тег). С ключевыми словами, думаю, итак все понятно. А вот тег canonical указывает поисковой системе дублированные страницы (страницы, на которых имеется схожий контент) для того, чтобы не попасть под фильтр за неуникальность контента.

Функции тега <body>


Вот он — основной тег интернет-страницы. Все, что вы видите в окне своего браузера — содержимое тега <body>. Здесь находится все: и текст, и html-код, и изображения, и скрипты. Так что много рассказывать про данный тег не буду. Из атрибутов могу отметить несколько:
  1. Background — устанавливает определенный фон на всю веб-страницу. Источник вы указываете сами
  2. text — устанавливает цвет текста. Цвет, обычно, указывают в html-коде. Например, #8958FC
  3. bgcolor — устанавливает цвет фона, если не задано фоновое изображение с помощью первого атрибута
  4. bgproperties — параметр динамичности фона — прокручивать его вместе со всей страницей, или же оставить на месте.

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

Один интересный факт. Все вы знаете, что браузеры появлялись версия за версией и каждый мог разбирать определенное количество тегов. Возьмем один из первых браузеров — Интернет Эксплорер. Факт заключается в том, что в 1-ой версии поддерживался лишь <body>, во 2-ой — <html>, и, наконец, в 3-ей — <head>. Версии реализовывались довольно быстро, откуда можно сделать вывод о значимости тегов и скорости развития технологий.

Напоследок скажу, что не забывайте прописывать данные теги. Хотя сейчас каждая CMS — система управления контентом — делает это сама. До скорых встреч на страницах блога MonetaVInternete.ru!

Элемент BODY. HTML, XHTML и CSS на 100%

Элемент BODY

Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом <BODY> и закрывающим тегом </BODY>, будет отображаться браузером. Все элементы, отвечающие за форматирование документа, помещают внутрь элемента BODY.

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

Сначала рассмотрим атрибуты элемента BODY, управляющие отображением ссылок. Для удобства посетителей страницы надо задавать разные цвета для посещенных, непосещенных и активных ссылок, при этом нужно следить, чтобы они не сливались с цветом фона страницы, потому что это будет неудобно посетителям.

За цвет ссылок отвечают следующие атрибуты элемента BODY:

• alink – задает цвет активной ссылки;

• vlink – определяет цвет посещенной ссылки;

• link – устанавливает цвет непосещенной ссылки.

Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.

В примере из листинга 1.12 представлены оба варианта записи.

Листинг 1.12. Цвет ссылок

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<base href=»http://www.test.test/» target=»_blank» />

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<title>Использование элемента BODY</title>

</head>

<body alink=»#00FF00″ vlink=»red» link=»#330000″>

</body>

</html>

В примере для активной и непосещенной ссылки цвет задан с помощью цифр и букв: они определяют код цвета в шестнадцатеричном формате и записываются в качестве значения соответствующего атрибута после знака #. Для посещенной ссылки цвет задан ключевым словом. Использовать ключевые слова просто. В качестве обозначения цвета с их помощью применяются стандартные названия цветов на английском языке. Указывайте простые названия цветов вроде blue, red, black и не ошибетесь.

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

Элемент BODY предоставляет большие возможности для управления фоном страницы. Рассмотрим атрибуты, отвечающие за это.

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

Следующий атрибут управляет прокруткой фона и называется bgproperties. Он определяет, будет ли фон прокручиваться вместе с текстом. Этот атрибут принимает всего одно значение fixed, позволяющее зафиксировать фон документа и не прокручивать его вместе с текстом. В противоположном случае нужно просто удалить этот атрибут. При выборе параметров прокрутки фона надо действовать очень осторожно и следить за тем, чтобы при прокрутке не терялась читаемость текста.

В листинге 1.13 представлен пример использования атрибутов элемента BODY, отвечающих за фон документа.

Листинг 1.13. Параметры фона

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

<head>

<base href=»http://www.test.test/» target=»_blank» />

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<title>Использование элемента BODY</title>

</head>

<body background=»test.jpg» bgcolor=»#0033CC» bgproperties=»fixed»>

</body>

</html>

В примере из листинга 1.13 файл test. jpg оформлен в синих тонах, поэтому и цвет фона взят из синей гаммы. Прокрутка фона вместе с текстом запрещена.

После того как мы разобрались с фоном, можно задать положение содержимого страницы относительно границ окна браузера.

За отступ от границ окна отвечают следующие атрибуты элемента BODY:

• bottommargin – определяет расстояние от нижнего края окна браузера до содержимого страницы;

• leftmargin – указывает расстояние от левого края окна браузера до содержимого страницы;

• topmargin – задает расстояние от верхнего края окна браузера до содержимого страницы.

Расстояние для всех атрибутов устанавливается в пикселах.

В листинге 1.14 приведен пример указания расстояния до содержимого страницы с помощью атрибутов элемента BODY.

Листинг 1.14. Установка расстояния от границ окна до содержимого страницы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

<head>

<base href=»http://www.test.test/» target=»_blank» />

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<title>Использование элемента BODY</title>

</head>

<body topmargin=»10″ leftmargin=»20″ bottommargin=»10″>

</body>

</html>

В примере расстояние сверху и снизу будет по 10 пикселов, а слева – 20 пикселов.

У элемента BODY есть еще два атрибута, которые могут нам пригодиться. Атрибут text отвечает за цвет текста в документе. Когда задаете цвет текста, следите, чтобы он не сливался с фоном страницы.

Атрибут scroll определяет, будет ли в окне документа вертикальная полоса прокрутки. У него всего два значения: yes и no, обозначающие разрешить и запретить прокрутку соответственно. На самом деле запрещать прокрутку не стоит, потому что документ, который у вас на экране виден полностью без проблем, у пользователя с низким разрешением монитора может не поместиться на экране. В итоге без полосы прокрутки он просто не увидит часть документа.

Мы рассмотрели элемент BODY, его возможности и функции. Все параметры, определяемые в этом элементе, влияют на общий вид документа.

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

HTML: тег


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

Описание

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

Синтаксис

В HTML синтаксис тега :

  <тело>
  

Атрибуты

В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу :

Атрибут Описание Совместимость с HTML
alink Цвет текста выбранных гиперссылок Устарело в HTML 4.01, Устарело в HTML5, используйте CSS
фон Изображение для использования в качестве фона Устарело в HTML 4.01, Устарело в HTM L5, используйте CSS
bgcolor Цвет фона Устарело в HTML 4.01, Устарело в HTML5, используйте CSS
ссылка Цвет текста непосещенных гиперссылок Устарело в HTML 4.01, Устарело в HTML5, используйте CSS
после печати Функция вызова пользователя распечатала документ HTML5
до отпечатка Функция для вызова, когда пользователь запрашивает распечатку документа HTML5
до выгрузки Функция вызова при выгрузке документа HTML5
onblur Функция для вызова, когда документ потерял фокус HTML5
ошибка Функция для вызова при сбое документа HTML5
onfocus Функция для вызова, когда документ находится в фокусе HTML5
в обмен на Функция для вызова, когда часть идентификатора фрагмента адреса документа изменилась HTML5
загрузка Функция для вызова при загрузке документа HTML5
в сообщении Функция для вызова, когда документ получил сообщение HTML5
в сети Функция вызова при сбое связи по сети HTML5
онлайн Функция вызова при восстановлении связи с сетью HTML5
onpopstate Функция для вызова, когда пользователь просматривает историю сеансов HTML5
дальше Функция, вызываемая при переходе пользователя вперед в истории отмен HTML5
по размеру Функция, вызываемая при изменении размера документа HTML5
на складе Функция вызова при изменении области хранения HTML5
онундо Функция для вызова, когда пользователь переместился назад в истории отмен HTML5
под нагрузкой Функция для вызова при выгрузке документа HTML5
текст Цвет текста переднего плана Устарело в HTML 4. 01, Устарело в HTML5, используйте CSS
vlink Цвет текста посещенных гиперссылок Устарело в HTML 4.01, Устарело в HTML5, используйте CSS

Примечание

  • HTML-элемент находится внутри тега .
  • Наиболее распространенными элементами, помещаемыми в тег HTML , являются: теги

    ,

    ,

    , .

    Совместимость с браузером

    Тег имеет базовую поддержку в следующих браузерах:

    • Хром
    • Android
    • Firefox (Gecko)
    • Firefox Mobile (Gecko)
    • Internet Explorer (IE)
    • Edge Mobile
    • Opera
    • Opera Mobile
    • Safari (WebKit)
    • Мобильный Safari

    Пример

    Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

    Документ HTML5

    Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

      
    
    
    
    
     Пример HTML5 от www.techonthenet.com 
    
    
    
    

    Заголовок

    Это содержание.

    В этом примере документа HTML5 тег содержит два элемента — заголовок в теге

    и абзац в теге

    .

    HTML 4.01 Переходный документ

    Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть так:

      
    
    
    
    
     HTML 4.01 Transitional Example by www.techonthenet.com 
    
    
    
    

    Заголовок

    Это содержание.

    В этом примере переходного документа HTML 4.01 тег содержит два элемента — заголовок в теге

    и абзац в теге

    .

    Переходный документ XHTML 1.0

    Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть так:

      
    
    
    
    
     Переходный пример XHTML 1.0 
    
    
    
    

    Заголовок

    Это содержание.

    В этом примере переходного документа XHTML 1.0 тег содержит два элемента — заголовок в теге

    и абзац в теге

    .

    Строгий документ XHTML 1.0

    Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть так:

      
    
    
    
    
     Строгий пример XHTML 1.0 от www.techonthenet.com 
    
    
    
    

    Заголовок

    Это содержание.

    В этом примере XHTML 1.0 Strict Document тег содержит два элемента — заголовок в теге

    и абзац в теге

    .

    XHTML 1.1 Документ

    Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть так:

      
    
    
    
    
     XHTML 1.1 Пример с сайта www.<img src='/800/600/https/myslide.ru/documents_3/0fe958805797fac88d20d9db6a46e0a0/img6.jpg' /> techonthenet.com 
    
    
    
    

    Заголовок

    Это содержание.

    В этом примере документа XHTML 1.1 тег содержит два элемента — заголовок в теге

    и абзац в теге

    .

    Master Самый важный элемент HTML сейчас »

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
    Элемент
    Структура HTML-документа до и после HTML5 — вот что изменилось
    Что делает Body Tag: Master Самый важный элемент HTML сейчас, что делает ?
    Элемент содержит все содержимое веб-страницы. Это должен быть второй элемент внутри родительского элемента , следующий только за элементом .
    Дисплей
    блок
    Использование
    структурный

    Пример кода

        .. .       

    Самое важное… и самое простое

    Элемент может быть самым важным HTML-элемент есть. Содержимое элемента — это то, что на самом деле отображается для пользователя, посещающего вашу веб-страницу или просматривающего ваш документ. И все же это очень просто. должен быть прямым потомком , он должен стоять после (если присутствует , чего не обязательно), там может быть только один из них, и… все.

    Стилизация

    В предыдущих версиях HTML (и в некоторых схемах разметки проприетарных браузеров) для был доступен ряд атрибутов стиля. Все это устарело в HTML5. Любые стили, которые вы хотите применить к , должны быть помещены в ваш CSS. И на самом деле — это отличное место для , где можно разместить весь CSS, который должен влиять на отображение документа в целом: такие вещи, как шрифты и типографика, цвета текста и фона и другие другие стили «по умолчанию».

      body {font-family: "Adobe Garamond Premier Pro", Garamond, "Linux Libertine", Баскервиль, Джорджия, с засечками; вес шрифта: нормальный: размер шрифта: 18 пикселей; цвет: # 111111; цвет фона: #fefefe; заполнение: 1em; ширина: 95вв; максимальная ширина: 950 пикселей; маржа: 0 авто; }  

    Ориентация на

    В системах управления контентом обычной практикой является размещение списка классов CSS, зависящих от контента, в элементе .Это позволяет дизайнерам и разработчикам JavaScript настраивать таргетинг на страницы на основе определенных атрибутов контента, таких как категория, теги или тип контента.

        

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

    Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

    Браузер Поддержка тела

    Атрибуты тела

    Имя атрибута Значения Примечания
    фон
    Используется для установки цвета фона и изображения для документа. Устарело. Вместо этого используйте CSS.
    bgcolor
    Используется для установки цвета фона в документе. Устарело. Вместо этого используйте CSS.
    bgproperties
    Используется для стилизации фона документа.Устарело. Вместо этого используйте CSS.
    stylesrc
    Был проприетарным атрибутом для системы Frontpage. Не использовать.
    текст
    Используется для стилизации текста внутри тела документа. Устарело. Используйте CSS.
    scroll
    Используется для переключения отображения полос прокрутки на странице, отключая возможность прокрутки пользователя. Устарело. Для этого можно использовать CSS, но не следует, потому что это плохая идея.
    topmargin
    Используется для установки поля над основной частью документа. Устарело. Используйте CSS.
    onUnload
    Запускает скрипт, когда посетитель покидает страницу.
    onLoad
    Запускает скрипт после завершения загрузки страницы.
    onFocus
    Запускает скрипт, когда посетитель фокусируется на текущей странице.

    HTML тег тела — javatpoint

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

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

    Синтаксис

    Разместите здесь свой Контент ……..

    Ниже приведены некоторые характеристики тега

    Дисплей Рядный
    Начальный тег / Конечный тег И начальный, и конечный тег
    Использование Строительный

    Пример

    Тег тела

    Пример тега body

    Этот абзац написан между тегом body

    Проверить это сейчас

    Выход:

    Атрибут

    Атрибуты, специфичные для тегов

    Атрибут Значение Описание
    Алинк цвет Определяет цвет активной ссылки в документе. (Не поддерживается в HTML5)
    фон URL Определяет фоновое изображение для документа. (Не поддерживается в HTML5)
    bgcolor цвет Определяет цвет фона содержимого. (Не поддерживается в HTML5)
    ссылка цвет Определяет цвет непосещенной ссылки. (Не поддерживается в HTML5)
    текст цвет Определяет цвет текста в документе.(Не поддерживается в HTML5)
    vlink цвет Определяет цвет посещенной ссылки. (Не поддерживается в HTML5)
    загрузка Вызов функции при загрузке страницы
    под нагрузкой Вызов функции, когда пользователь покидает страницу
    onfocus Вызов функции, когда документ получает фокус пользователя.
    onblur Вызов функции, когда документ теряет фокус пользователем.

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

    Атрибут поддерживает глобальный атрибут в HTML.

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

    Атрибут поддерживает атрибуты событий в HTML.

    Поддерживающие браузеры

    HTML-тег

    — GeeksforGeeks

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

    Синтаксис:

      Body Contents ...  

    Атрибуты: В теге есть много атрибутов, которые обесцениваются по сравнению с HTML5:

    • background : Он содержит URL-адрес фонового изображения.Он используется для установки фонового изображения.
    • bgcolor : Используется для указания цвета фона изображения.
    • alink : Используется для указания цвета активной ссылки.
    • ссылка : Используется для указания цвета посещенных ссылок.
    • текст : Определяет цвет текста в документе.
    • vlink : Определяет цвет посещенных ссылок.

    Пример: Использование тега HTML body. Все содержимое помещается внутри тега body.

    HTML

    < html >

    < корпус >


    1 900 h2 > GeeksforGeeks h2 >

    < h3 > тег тела h3 >

    < p > Это текст абзаца p >

    body >

    html >

    Выход:


    Пример 2: Пример отображения функционирование тега Body вместе с его реализацией CSS.

    HTML

    < html >

    < body style = цвет фона : seagreen " >

    < h2 > GeeksforGeeks h2 >

    < h3 > HTML тег тела h3 >

    < p > Это тег раздела p >

    корпус >

    < / html >

    Выход:

    Поддерживаемые браузеры:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    HTML-тег

    Тег определяет содержимое веб-страницы (текст, изображения, ссылки и т. Д.)). Он помещается внутри элемента после элемента . В HTML-документе мы можем использовать только один тег .

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

    Синтаксис¶

    Тег состоит из пар. Контент записывается между открывающим () и закрывающим () тегами.

    Пример HTML-тега

    : ¶
      
    
      
         Название документа 
      
      
        

    Содержание документа

    Попробуйте сами »

    Результат¶

    Пример тега HTML

    , используемого со свойствами цвета и высоты строки CSS: ¶
      
    
      
         Название документа 
        <стиль>
          тело {
            цвет: # 444444;
            высота строки: 1.5;
          }
        
      
      
        

    Пример тега тела HTML

    Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатного, графического или веб-дизайна. Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона De Finibus Bonorum et Malorum для использования в сборнике образцов шрифта.

    Попробуйте сами »

    Атрибуты¶

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

    Как стилизовать тег

    ?

    Общие свойства для изменения визуального веса / акцента / размера текста в теге

    :
    • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
    • Свойство CSS font-family определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или общих имен семейств для выбранного элемента.
    • Свойство CSS font-size устанавливает размер шрифта.
    • Свойство CSS font-weight определяет, должен ли шрифт быть жирным или толстым.
    • Свойство CSS text-transform управляет регистром текста и заглавными буквами.
    • Свойство CSS text-decoration задает украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

    Раскрашивание текста в теге

    :
    • Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
    • Свойство CSS background-color устанавливает цвет фона элемента.

    Стили макета текста для тега

    :
    • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
    • Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
    • CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
    • Свойство CSS word-break определяет, где строки должны быть разорваны.

    Другие свойства, на которые стоит обратить внимание по тегу

    :

    font | CSS-уловки

    Свойство font в CSS - это сокращенное свойство, которое объединяет все следующие подсвойства в одном объявлении.

      кузов {
      шрифт: нормальный, прописные, нормальный, 16 пикселей / 1,4 Грузия;
    }
    
    /* такой же как:
    
    тело {
      семейство шрифтов: Грузия;
      высота строки: 1,4;
      font-weight: нормальный;
      font-stretch: нормальный;
      вариант шрифта: капители;
      размер шрифта: 16 пикселей;
    }
     * /  

    Имеется семь вложенных свойств шрифта , в том числе:

    • font-stretch : это свойство устанавливает ширину шрифта, например сжатую или расширенную.
      • нормальный
      • сверхконденсированный
      • сверхконденсированный
      • конденсированный
      • полуконденсированный
      • полурасширенный
      • развернутый
      • сверхрасширенный
      • сверхрасширенный
    • font-style : выделение текста курсивом или наклонным шрифтом.
      • нормальный
      • курсив
      • косая
      • наследовать
    • font-option : изменяет целевой текст на маленькие заглавные.
      • нормальный
      • капсюли
      • наследовать
    • font-weight : устанавливает вес или толщину шрифта.
      • нормальный
      • полужирный
      • полужирный
      • зажигалка
      • 100, 200, 300, 400, 500, 600, 700, 800, 900
      • наследовать
    • font-size : устанавливает высоту шрифта.
      • xx малый
      • x малый
      • малый
      • средний
      • большой
      • x большой
      • xx большой
      • меньше, больше
      • процентов
      • наследовать
    • line-height : определяет размер пространства над и под встроенными элементами.
      • нормальный
      • число (множитель размера шрифта)
      • процентов
    • font-family : определяет шрифт, применяемый к элементу.
      • без засечек
      • с засечками
      • моноширинный
      • курсив
      • фантазия
      • подпись
      • значок
      • меню
      • окно сообщений
      • с мелкими подписями
      • строка состояния
      • "строка"

    Font Shorthand Gotchas

    Свойство font не так просто, как другие сокращенные свойства, отчасти из-за требований к синтаксису для него, а отчасти из-за проблем с наследованием.

    Вот краткое изложение некоторых вещей, которые вы должны знать при использовании этого сокращенного свойства.

    Обязательные значения

    Два значения в font являются обязательными: font-size и font-family . Если любой из них не включен, все объявление будет проигнорировано.

    Кроме того, font-family должно быть объявлено последним из всех значений, иначе, опять же, все объявление будет проигнорировано.

    Дополнительные значения

    Все пять других значений необязательны.Если вы включаете любой из font-style , font-option и font-weight , они должны стоять перед font-size в объявлении. В противном случае они будут проигнорированы, а также могут привести к игнорированию обязательных значений.

      кузов {
        шрифт: курсив, полужирный, полужирный, 44 пикселя, Джорджия, без засечек;
    }  

    В приведенном выше примере включены три опции. Если они определены до font-size , их можно размещать в любом порядке.

    Включение высоты строки также необязательно, но может быть объявлено только после font-size и только после косой черты:

      кузов {
        шрифт: 44px / 20px Georgia, без засечек;
    }  

    В приведенном выше примере высота строки равна «20 пикселей». Если вы опустите line-height , вы также должны опустить косую черту, иначе вся строка будет проигнорирована.

    Использование font-stretch

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

    Спецификация рекомендует включить резервный вариант без font-stretch , например:

      кузов {
        шрифт: курсив, полужирный, полужирный, 44 пикселя, Джорджия, без засечек; / * откат для старых браузеров * /
        шрифт: сверхсжатый курсив, малые прописные, полужирный, 44 пикселя, Джорджия, без засечек;
    }  
    Наследование для опций

    Если вы опустите какое-либо из optianal значений (включая line-height ), пропущенные optionals не будут наследовать значения от своего родительского элемента, как это часто бывает с типографскими свойствами. Вместо этого они будут сброшены в исходное состояние.

    Например:

      кузов {
        шрифт: курсив, полужирный, полужирный, 44/50 пикселей, Грузия, без засечек;
    }
    
    п {
        шрифт: 30px Georgia, без засечек;
    }  

    В этом случае необязательные значения (курсив, заглавные буквы и полужирный шрифт) помещаются в объявление font в элементе . Это также применимо к большинству дочерних элементов.

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

    Ключевые слова для определения системных шрифтов

    В дополнение к приведенному выше синтаксису свойство font также позволяет использовать ключевые слова в качестве значений. Их:

    • подпись
    • значок
    • меню
    • окно сообщений
    • с мелкими подписями
    • строка состояния

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

    Одно ключевое слово включает все значение:

      кузов {
        шрифт: меню;
    }  

    Другие свойства, упомянутые ранее, не действительны в сочетании с этими ключевыми словами. Эти ключевые слова могут использоваться только с сокращением font и не могут быть объявлены с использованием каких-либо индивидуальных свойств.

    Сопутствующие объекты

    Дополнительная информация

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

    Хром Safari Firefox Opera IE Android iOS
    Любая Любые Любые Любые Любые Любые Любые

    маржа | CSS-уловки

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

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

      .box {
      маржа: 0 3em 0 3em;
    }  

    поле является сокращенным свойством и принимает до четырех значений, показанных здесь:

      .box {
        маржа: <маржина-верх> ||  || <край-снизу> || <край-слева>
    }      

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

      .box {
      маржа: 0 1.5em;
    }
    
    .коробка {
      маржа: 0 1.5em 0 1.5em;
    }  

    Таким образом, если определено только одно значение, все четыре поля будут равны одному и тому же значению. Если объявлены три значения, это поле : [верх] [лево-право] [низ]; .

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

     .коробка {
      маржа сверху: 20 пикселей;
      маржа справа: 10 пикселей;
      нижнее поле: 20 пикселей;
      маржа слева: 10 пикселей;
    }  

    авто и центровка

    Каждое из свойств поля также может принимать значение auto . Значение auto в основном указывает браузеру определить маржу за вас. В большинстве случаев значение auto будет эквивалентно значению 0 (которое является начальным значением для каждого свойства поля) или любым другим пространством, доступным на этой стороне элемента.Однако auto удобен для горизонтального центрирования:

      .container {
      ширина: 980 пикселей;
      маржа: 0 авто;
    }  

    В этом примере для центрирования этого элемента по горизонтали в пределах доступного пространства выполняются две вещи:

    • Элементу задана заданная ширина
    • Левое и правое поля установлены на авто

    Без указанной ширины значения auto по существу не будут иметь никакого эффекта, установив для левого и правого полей значения 0 или любое другое доступное пространство внутри родительского элемента.

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

    Сворачивающиеся поля

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

    Для иллюстрации возьмем следующий HTML-код:

      

    Сворачивающиеся поля

    Пример текста.

    И следующий CSS:

      h3 {
      маржа: 0 0 20px 0;
    }
    
    п {
      маржа: 10px 0 0 0;
    }  

    В этом примере элемент h3 имеет нижнее поле в 20 пикселей. Элемент абзаца, который следует сразу за ним в источнике, имеет верхнее поле, равное 10 пикселям.

    Здравый смысл подсказывает, что толщина вертикального поля между h3 и абзацем будет в общей сложности 30 пикселей (20 пикселей + 10 пикселей). Но из-за коллапса полей фактическая толщина составляет 20 пикселей. Это показано на встроенной ручке ниже:

      Оцените эту ручку! 

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

    Во-вторых, они позволяют использовать более последовательный подход к объявлению универсальных полей для элементов страницы. Например, заголовки, как и абзацы, обычно имеют вертикальное поле. Если бы поля не сжимались, заголовки, следующие за абзацами (или наоборот), часто требовали бы сброса полей на одном из элементов, чтобы добиться постоянного расстояния по вертикали.

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

      Оцените эту ручку! 

    Здесь элемент абзаца имеет верхнее поле, равное 30 пикселей, и вложен в элемент div с верхним полем в 40 пикселей.Кроме того, элемент h3 имеет нижнее поле 20 пикселей.

    Опять же, здравый смысл подсказывает, что общее пространство вертикальных полей здесь будет составлять 90 пикселей (20 пикселей + 40 пикселей + 30 пикселей), но вместо этого все поля сворачиваются в одно поле в 40 пикселей (самое высокое из трех). Это полезно в большинстве случаев, поскольку нет необходимости переопределять какое-либо из верхних полей, чтобы удалить лишнее вертикальное пространство.

    Отрицательные поля

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

    Вот пример контейнера с заполнением, и заголовок h3 имеет отрицательные поля, протягивая себя через это заполнение обратно к краям:

    См. Pen
    «Самый распространенный вариант использования отрицательных полей» Криса Койера (@chriscoyier)
    на CodePen.

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

    См. Нижний абзац Pen
    Negative Margin от Криса Койера (@chriscoyier)
    на CodePen.

    Сопутствующие объекты

    Другие ресурсы

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

    Хром Safari Firefox Opera IE Android iOS
    Завод Работы Работы Работы Работы Работы Работы

    IE6 подвержен ошибке с удвоенным значением поля с плавающей запятой, которую в большинстве случаев можно решить, добавив display: inline к плавающему элементу.

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

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