Описание "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 на странице со скриптами
