Body css что это

Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т. д.

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

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

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

Синтаксис¶

1 2 3

body> . body> 

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

Атрибуты¶

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

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

• WHATWG HTML Living Standard
• HTML5
• HTML 4.01 Specification

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

HTML тег

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

Синтаксис

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

Пример

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

Результат

Атрибуты

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

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

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• 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 свойство color определяет цвет контента и оформления текста.
• CSS свойство background-color устанавливает фоновый цвет элемента.

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

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

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

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Элемент body

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

Условия использования

В формате STRICT всё содержимое элемента body должно обязательно располагаться внутри блочных элементов (например, div , p ).

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

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

Атрибуты

alink Цвет активированных гиперссылок. background Фоновое изображение страницы. bgcolor Фоновый цвет страницы. bgproperties Фиксация фонового изображения документа. bottommargin Задаёт нижний отступ страницы leftmargin Задаёт левый отступ страницы. link Цвет гиперссылок. rightmargin Задаёт правый отступ страницы. scroll Устанавливает наличие или отсутствие полос прокрутки окна web-браузера. text Цвет текста страницы. topmargin Задаёт верхний отступ страницы. vlink Цвет активированных гиперссылок (посещённых страниц). Глобальные атрибуты accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Данный элемент не имеет параметров / атрибутов.

CSS/Селекторы

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

body  background-image: url("image.gif"); font-size: 18px; > 

Где body — это селектор, background-image и font-size — это свойства, а url(«image.gif») и 18px — значения.

Виды селекторов [ править ]

• Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
• Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
• Классы, применяются для элементов с атрибутом class и необходимым значением.
• Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
• Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками ( :link , :visited , :hover , :active , :focus ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа ( :first-letter , :first-line ), а также позволяют генерировать и стилизовать несуществующее содержимое ( :before , :after и свойство content ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: ( ::first-letter , ::first-line , ::before , ::after ).
• Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]).
• Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
• Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
• Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
• Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Селектор class [ править ]

Допустим, мы хотим сделать страницу, на которой будет два вида абзацев

, причём оба вида будут постоянно чередоваться и часто повторяться.

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

p.ask  font-style: italic; font-weight: bold; font-family: Arial, sans-serif; font-size: 10px; color: gray; margin-left: 15px; > p.answer  font-family: 'Times New Roman', serif; font-size: 12px; color: black; > 

В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.

Селектор id [ править ]

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

#onlyThisOne  font-family: Courier; > 

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:

input#green  color: green; > input#red  color: red; >