Фон в HTML

Фон для сайта HTML можно изменить как с помощью атрибутов тега body, так и с помощью CSS-стилей, примененных также к тегу body. Рассмотрим оба варианта как сделать фон для сайта.

Меняем цвет фона с помощью HTML

Тег body, как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:

• bgcolor — определяет цвет фона для страницы;
• background — позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: Как сделать фон сайта картинкой HTML);
• scroll — управляет отображением полосы прокрутки на странице;
• text — задает базовый цвет текста, который будет выводиться на веб-странице;
• bgproperties — указывает, будет ли прокручиваться фон вместе со страницей;
• link — управляет цветом ссылок по умолчанию на странице;
• alink — устанавливает цвет для активной ссылки;
• vlink — определяет цвет для посещенной ссылки на странице;
• leftmargin/rightmargin — задает отступ контента от левого или правого края окна браузера;
• topmargin/bottommargin — задает отступ контента от верхнего или нижнего края окна браузера;

Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor:

    
Это пример текста белого цвета, заданного с помощью атрибута text тега body.
  

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

Меняем цвет фона страницы с помощью CSS

Во избежании избыточности кода, рекомендуется всё, что связано с оформлением страницы, переносить на плечи CSS. К этому числу относится и задание цвета фона. CSS фон задается следующим образом:

   body 
Это пример текста белого цвета, заданного с помощью background CSS. Фон страницы также задан с помощью CSS.
  

В конструкторе сайтов «Нубекс» для любого сайта можно выбрать уже готовый фон из большой билиотеки изображений, или добавить свой.

Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color – задает цвет текста;
• size – устанавливает размер текста;
• face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

     
Конструктор сайтов "Нубекс"
  

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

    .nubex < color:#fa8e47; font-size: 150%; >.constructor < color: blue; >.saitov 
Конструктор сайтов "Нубекс"
  

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Смотрите также:

• Выравнивание текста в HTML
• Списки HTML
• Спецсимволы HTML
• Шрифты CSS

Определяем HTML цвет текста и его фон

Попробуем изменить цвет текста в HTML:

Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Строка style=»color:#000000″ является линейным CSS включением — устанавливает цвет HTML текста в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue).

Посмотреть в новом окне: HTML цвет текста

Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Содержимое сектора по сути есть все то, что мы видим на интернет-странице. Таким образом, добавляя к его первому тегу строчку style=»color:#ff6c36″ , мы делаем текст всей страницы оранжевым (черный по умолчанию), за исключением третьего параграфа, где он — текст определен как синий. Атрибут align=»» определяет горизонтальное выравнивание. Возможны значения: center, left, right, justify . В следующем уроке подробно рассматриваются способы горизонтального выравнивания текста.

Посмотреть в новом окне: цвет HTML текста

Значение #000000 определяет черный цвет, #ffffff – белый. Цвет также может быть задан словом, например, style=»color:Red» .

HTML цвет представлены в одной из глав HTML справочника.

Как изменить HTML цвет и фон текста

Попробуем изменить фон текста в HTML:

HTML Фон текста оранжевый Цвет HTML текста белый, фон красный

Атрибут background-color определяет фон, в данном случае изменения затрагивают текст.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML текст и шрифт HTML, цвет, фон, текст HTML текст справа

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Изменить HTML цвет, фон, текст? – Не вопрос!

Как задать цвет фона и текста веб-страницы?

Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body , а для цвета текста используется свойство color, как показано в примере 1.

Пример 1. Изменение цвета фона

Результат данного примера показан на рис. 1.

Рис. 1. Вид веб-страницы с тёмным фоном

См. также

• background-color
• color
• currentColor
• text-fill-color
• Атрибут bgcolor
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой
• Фон в CSS