22. Фоновый цвет и изображение. Введение.
Любой блочный элемент (body, div и пр.) имеет фоновый цвет по умолчанию. Как правило, это прозрачный цвет. Рассмотрим это на простом примере.
На этом примере хорошо видно (благодаря тому, что блок 2 элегантно выпирает из блока 1), что цвет по умолчанию именно прозрачный, а не наследуемый.
Фоновый цвет распространяется на область контента и на внутренние отступы (паддинги, padding). На внешние отступы (маржины, margin) фоновый цвет не распространяется.
Теперь предположим, что начальство поставило нам задачу на разработку сайта в виде вот такого графического файла:
Первое, что приходит в голову в плане 'за что ухватиться, чтобы начать работу', это измерить размер основного цетрального блока.
Для этого можно либо воспользоваться дополнением к FireFox - "Web Developer" (Веб Девелопер, Веб Разработчик). Этим инструментом мы уже пользовались ранее, см уроки: 18, 20.
На всякий случай напомню, что для активизации линейки Веб Девелопера следует нажать кнопки Miscellaneous - Display Ruler (Разное - Показать Линейку).
Другой вариант: скачать и установить бесплатную программу mySize (экранная линейка) с этого сайта:
Я попробовал измерить двумя предложенными спсобами, я у меня получилось примерно так: ширина 800 пикселей, высота 421 пиксель.
Обратите внимание, на такую удобную возможность в Веб Девелопере: нажатием кнопок Outline - Outline Block Level Elements (Контуры - Контур элементов уровня блока) можно обвести все блочные элементы на текущей страничке контуром. При перезагрузке страницы эти обводки пропадают и чтобы они снова появились, следует вновь нажать указанную последовательность кнопок. Эти нажатия соответствуют свойству outline: 1px solid #FF0000; и возможно, вам покажется удобнее сразу дать такое свойства для блочных элементов, к которым требуется пристальное внимание.
Создадим для нашего проекта несколько классов:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_022_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_022_001.zip ← скачайте пример, чтобы установить на свой сайт...
Пусть у нас есть некий большой блок 1, у которого жестко задан фоновый цвет с помощью свойства background-color: #F0FFFF;
Внутри большого блок есть маленький блок 2, у которого фоновый цвет не задан...
Фоновый цвет распространяется на область контента и на внутренние отступы (паддинги, padding). На внешние отступы (маржины, margin) фоновый цвет не распространяется.
Теперь предположим, что начальство поставило нам задачу на разработку сайта в виде вот такого графического файла:
Первое, что приходит в голову в плане 'за что ухватиться, чтобы начать работу', это измерить размер основного цетрального блока.
Для этого можно либо воспользоваться дополнением к FireFox - "Web Developer" (Веб Девелопер, Веб Разработчик). Этим инструментом мы уже пользовались ранее, см уроки: 18, 20.
На всякий случай напомню, что для активизации линейки Веб Девелопера следует нажать кнопки Miscellaneous - Display Ruler (Разное - Показать Линейку).
Другой вариант: скачать и установить бесплатную программу mySize (экранная линейка) с этого сайта:
Я попробовал измерить двумя предложенными спсобами, я у меня получилось примерно так: ширина 800 пикселей, высота 421 пиксель.
Обратите внимание, на такую удобную возможность в Веб Девелопере: нажатием кнопок Outline - Outline Block Level Elements (Контуры - Контур элементов уровня блока) можно обвести все блочные элементы на текущей страничке контуром. При перезагрузке страницы эти обводки пропадают и чтобы они снова появились, следует вновь нажать указанную последовательность кнопок. Эти нажатия соответствуют свойству outline: 1px solid #FF0000; и возможно, вам покажется удобнее сразу дать такое свойства для блочных элементов, к которым требуется пристальное внимание.
Создадим для нашего проекта несколько классов:
body#body_css_022 {
background-color: #C3C3C3;
}
#div_css_022 {
width: 800px;
height: 421px;
margin: 29px auto;
outline: 0px solid #FAA21A; /* для быстрого вкл/выкл рамки */
background-image: url('images/bg.jpg');
}
#div_css_022 h1 {
text-align:center;
outline: 0px solid #CC0000; /* для быстрого вкл/выкл рамки */
padding-top:182px;
font:36px Verdana;
}
/* ниже классы для доказательства, что по умолчанию фон именно прозрачный, а не наследуемый или белый */
#div_css_022_block1 {
background-color: #F0FFFF;
border:1px solid #B0BFBF;
width: 500px;
height: 100px;
position:relative;
padding: 5px;
margin: 5px;
}
#div_css_022_block2 {
border:1px solid #B0B0B0;
width: 400px;
height: 60px;
top: 60px;
left: 250px;
position:absolute;
padding: 5px;
margin: 5px;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_022_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_022_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
