BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2013-12-18 / Вр:21:11 / просмотров: 16233

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей 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>

Результат:

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

Или вот так:

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

Результат:

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

Изменяем цвет фона с помощью атрибута 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>

Результат:

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

Или вот так:

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

Результат:

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

Изменяем цвет фона с помощью атрибута 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>

Результат:

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

Или вот так:

<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. Удачи!!!

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Тамара Полякова

    Привет Степан! Все твои статьи, связанные в HTML кодами, для меня представляют трудности. А все началось с того, когда я, изучив очередной урок в интернете по изменению шапки сайта, вставила код в редакторе на сайт. Хотела “свой корабль” разместить в теме, а он встал сверху. Потом были проблемы с АГС, выходом из него, а корабль так и висит на сайте, так как теперь и не помню где он там в редакторе “висит” :?: . Я думаю мне нужно первый раз помочь (ты обещал), тогда у меня исчезнет страх перед работой с кодами. С Наступающим!!! Будьте все здоровы и счастливы!

  2. Тамара Полякова

    У тебя сейчас красивый сайт (шапка)!!!

  3. Avatar photo Степан => автор блога

    Раз обещал, значит помогу. Пишите мне на почту.
    Спасибо за поздравление! Шлю свои взаимно!

  4. Avatar photo Степан => автор блога

    Спасибо!

  5. Вита

    А как можно задать фоновый цвет для определённоего куска текста?

  6. Avatar photo Степан => автор блога

    Вита, если вы имеете ввиду, что кусок текста будет как бы подчеркнутый маркером, тогда здесь без css не обойтись.
    Вот код:

    <p>Рад видеть Вас на блоге <span style="background:#cc0000;">BlogGood.ru</span></p>.
  7. Вита

    Ага, Степан, именно это я и имела ввиду. Именно так я уже и сделала, только я не поняла с какой стороны вы здесь css упоминаете.

  8. Avatar photo Степан => автор блога

    style=”background:#cc0000;” – это из CSS :)
    Вита, если будет желание и свободное время, рекомендую Вам ознакомиться с основами CSS

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716