Свойство background-color синтаксис, примеры.

Описание "background-color"

1. Что такое Background-color
2. Способы установки Background-color
3. Background-color внутри тега
   
   1. Background-color внутри тега
   2. Background-color внутри тега body
4. Background-color через тег style
   
   1. Пример Background-color через тег style
   2. Background-color на всю страницу сайта через тег style
5. Background-color на всю страницу сайта через файл css

Скопировать ссылку



Что такое background-color

Начнем с того : "Что такое background-color"


"Background-color" - это свойство css, которое в значении своем имеет цвет

Синтаксис "background-color"

background-color: цвет | transparent | inherit

Разбираем синтаксис "background-color"

background-color - свойство.

цвет - значение свойства.

transparent- Устанавливает прозрачный фон.

inherit - Наследует значение родителя.

По умолчанию свойство background-color:

По умолчанию свойство background-color - установлено "transparent" - что означает "прозрачный"!

background-color : transparent.
 


Как переводится background-color

Свойство background-color состоит из трех слов:

back -> "задний" прилагательное.

ground -> "земля" существительное.

color -> "цвет" существительное.

Общий смысл перевода словосочетания background-color

Итого получилось -> background-color -> цвет заднего фона.

Где взять цвета для заднего фона background-color

Интересный вопрос - "Где взять цвета для заднего фона background-color". Мх можно взять отсюда:

"Предопределенный цвет html"

И если этих цветов для заднего фона не достаточно, то можно использовать для подбора цвета - генератор цвета!

Скопировать ссылку



Способы установки Background-color

Как вы наверное знаете существует "3 способа css" и они применимы для background-color.

1). Установка "background-color" в теге

"Background-color" можно установить в теге(если позволяет синтаксис).

Здесь элемент Dom с "background-color" в теге
Подробнее смотри здесь


2). Расположение свойства "background-color" в теге style

Второй из способов использования: "Background-color" можно прописать через style.

Нам нужно создать style

<style>style</style>

В теге создать класс... и к нему добавить "Background-color"

Здесь элемент Dom с "background-color" в теге style

3). Третий способ задать "background-color"

Смотрим здесь




3. Background-color внутри тега

   Один из способов, как уже было сказано выше - это расположение "Background-color" внутри тега :

   <div style="background-color: цвет;">Здесь элемент Dom с "background-color" в теге</div>

   Разберем это подробнее далее...

   
   
   
   Скопировать ссылку

   Background-color внутри тега

   Как уже было выше сказано, что "Background-color" - можно установить на любой тег, если это позволяет синтаксис. Т.е. если тег поддерживает "Background-color" - то он и будет там работать.

   Разберем пару живых примеров с "Background-color":
   

   Пример использования "Background-color" внутри тега.

   Для того, чтобы поставить "Background-color" внутрь тега нам понадобится:
   

   Возьмем тег div для примера.

   <div>div</div>

   Внутри тега располагаем style

   Добавляем свойство "Background-color" + цвет пусть будет "#ffb7b7".
   

   Ну и чтобы блок не был совсем куцым добавим ему height = 100.

   Соберем весь блок кода html вместе с "Background-color"
   

   <div style="background-color: #ffb7b7;height: 100px;margin: 17px 0;">Здесь элемент Dom с "background-color" в теге</div>

   Пример использования "Background-color" внутри тега.

   Теперь возьмем выше приведенный код и поставим его прямо здесь:

   Здесь элемент Dom с "background-color" в теге
   
   
   
   Скопировать ссылку

   Background-color внутри тега body

   Выше я применил свойства "Background-color" внутри тега div.

   В качестве второго примера к данному пункту "Background-color внутри тега" - поставим это свойство внутри тега body!

   Пример Background-color внутри тега body

   Для того, чтобы поставить Background-color внутри тега body нам потребуется:

   Нам понадобится код простой страницы html

   Ищем на странице в самом верху тег body

   <body></body>

   Добавляем в первый тег body [атрибут] style :

   style="background-color:#cc97009e;"

   Должно получиться вот так:

   <body style="background-color:#cc97009e;">

   Результат background-color внутри тега body

   Пример с background-color внутри тега body будет на отдельной странице + скачать приведенный пример!
   

   Пример страницы с background-color внутри тега body

   Скачать данный пример на странице со скриптами




4. Background-color через тег style

   Это второй способ задать Background-color на странице.
   
   
   
   
   Скопировать ссылку

   Пример Background-color через тег style

   Для того, чтобы задать Background-color через тег style нам понадобится:

   Возьмем , аналогично предыдущему пункту, элемент div

   <div>div</div>

   Также нам понадобится style

   <style>style</style>

   К тегу добавим какой-то класс - пусть это будет "example"^

   <div class="example">div</div>

   Теперь, классу "example" пропишем свойства Background-color, цвет изменим на любой другой "b2ffb7" + height:

   <style>.example{background-color:#b2ffb7;height: 100px;} </style>

   Соберем весь код Background-color через тег style

   <style>.example{background-color:#b2ffb7;height: 100px;margin: 17px 0} </style>
   <div class="example">Здесь элемент Dom с "background-color" в теге style</div>
   

   Пример Background-color через тег style

   Далее... выше приведенный код разместим на странице и посмотрим, что получилось:

   Здесь элемент Dom с "background-color" в теге style
   
   
   
   Скопировать ссылку

   Задать background-color через тег style

   Продолжение темы - "background-color через тег style" - разберем второй пример с использованием тега style.
   
   Для того, чтобы поставить background-color через тег style на странице, на всю страницу - нам понадобится:
   

   Как и в предыдущем параграфе, берем код простой страницы html

   Ищем на странице в самом верху тег head

   <head></head>

   Добавляем в этот тег head новый тег style:

   <style></style>

   Прописываем background-color стили внутри тега style, цвет чуть изменим, чтобы примеры не перепутывались:

   body{
   background-color:#0085cc9e; /* Цвет фона веб-страницы*/
   }

   Пример background-color через тег style

   Выше описанный провести добавления background-color через тег style на странице соберем в отдельную страницу + добавим ваше любимое "скачать:"
   

   Пример страницы с background-color через тег style

   Скачать данный пример на странице со скриптами

Скопировать ссылку



Background-color на всю страницу сайта

Последний(3 способ) установки Background-color - это использование file css.


Всё тоже самое, что и в предыдущем пункте, только стили будут находиться в отдельном файле css

Для того, чтобы поставить Background-color через файл css, нам потребуется:


Код простой страницы html

Создаем файл css, который будет выглядеть вот так

Подключаем к странице

Цвета для background-color берем здесь или создаем свой цвет : генератор цвета

body{
background-color: #F7D7D7;
}


Смотрим, что у нас получилось:

Пример background-color в файле css

Соберем все то, что мы описали выше в отдельный пример + вы сможете данный пример с background-color скачать!


Пример background-color

Скачать данный пример background-color на странице со скриптами

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---