Свойство background-color синтаксис, примеры.
Описание "background-color"
- Что такое Background-color
- Способы установки Background-color
- Background-color внутри тега
- Background-color через тег style
- Background-color на всю страницу сайта через файл css
-
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
Скачать данный пример на странице со скриптами
-
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
Начнем с того : "Что такое background-color"Синтаксис "background-color"
Разбираем синтаксис "background-color"
background-color - свойство.
цвет - значение свойства.
transparent- Устанавливает прозрачный фон.
inherit - Наследует значение родителя.
По умолчанию свойство background-color:
По умолчанию свойство background-color - установлено "transparent" - что означает "прозрачный"!
Как переводится background-color
Свойство background-color состоит из трех слов:
back -> "задний" прилагательное.
ground -> "земля" существительное.
color -> "цвет" существительное.
Общий смысл перевода словосочетания background-color
Где взять цвета для заднего фона background-color
Интересный вопрос - "Где взять цвета для заднего фона background-color". Мх можно взять отсюда:
И если этих цветов для заднего фона не достаточно, то можно использовать для подбора цвета - генератор цвета!
Способы установки Background-color
Как вы наверное знаете существует "3 способа css" и они применимы для background-color.
1). Установка "background-color" в теге
"Background-color" можно установить в теге(если позволяет синтаксис).
2). Расположение свойства "background-color" в теге style
Второй из способов использования: "Background-color" можно прописать через style.
Нам нужно создать style
В теге создать класс... и к нему добавить "Background-color"
3). Третий способ задать "background-color"
Смотрим здесьBackground-color на всю страницу сайта
Последний(3 способ) установки Background-color - это использование file css.Всё тоже самое, что и в предыдущем пункте, только стили будут находиться в отдельном файле css
Для того, чтобы поставить Background-color через файл css, нам потребуется:Код простой страницы html
Создаем файл css, который будет выглядеть вот так
Подключаем к странице
Цвета для background-color берем здесь или создаем свой цвет : генератор цвета
background-color: #F7D7D7;
}
Смотрим, что у нас получилось:
Пример background-color в файле css
Соберем все то, что мы описали выше в отдельный пример + вы сможете данный пример с background-color скачать!Пример background-color
Скачать данный пример background-color на странице со скриптами
background color
style background color
css background color
text background color
html background color
background font color
background color gradient
webkit background color
background color rgb
body background color
style background color rgb
background color fff
div background color
paragraph_background_color_into_tag

подробнее.
подробнее.
подробнее.
подробнее.
подробнее.