Содержание

Цвет фона | htmlbook.ru

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0">
   <p>...</p>
 </body>
</html>

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавить фоновый рисунок на страницу, следует воспользоваться атрибутом background тега <body>.

Пример 2. Добавление фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый рисунок</title>
 </head>
 <body background="images/bg.jpg">
  <p>...</p>
 </body>
</html>

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg">
   <p>...</p>
 </body>
</html>

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties=»fixed» тега <body>.

Пример 4. Задание фиксированного фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.
 
 w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фон</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg" 
  bgproperties="fixed">
   <p>...</p>
 </body>
</html>

При указании атрибута bgproperties, как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

цветфон

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

Главная » Все про HTML » Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML  страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="#cc0000">
Текст страницы, таблицы, картинки, музыка и видео.
 
 
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:


<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео. 
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

<bоdy baсkground=»fon.gif»>

Если фоновая картинка размещена в папке images, это будет выглядеть так:

<bоdy baсkground=»images/fon.gif»>

Вот пример:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="fon. gif" text="black">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="images/fon.gif" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Метки: html, основы

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

html

4 месяца назад

Аднан Шаббир

Цвет фона HTML-документа/элемента улучшает внешний вид веб-страницы. Изменение цвета фона веб-страницы HTML позволяет создавать уникальные цветные макеты. Добавление цвета фона в HTML выделяет его и делает его более удобочитаемым для читателей.

HTML обеспечивает обширную поддержку для управления элементами. HTML обеспечивает поддержку изменения цвета фона в соответствии с требованиями.

В этой статье представлены различные способы изменения цвета фона в HTML. Вы получите следующие результаты обучения:

  1. Как изменить цвет фона в HTML с помощью встроенного CSS
  2. Как изменить цвет фона в HTML с помощью внутреннего CSS
  3. Как изменить цвет фона в HTML с помощью внешнего CSS

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

Свойство «background-color»

в HTML изменит цвет фона. Более ранние версии поддерживали свойство «bgcolor» , которое больше не поддерживается в последней версии. Свойство «фоновый цвет» можно использовать следующими способами:

  • Встроенный CSS : стили CSS добавляются внутри тега
    • .
  • Внутренний CSS : стили добавляются в раздел заголовка внутри HTML-документа
  • Внешний CSS : Создан внешний файл CSS и связан с документом HTML для добавления изменений

Все эти методы обсуждаются в следующих разделах.

Как изменить цвет фона в HTML с помощью встроенного CSS

Встроенный CSS используется внутри открывающего тега элемента. Встроенный CSS влияет только на элемент, в котором он используется. Мы будем использовать атрибут Background-color для изменения атрибута цвета

Код:

1
2
3

<Тело>

Мы использовали атрибут фонового цвета для изменения фонового цвета


здесь We We We We We We We We We We We We We We используется встроенный CSS в теге body, в Цвет фона

Мы использовали атрибут стиля внутри тега body, добавили свойство Background-color и присвоили ему имя ключевого слова цвета Azure.

Выход:

Цвет фона тега body меняется на лазурный после применения Inline CSS.

Как изменить цвет фона в HTML с помощью внутреннего CSS

Внутренний CSS используется для оформления одного HTML-документа внутри раздела Head. Весь код CSS будет внутри тега Style, а тег style будет внутри тега head.

Код:

  • 3    

    • 1
    2
    3
    4
    5
    6
    7

    Мы использовали встроенный CSS и выбрали раздел body, чтобы применить свойство background-color.

    Вывод:

    Как видите, цвет фона изменился на Azure с помощью Inline CSS.

    Как изменить цвет фона в HTML с помощью внешнего CSS

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

    Код CSS:

    1
    2
    3

    body {
        background-color: #F0FFFF;
    }

    Создается файл CSS с именем «style.css» , и вышеупомянутый код записывается внутри «style.css».

    Код HTML:

    1
    2
    3


    «cs ref=».stylesheet»

    Кроме того, следующие строки используются для ссылки на файл CSS в документе HTML.

    Тег используется для ссылки на файл CSS в разделе заголовка.

    Вывод:

    Замечено, что цвет фона изменился со стандартного на лазурный.

    Заключение

    Атрибут background-color изменит цвет фона в HTML. Атрибут background-color будет применяться с использованием всех методов стилизации, которые являются встроенными, внутренними и внешними CSS. «Имя цвета», значение цвета «Hexa» или комбинация «RGB» свойства «цвет фона» могут использоваться для применения различных цветов.

    Об авторе

    Аднан Шаббир

    Посмотреть все сообщения

    SCR31: Использование сценария для изменения цвета фона или границы элемента с фокусом

    SCR31: Использование сценария для изменения цвета фона или границы элемента с фокусом | Методы для WCAG 2.0

    Методы для WCAG 2.0

    Перейти к содержимому (нажмите Enter)

    • Содержание
    • Введение
    • Предыдущий: Техника SCR30
    • Следующий: Техника SCR32

    На этой странице:

    • Важная информация о методах
    • Применимость
    • Описание
    • Примеры
    • Связанные методы
    • Tests
    9002 -9003

    66.

    Критерии важной информации об использовании этих информативных методов и о том, как они соотносятся с нормативными критериями успеха WCAG 2.0. В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2.0.

    Применимость

    HTML и XHTML, CSS, Script

    Этот метод относится к:

    • Критерий успеха 2.4.7 (Фокус виден)
      • Как встретить 2.4.7 (Focus Visible)
      • Понимание критерия успеха 2.4.7 (видимый фокус)

    Пользовательский агент и примечания по поддержке вспомогательных технологий

    См. примечания по поддержке пользовательского агента для SCR31.

    Описание

    Эта техника предназначена для того, чтобы позволить автору использовать JavaScript для применения CSS, чтобы сделать индикатор фокуса более заметным, чем обычно. Когда элемент получает фокус, цвет фона или границы изменяются, чтобы сделать его визуально различимым. Когда элемент теряет фокус, он возвращается к своему обычному стилю. Этот метод можно использовать в любом пользовательском агенте HTML, который поддерживает Script и CSS, независимо от того, поддерживает ли он псевдокласс :focus.

    Примеры

    Пример 1

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

    Пример кода: 

    ...
<скрипт>
 функция toggleFocus(el)
 {
  el.style.backgroundColor = el.style.backgroundColor=="желтый" ? «наследовать»: «желтый»;
 }

...
сфокусировать меня
...
    • C15: Использование CSS для изменения представления компонента пользовательского интерфейса, когда он получает фокус

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

      No related posts.