Как делается фоновый цвет средствами CSS

Здравствуйте уважаемые начинающие веб-мастера. Этой статьёй начинаем очень интересную тему — Фоновый цвет и фоновые изображения.

Всё что касается фона, в веб-дизайне определяется свойством background

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

Итак — фоновый цвет экрана

body{
  background: #ebc2af;
}

Фоновый цвет отдельного блока. Это может быть любой блочный html элемент. Мы-же начнём работать с блоками div

div{
  background: #afe6eb;
  border: 2px solid #ffff00;
  width: 400px;
  height:150px;
  margin: auto;
}

Объединим эти два селектора в html файле

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
body{
  background: #ebc2af;
}
div{
  background: #afe6eb;
  border: 2px solid #ffff00;
  width: 400px;
  height150px;
  margin: auto;
}
</style>
</head>
<body>
  <div></div>

</body>
</html>

Получилась вот такая картина

Фоновый цвет блоков body  и  wrapper средствами CSS

Точно так же можно сделать фон любому абзацу, слову или словосочетанию. Например так:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.fon{
	background:#ffe5b4;
	padding:5px;
}
</style>
</head>
<body>
  <p class="fon">Хороший артист - это хороший человек, или наоборот-
	конченный мерзавец, или уж как обычно - всяко бывает?</p>
  <p>Журналисты - акулы , а питаются только тем, что другие настряпают.
	Наверное все таки - <span style="background:#ffe5b4;">
шакалы</span>, ну кто покруче - гиены.</p> </body> </html>

Результат:

43

Можно ещё загнуть и скруглить уголки у блока с абзацем, но об этом в статье Как сделать тень

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


Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Ученик — учителю:
— Следует ли наказывать кого-нибудь за то, чего он не делал?
— Нет, разумеется ни в коем случае нельзя!
— Хорошо. Я не сделал домашнее задание…

Как самому сделать и установить красивые маркеры для списка < < < В раздел > > > Фоновые изображения в css
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

9 комментариев на «Как делается фоновый цвет средствами CSS»

  1. Юрий говорит:

    Весьма признателен за оперативный ответ Сергей,туман проясняется…
    движемся вперёд…) Спасибо.

  2. stariс говорит:

    Здравствуйте Юрий. Строка кода показана в статье. Для фона она одинаковая всегда: background: цвет;.

    Тут всё дело в том, к какому элементу она применяется. Это уже вопрос вёрстки. Ну например, если Вы в таблице стилей поставите эту строку в селектор html, то фон образуется под страницей сайта, то есть на самом заднем плане. Если в селектор header, то фон будет только в шапке сайта. Короче, какому элементу эту строку пропишите, у того и будет фон.

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

  3. Юрий говорит:

    Здравствуйте Сергей,как говорится не » сложу раму » …(
    Пытаюсь » подложить фон » под шапку и контент главной страницы….
    Фон обтекает шапку нормально , но заливает (полупрозрачно ) и текст страницы …примерно какой должна быть строка кода…?
    Работаю в dreamweaver cs3.

  4. stariс говорит:

    Так в Гугле Алёнушка. Там столько сервисов и таблиц — глаза разбегаются. Может такая палитра устроит, или такой инструмент. Есть и покруче, если поискать немного. Есть вот такая экранная пипетка. Определяет любой цвет и тон на экране.

  5. Алена говорит:

    Добрый день,
    Подскажите, пожалуйста, где взять коды палитры для изменения цвета блоков на wordpress?
    С уважением,
    Алена

  6. stariс говорит:

    Ну боец не боец, а лучшего способа расслабиться не знаю. Когда можно забить на все проблемы, и просто общаться с такими же «дураками» как и сам. Зато потом, когда полностью очухаешься, такая работоспособность начинается, прямо горы готов свернуть.

  7. Юрий говорит:

    Спасибо ! Ну вы боец! Молодчина ! А я пока облизываюсь. Иногда виски хочется немерено.

  8. stariс говорит:

    Я тоже отхожу, только после Праздничной болезни. Ох и дал в этом году! И гостей много было, и сам обошёл всех друзей и знакомых. Ну а когда ещё? Всё работа да работа, да сайт.

    По поводу сайдбара оригинального наверное ничего не скажу, так как обычно настраиваю его простым margin, но есть одна идейка:

    #wrapper{
    display:inline;
    text-align:center;
    }
    .content, .sidebar{
    float:left;
    margin:3px 3px 3px 5px;
    padding: 5px;
    }

    Ширину контенту и сайдбару задать отдельно. Не знаю из скольких слоев шаблон, и в каком блоке сидят контент с сайдбаром, возможно это будет не wrapper, а main, или ещё что, но вот высота будет точно на одном уровне.

    Короче нужно пробовать.

  9. Юрий говорит:

    Вечер добрый! Я зачастил к Вам (отхожу после болезни).Подскажите как сделать ,чтобы высота фона сайдбара автоматически соответствовала высоте страницы ( контента)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *