HTML фон

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

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

• Цвет фона HTML страницы определяется CSS атрибутом background-color , который, в свою очередь, размещается внутри тега .
• HTML цвет фона для отдельных элементов: блока, параграфа или ячейки таблицы определяется тем же атрибутом, расположенном внутри соответствующих тегов.
• Фон HTML страницы может быть определен во внешнем .css файле → подробнее CSS уроках.
• HTML картинка — фон определяется с помощью атрибута background-image и картинки.

Цвет фона HTML страницы и отдельных элементов

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

Сделаем фон HTML страницы светло-зеленым:

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

Строка style=»color:Yellow; background-color:#66cc66″ в теге делает цвет фона HTML страницы зеленым, текст – желтым.

Атрибуты style=»» со значениями – линейные CSS включения.

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

Первый параграф Второй параграф

HTML картинка — фон или изображение в качестве фона

HTML фон — картинка определяется с помощью изображения

Например, у нас есть вот такая картинка:

Напишим следующий код для отдельной страницы:

Какой-то произвольный текст.

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

Атрибуты background, background-image , их параметры и значения рассматриваются в уроках CSS. Путь вывода картинки на страницу, то есть → ../images/primer-img.jpg разбирается в одном из следующих уроков.

Исходный код HTML страницы

Исходный код H₂O выглядит так:

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

Исходный код любой web-страницы открывается следующим образом: в меню браузера заходим в View ⇒ Source или Page Source .

Исходный код доступен только для просмотра, но не для редактирования.

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

HTML линии Цвет HTML фона, исходный код HTML картинка

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

Источник

Фон в 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.
  

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

Источник

Свойства цвета

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

В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.

Установка цвета

Цвет, используя CSS, можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию (пример 1).

Пример 1. Установка цвета элемента по его названию

       
Lorem ipsum dolor sit amet.
  

2. По шестнадцатеричному значению

Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML (пример 2).

Пример 2. Установка цвета элемента по шестнадцатеричному значению

     H1 < color: #fc0; >P 
Lorem ipsum
 
Lorem ipsum dolor sit amet.
  

Также допустимо использовать сокращенную запись, вроде #fc0 . Она означает, что каждый символ дублируется, в итоге получим #ffcc00 .

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).

Пример 3. Установка цвета элемента по шестнадцатеричному значению

     P 
Lorem ipsum dolor sit amet.
  

Установка цвета фона и фонового рисунка

Цвет фона определяется значением свойства background-color , а изображение, которое используется в качестве фона, задается свойством background-image . Значением по умолчанию для цвета фона является transparent , которое устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.

Пример 4. Цвет фона и фоновое изображение

       
Lorem ipsum dolor sit amet.
  

Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.

Пример 5. Повторяемость фонового рисунка

       
Lorem ipsum dolor sit amet.
  

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

Положение фона определяется свойством background-position . У него два значения, положение по горизонтали (может быть — right , left , center ) и вертикали (может быть — top , bottom , center ). Положение можно, также, задавать в процентах, пикселах или других абсолютных единицах (пример 6).

       
Lorem ipsum dolor sit amet.
  

В данном примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top .

Свойство background-attachment: fixed фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.

Источник