Здравствуйте уважаемые начинающие веб-мастера. Этой статьёй начинаем очень интересную тему — Фоновый цвет и фоновые изображения.
Всё что касается фона, в веб-дизайне определяется свойством 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;
height: 150px;
margin: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Получилась вот такая картина
Точно так же можно сделать фон любому абзацу, слову или словосочетанию. Например так:
<!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>Результат:
Можно ещё загнуть и скруглить уголки у блока с абзацем, но об этом в статье Как сделать тень
А в следующей статье мы научимся делать фоновый цвет, плавно переходящий от тёмных тонов к более светлым, и от одного цвета к другому.
Перемена
Ученик — учителю:
— Следует ли наказывать кого-нибудь за то, чего он не делал?
— Нет, разумеется ни в коем случае нельзя!
— Хорошо. Я не сделал домашнее задание…
Как самому сделать и установить красивые маркеры для списка < < < В раздел > > > Фоновые изображения в css
Весьма признателен за оперативный ответ Сергей,туман проясняется…
движемся вперёд…) Спасибо.
Здравствуйте Юрий. Строка кода показана в статье. Для фона она одинаковая всегда: background: цвет;.
Тут всё дело в том, к какому элементу она применяется. Это уже вопрос вёрстки. Ну например, если Вы в таблице стилей поставите эту строку в селектор html, то фон образуется под страницей сайта, то есть на самом заднем плане. Если в селектор header, то фон будет только в шапке сайта. Короче, какому элементу эту строку пропишите, у того и будет фон.
Вам надо при помощи веб-инспектора определить, какие блоки на вашей странице какое место занимают, и уж тогда в стилях задавать им фон. В веб-инспекторе все блоки показываются в порядке вложенности, так что легко можно понять, который из них вначале, то есть ниже, а который выше, или следующий по порядку.
Здравствуйте Сергей,как говорится не » сложу раму » …(
Пытаюсь » подложить фон » под шапку и контент главной страницы….
Фон обтекает шапку нормально , но заливает (полупрозрачно ) и текст страницы …примерно какой должна быть строка кода…?
Работаю в dreamweaver cs3.
Так в Гугле Алёнушка. Там столько сервисов и таблиц — глаза разбегаются. Может такая палитра устроит, или такой инструмент. Есть и покруче, если поискать немного. Есть вот такая экранная пипетка. Определяет любой цвет и тон на экране.
Добрый день,
Подскажите, пожалуйста, где взять коды палитры для изменения цвета блоков на wordpress?
С уважением,
Алена
Ну боец не боец, а лучшего способа расслабиться не знаю. Когда можно забить на все проблемы, и просто общаться с такими же «дураками» как и сам. Зато потом, когда полностью очухаешься, такая работоспособность начинается, прямо горы готов свернуть.
Спасибо ! Ну вы боец! Молодчина ! А я пока облизываюсь. Иногда виски хочется немерено.
Я тоже отхожу, только после Праздничной болезни. Ох и дал в этом году! И гостей много было, и сам обошёл всех друзей и знакомых. Ну а когда ещё? Всё работа да работа, да сайт.
По поводу сайдбара оригинального наверное ничего не скажу, так как обычно настраиваю его простым margin, но есть одна идейка:
#wrapper{
display:inline;
text-align:center;
}
.content, .sidebar{
float:left;
margin:3px 3px 3px 5px;
padding: 5px;
}
Ширину контенту и сайдбару задать отдельно. Не знаю из скольких слоев шаблон, и в каком блоке сидят контент с сайдбаром, возможно это будет не wrapper, а main, или ещё что, но вот высота будет точно на одном уровне.
Короче нужно пробовать.
Вечер добрый! Я зачастил к Вам (отхожу после болезни).Подскажите как сделать ,чтобы высота фона сайдбара автоматически соответствовала высоте страницы ( контента)