Как задавать цвет фона HTML документа. Как в html сделать цветной фон


Как сделать фон в HTML?

Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

Чтобы задать фон в HTML используйте промежуточный DOCTYPE

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

Если с этим разобрались, давайте перейдём к пониманию того, как создаётся фон. И первое, что здесь нужно отметить – это различие между фоновым цветом и фоновой картинкой. В начале идёт фоновый цвет, который заливает всё доступное пространство страницы или её элемента. Поверх него накладывается повторяющаяся фоновая картинка. Визуально это можно изобразить следующим образом:

Фон HTML-документа и его элементов

Второе, что Вам нужно знать – это различие между телом документа и элементом документа. Тело документа обозначается в HTML-коде веб-страницы тегом BODY, который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

Элементы страницы находятся внутри тега BODY. Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.

Атрибут bgcolor для создания фонового цвета

Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:

<body bgcolor="#ec008c">  <!-- тело документа --></body>

В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:

<table bgcolor="#ec008c"><tr>  <td>Текст с фоном</td></tr></table>

Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD.

Как узнать код цвета?

Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.

Также Вы можете использовать многочисленные онлайн сервисы, например:

Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

Атрибут background для создания фоновой картинки

Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

<body background="/2014/06/bg.jpg">  <!-- тело документа --></body>

В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:

Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.

А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:

<table background="/2014/06/bg.jpg"><tr>  <td>Текст с фоном</td></tr></table>

Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.

Абсолютный и относительный путь к фоновой картинке

Отдельно стоит уделить внимание адресу фоновой картинки. В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес, например:

<body background="/images/bg.jpg">  <!-- тело документа --></body>

В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать тут.

Подведём итоги

Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE. Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/03TsNz

www.chuvyr.ru

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Главная » Основы HTML » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Всем привет!Продолжаем изучать основы HTML.В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.Все довольно просто!Начнем из цвета!Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?В этом нам поможет атрибут «bgcolor». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body» :

<body bgcolor="#cc0000">

Либо так:

<body bgcolor="red">

Вот полный HTML-код:

<html> <head> <title>Изменяем цвет фона – StepkinBlog.ru</title> </head> <body bgcolor="#000000" text="green"> Текст страницы будет зеленый, а фон черным. </body> </html>

Результат будет вот таким:

Как сделать в HTML картинку фоном

Если вы хотите сделать фон из картинки, тогда к тегу «body» пропишите атрибут «baсkground»:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon» с расширением «.gif»):

<body background="fon.gif">

Вот полный HTML-код:

<html> <head> <title>фона – StepkinBlog.ru</title> </head> <body background="fon.gif" text="#fff"> Текст страницы на красивом фоне. </body> </html>

Результат будет вот таким:

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

<body background="images/fon.gif">

Вот полный HTML-код:

<html> <head> <title>фона – StepkinBlog.ru</title> </head> <body background="images/fon.gif" text="#fff"> Текст страницы на красивом фоне. </body> </html>

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.Жду вас на следующих уроках.

Предыдущая запись Коды цветов в HTML. Основы HTML для начинающих. Урок №11 Следующая запись Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13

stepkinblog.ru

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

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

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

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor="#FFFF99". Прописывается данный атрибут следующим образом: <body bgcolor="#FFFF99"> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

<html> <head> <title>Моя первая страница</title> </head> <body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body> </html>

Создайте html страничку, содержащую код, приведенный выше, и посмотрите в браузере, какой она будет иметь цвет фона. Для этого откройте ваш текстовый редактор блокнот скопируйте туда код представленный выше. Затем сохраните текстовый документ с расширением .html, как это сделать мы рассматривали в уроке основы html.

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor="", который задает цвет фона, содержит в кавычках значение "#FFFF99" - это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

Для этого запустите Photoshop и в панели инструментов щелкните по значку выбор цвета (смотрите рисунок ), затем появится палитра цветов в которой с помощью ползунков вы можете выбрать тот или иной цвет, а его код будет отображен в низу, на рисунке оно обведено красным квадратом.

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо "#FFFF99" прописать "red" т. е. <body bgcolor="red"> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Просмотров: 79862

webmastermix.ru

Цвет фона | 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, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

htmlbook.ru

seodon.ru | Учебник HTML - Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>...</тег> — указание цвета текста по имени.

<тег>...</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение цвета текста</title> </head> <body> <h5>Красный текст заголовка</h5> <p>Синий текст параграфа.</p> <p> <em>Зеленый курсив.</em> <span>Красный текст.</span> </p> </body> </html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

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

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>...</тег> — указание цвета фона по имени.

<тег>...</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение цвета фона</title> </head> <body> <h5>Заголовок.</h5> <p>Параграф.</p> <p> <b>Жирный текст.</b> <span>Обычный текст.</span> </p> </body> </html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

seodon.ru

Как установить цвет страницы HTML

Для того, чтобы изменить цветовой фон страницы применяется тег bgcolor="#цвет". Вместо слова цвет вставляются цвета HTML модели RGB, из 3 основных цветов - красный, зеленый, синий. Каждый цвет состоит из 2 знаков от 0 до 9или букв от A до F.

    Пример записи черного цвета - "#000000",белого - "#FFFFFF",красного - "#FF0000",зеленого - "#33CC00",желтого - "#FFFF00".

Что бы установить цвет фона всей страницы пишем : <body bgcolor="#??????"> (порядок: красный/ зеленый/ синий). Тег bgcolor также вставляется в тот тег, который вы хотите изменить. Например <tr bgcolor="#0000FF"> или <td bgcolor="#58F786">.

Можно сделать фоном картинку или фото <body background="?"> Чтобы изменить цвет текста на всей странице применяется параметр - text. Его надо вставить в тег<body text="#FF0000">. Если вам надо изменить цвет определенного участка текста надо применить тег <font> </font>. Запись этого будет такая<font color="#FF0000"> текст </font>.

Если вы хотите изменить цвет гиперссылок, то этот параметр записывается так: <body link="#FF0000">.Также вы можете задать цвет активной ссылки <body alink="#цвет"> и пройденной ссылки <body vlink="#цвет">

Таблица основных цветов в HTML

Имя
Значение
Цвет
aliceblue#F0F8FF&nbsp
antiquewhite#FAEBD7&nbsp
aquamarine#7FFFD4&nbsp
azure#F0FFFF&nbsp
beige#F5F5DC&nbsp
bisque#FFE4C4&nbsp
black#000000&nbsp
blanchedalmond#FFEBCD&nbsp
blue#0000FF&nbsp
blueviolet#8A2BE2&nbsp
brown#A52A2A&nbsp
burlywood#DEB887&nbsp
cadetblue#5F9EA0&nbsp
chartreuse#7FFF00&nbsp
chocolate#D2691E&nbsp
coral#FF7F50&nbsp
cornflowerblue#6495ED&nbsp
cornsilk#FFF8DC&nbsp
crimson#DC143C&nbsp
cyan#00FFFF&nbsp
darkblue#00008B&nbsp
darkcyan#008B8B&nbsp
darkgoldenrod#B8860B&nbsp
darkgray#A9A9A9&nbsp
darkgreen#006400&nbsp
darkkhaki#BDB76B&nbsp
darkmagenta#8B008B&nbsp
darkolivegreen#556B2F&nbsp
darkorange#FF8C00&nbsp
darkorchid#9932CC&nbsp
darkred#8B0000&nbsp
darksalmon#E9967A&nbsp
darkseagreen#8FBC8F&nbsp
darkslateblue#483D8B&nbsp
darkslategray#2F4F4F&nbsp
darkturquoise#00CED1&nbsp
darkviolet#9400D3&nbsp
deeppink#FF1493&nbsp
deepskyblue#00BFFF&nbsp
dimgray#696969&nbsp
dodgerblue#1E90FF&nbsp
firebrick#B22222&nbsp
floralwhite#FFFAF0&nbsp
forestgreen#228B22&nbsp
fuchsia#FF00FF&nbsp
gainsboro#DCDCDC&nbsp
ghostwhite#F8F8FF&nbsp
gold#FFD700&nbsp
goldenrod#DAA520&nbsp
gray#808080&nbsp
green#008000&nbsp
greenyellow#ADFF2F&nbsp
honeydew#F0FFF0&nbsp
hotpink#FF69B4&nbsp
indianred#CD5C5C&nbsp
indigo#4B0082&nbsp
ivory#FFFFF0&nbsp
khaki#F0E68C&nbsp
lavender#E6E6FA&nbsp
lavenderblush#FFF0F5&nbsp
lawngreen#7CFC00&nbsp
lemonchiffon#FFFACD&nbsp
lightblue#ADD8E6&nbsp
lightcoral#F08080&nbsp
lightcyan#E0FFFF&nbsp
lightgoldenrodyellow#FAFAD2&nbsp
lightgreen#90EE90&nbsp
lightgrey#D3D3D3&nbsp
lightpink#FFB6C1&nbsp
lightsalmon#FFA07A&nbsp
lightseagreen#20B2AA&nbsp
lightskyblue#87CEFA&nbsp
lightslategray#778899&nbsp
lightsteelblue#B0C4DE&nbsp
lightyellow#FFFFE0&nbsp
lime#00FF00&nbsp
limegreen#32CD32&nbsp
linen#FAF0E6&nbsp
magenta#FF00FF&nbsp
maroon#800000&nbsp
mediumaquamarine#66CDAA&nbsp
mediumblue#0000CD&nbsp
mediumorchid#BA55D3&nbsp
mediumpurple#9370DB&nbsp
mediumseagreen#3CB371&nbsp
mediumslateblue#7B68EE&nbsp
mediumspringgreen#00FA9A&nbsp
mediumturquoise#48D1CC&nbsp
mediumvioletred#C71585&nbsp
midnightblue#191970&nbsp
mintcream#F5FFFA&nbsp
mistyrose#FFE4E1&nbsp
moccasin#FFE4B5&nbsp
navajowhite#FFDEAD&nbsp
navy#000080&nbsp
oldlace#FDF5E6&nbsp
olive#808000&nbsp
olivedrab#6B8E23&nbsp
orange#FFA500&nbsp
orangered#FF4500&nbsp
orchid#DA70D6&nbsp
palegoldenrod#EEE8AA&nbsp
palegreen#98FB98&nbsp
paleturquoise#AFEEEE&nbsp
palevioletred#DB7093&nbsp
papayawhip#FFEFD5&nbsp
peachpuff#FFDAB9&nbsp
peru#CD853F&nbsp
pink#FFC0CB&nbsp
plum#DDA0DD&nbsp
powderblue#B0E0E6&nbsp
purple#800080&nbsp
red#FF0000&nbsp
rosybrown#BC8F8F&nbsp
royalblue#4169E1&nbsp
saddlebrown#8B4513&nbsp
salmon#FA8072&nbsp
sandybrown#F4A460&nbsp
seagreen#2E8B57&nbsp
seashell#FFF5EE&nbsp
sienna#A0522D&nbsp
silver#C0C0C0&nbsp
skyblue#87CEEB&nbsp
slateblue#6A5ACD&nbsp
slategray#708090&nbsp
snow#FFFAFA&nbsp
springgreen#00FF7F&nbsp
steelblue#4682B4&nbsp
tan#D2B48C&nbsp
teal#008080&nbsp
thistle#D8BFD8&nbsp
tomato#FF6347&nbsp
turquoise#40E0D0&nbsp
violet#EE82EE&nbsp
wheat#F5DEB3&nbsp
white#FFFFFF&nbsp
whitesmoke#F5F5F5&nbsp
yellow#FFFF00&nbsp
yellowgreen#9ACD32&nbsp

sitesaid.ru

Как сделать фон в HTML. Краткая инструкция

Данная статья позволит вам разобраться с вопросом: «Как сделать фон в HTML?» Будут разобраны самые распространенные и удобные способы, которые используются современными разработчиками.

Чтобы понять, как сделать фон в HTML, нужно всего лишь изучить один простой атрибут. А именно bgcolor, которому можно присваивать значения в виде названия цветов или их индивидуального кода. Использовать данный атрибут можно для любого тега или элемента, например, для отдельных абзацев, для формы, таблицы и т.д. Чтобы поменялся цвет всего документа, укажите атрибут bgcolor для тега body. Но есть одно замечание: bgcolor уже давно признан нежелательным и делает ваш код автоматически невалидным. Консорциум Всемирной паутины призывает использовать всех разработчиков CSS аналоги. Язык каскадных таблиц позволяет заменить нежелательные атрибуты и даже добавляет новые возможности. Именно с помощью CSS можно добиться самого близкого результата к задуманному.

Аналоги атрибутов

Чтобы создать фон для сайта, лучше всего использовать язык каскадных таблиц стилей. Свойство background-color поможет изменить цвет заднего плана любого элемента. Если у этой команды не будет специального назначения к определенному тегу, то фон изменится у всего документа. К примеру, запись background-color: red, сделает задний план сайта красным. А если указано более подробное описание, например p {background-color: green}, то фон каждого тега абзаца p станет зеленным. Чем больше дано конкретики, тем у правила больше приоритета. Можно использовать краткую запись background. Как и в случае с атрибутом bgcolor, в качестве значения свойства background-color можно указывать все известные способы описания цвета.

  1. По названию. Всего существует 17 основных названий (red, green, blue и т.д.).
  2. По шестнадцатиричному значению, где оно складывается из цифр от 0 до 9 и букв от A до F (#c0c0c0).
  3. С помощью аббревиатур RGB, RGBA, HSL, HSLA. Запись таким способом имеет следующий вид RBG(122, 142, 92) или HSL(13, 21%, 75%).

Изображение

Одна из самых замечательных возможностей CSS - это возможность использовать фоновые изображения для сайта. В данном случае вместо обычного заднего плана будет применена заранее выбранная картинка. Свойство background-image может использоваться для любого элемента или для всей страницы, подобно команде background-color. В качестве обязательного значения выступает запись url. После нее следует адрес, который должен ссылаться на изображение. Например, запись background-image: url(image/2.gif), выберет файл 2.gif из каталога image и сделает его фоновой картинкой. Адрес должен находиться обязательно в скобках. Это правило может иметь короткую запись background, куда можно записать любые свойства, относящиеся к фону. С помощью дополнительных команд можно добиться интересных эффектов. Например, background-attachment указывает браузеру, как должно себя ввести изображение при прокрутке окна пользователя. Картинка фона может находиться всегда на одном месте либо передвигаться вместе со всем содержимым определенного элемента.

Заключение

Надеемся, вы из этой статьи узнали о том, как сделать фон в HTML. При этом на выбор дается несколько различных способов. Если вам важно, чтобы ваш код был валидным, то нельзя использовать атрибут HMTL bgcolor. А лучше всего забыть про данную команду и использовать только CSS правила. Ведь каскадные таблицы стилей были придуманы специально для того, чтобы можно было легче заниматься дизайном страниц. Именно поэтому атрибуты подобные bgcolor уходят в прошлое и признаются нежелательными при создании HTML-страниц. После этих слов можно считать вопрос «как сделать фон в HTML» закрытым.

fb.ru