От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html.
Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.
Как элементы HTML и body связаны друг с другом
Давайте рассмотрим стандартную структуру базового HTML документа:
В спецификации 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:
В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):
Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html.
Поэтому нам следует всегда задавать глобальные стили для body, правильно?
Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.
Работа с единицами измерения rem
Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого:
Единица измерения 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.
webformyself.com
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
С помощью CSS того же самого результата можно добиться так:
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:
Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.
Применение CSS к HTML-документу
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем — то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов — HTML-тэг <style>. Например:
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод — создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
Обратите внимание, как указан путь к вашей таблице стилей атрибутом
href.
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами
Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла — HTML-файл и CSS-файл — такого содержания:
default.htm
style.css
Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями («.css» и «.htm»)
Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!
Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS.
ru.html.net
Как связаны html и body
Рассмотрим стандартную структуру для базового HTML документа:
<!DOCTYPE html> <html lang="en"> <head> <!-- Metadata and such --> </head> <body> <!-- Where the content begins --> <body> </html> определяет <html> как корневой элемент документа, и мы ясно видим, что в приведенном примере <html> является элементом самого верхнего уровня. Здесь нет уровней, откуда могли бы быть унаследованы стили.
Непосредственно в <html> находятся только два элемента: <head> и <body>. На самом деле, определяет <body> прямо противоположно <head>, поскольку это два элемента, которые необходимо различать.
Итак, суть в том, что <html> является корневым элементом документа, а <body> является потомком, содержащимся в нем. в CSS и html определяют одно и то же:
:root { } html { }
Единственное отличие в том, что :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 |
| bgcolor | background background-color |
| marginbottom | margin-bottom |
| marginleft | margin-left |
| marginright | margin-right |
| margintop | margin-top |
| text | font |
Учитывая, что эти свойства CSS возникли из встроенных атрибутов, которые были связаны с <body>, представляется целесообразным применять их непосредственно к <body> в CSS, а не к элементу <html>.
Таким образом, мы всегда должны применять глобальные стили к <body>, не так ли?
Ну, не совсем. Все-таки есть ситуации, где имеет смысл применить стили к <html>. Давайте рассмотрим пару таких сценариев.
Работа с единицами измерения rem
Единица измерения rem связана с корнем документа. Например, если написать что-то вроде этого:
.module { width: 40rem; } Единица измерения rem рассчитывается относительно font-size элемента <html>, который является корнем документа. Таким образом, класс .module будет масштабироваться относительно корневого уровня.
Классический пост Джонатана Снука прекрасно иллюстрирует, как задать font-size элемента <html> в процентах для работы с rem.
Хитрый background-color
Существует одна странная вещь в CSS, если задать background-color элементу <body>, он заливает весь вьюпорт, даже если элемент не занимает все пространство. Если при этом задать background-color для <html>, этого не происходит.
Подводя итог
Надеюсь, эта статья проливает некоторый свет на ключевые различия между использованием <html> и <body> в CSS. Есть также различия в JavaScript. Например, получить элемент <html> можно с помощью document.rootElement, а <body> с помощью document.body.
Мы могли бы, конечно, более детально рассмотреть технические различия между ними, но цель в данном случае, углубить понимание, чтобы принимать более обоснованные решения при написании CSS.
Есть ли у вас другие примеры, где это имеет смысл задавать стили именно для <html> или для <body>?
getinstance.info
Умение правильно оформлять CSS код важно для каждого веб дизайнера. Этот урок рассчитан на новичков, которые делают только первые шаги.
Вступление
При работе с CSS необходимо быть предельно внимательным. При написании кода следует соблюдать предельную концентрацию.
В данном уроке будет показан пример, как создать простую HTML страницу используя блочную верстку (без использования таблиц). А также научимся выносить стили в отдельную таблицу стилей.
Шаг №1 — Разметка и использование тегов
Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML.
HTML — гипертекстовый язык разметки, иными словами HTML описывает структуру текстовой информации страницы. Прежде чем мы начнем применять стили CSS, нам необходимо научиться применять элементы структуры.
При строительстве разметки мы используем «теги», которые окружены угловыми скобками. Теги используются для определения чего-либо на странице. CSS применяется позже для определения места (в браузере) вывода содержания того или иного тега.
Самыми простыми тегами на странице являются:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Больше всего тегов и контента используется внутри тега <body>.
Очень важный тег для разделения и определения структуры — тег <div>. Используя данный тег, можно разделить содержание на ячейки. Внутри данного тега Вы можете использовать и прочие теги для определения контента (например, ссылки, текст, изображения), которые потом можно красиво оформить с помощью CSS.
Используйте любой редактор изображений для того, чтобы нарисовать следующий эскиз:
Код для данного шаблона должен выглядеть так:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>Как Вы видите, у тегов div есть ID. Это понадобится нам для оформления каждой ячейки. ID используется для маркировки тега и придания ему уникального стиля. В то время как “class” используется для повторяющихся элементов дизайна.
Также, в примере используется еще один div “wrapper”, которые как бы «обертывает» все остальные теги. Это нам пригодится позже для позиционирования нашей странички.
Шаг №2 — Ссылка на таблицу стилей
В таблице стилей мы определяем элементы дизайна страницы. Можно создать как внутреннюю таблицу стилей, так и внешнюю. В данном уроке будет использована внешняя.
Если Вы просмотрите Вашу страницу в браузере сейчас — ничего не появится. Все потому что мы не придали нашим тегам никакого цвета и формы. И поскольку наш CSS будет внешним, первым делом Вам необходимо убедиться в том, что на странице есть ссылка на таблицу стилей.
Добавьте следующий код между <head></head>:
<link rel="stylesheet" type="text/css" href="style.css" />Шаг №3 — Создание CSS
Синтаксис CSS состоит из селектора, свойства и значения. Селектор — это тег, который необходимо оформить в дизайне, свойство — тип атрибута, который Вы хотите добавить, значение — количественное измерение свойства.
Селектор, кроме тега body, записывается в CSS начиная с “#” или “.”. “#” определяет ID, а «.» (точка) определяет class селектора. Внутри селектора может находиться множество свойств и все они должны быть обрамлены { }.
#selector {
property:value;
property:value;
property:value;
}
Нам необходимо оформить следующие теги с помощью
CSS:
* body
* wrapper
* header
* navigation
* menu
* content
* footerСвойства и возможные значение в CSS:
Свойство «background» (фоновое изображение) может задавать изображение или цвет, или и то и другое. Для показа изображения, значение должно состоять из пути к изображению. Для определения цвета используется шестнадцатеричный код.
Свойство «color» используется для определения цвета селектора. Значения записываются в виде шестнадцатеричного кода (пример: #FFFFFF для белого).
Свойство «font-family» позволяет определить шрифт, который будет использоваться. Нормой является включение как минимум 3-х типов шрифтов. Это делается на случай, если браузер не может отобразить первый шрифт, будет использоваться второй и т.д. (пример: Trebuchet MS, Arial, Times New Roman)
Свойство «font-size» определяет размер шрифта и имеет значение в пикселях.
Свойство «margin» используется для определения позиции селектора. Значения задают расстояние сторон селектора до края окна браузера в следующем порядке: top, left, bottom, right. Если нам необходимо разместить страницу по центру, мы пишем «0px auto 0px». Указание всех четырех сторон не является обязательным.
Свойство «width» задает желаемую ширину в пикселях любого селектора.
Свойство «height» — высота в пикселях.
Свойство «float» позволяет нам позиционировать элементы внутри селекторов, в большинстве случаев справа или слева.
Для создания CSS файла откройте свой любимый текстовый редактор и сохраните новый документ как style.css в папке с страницами сайта. Добавьте следующий код:
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 624px;
}
#content {
background: #d2d0d2;
width: 900px;
height: 624px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}Заключение
Вы прошли школу молодого бойца CSS и оформили все селекторы с помощью вышеуказанных свойств.
Надеюсь, урок Вам понравился! Жду отзывов и пожеланий.
ruseller.com
Поддержка браузерами
Описание
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>
Результат данного примера в окне браузера:
puzzleweb.ru