- •1. Внедрение таблиц стилей в документ
- •1.1. Внутренние стили тегов
- •1.2. Глобальные таблицы стилей
- •1.3. Внешние таблицы стилей
- •1.4. Каскады таблиц стилей
- •2. Форматирование с помощью таблиц стилей
- •2.1. Стили символов
- •2.2. Стили цветового форматирования
- •2.3. Стили фона
- •2.4. Стили рамок
- •2.5. Стили визуального отображения
2.3. Стили фона
Фон любого тега тела и самого тела документа задают с помощью значения цвета или адреса изображения. Например,- в следующем фрагменте устанавливают различный фон для тела BODY, заголовка Н3 и абзацев:
<HEAD>
<STYLE type="text/css">
BODY {background: url("images/bgrnd2.giF')
H3{ background: rgb(255,200,100)}
P { background: Gray }
</STYLE>
</HEAD>
</BODY>
<НЗ>Заголовок со своим фоном</Н3>
<Р>Абзац со своим фоном.
</BODY>
Теги, для которых не указан фон, наследуют фон родителя. Например, если бы для абзацев не был установлен фон, абзацы унаследовали бы фон от родителя (в этом случае от тела BODY) Но фон дочернего тега, если он задан, перекрывает фон родителя.
В общем случае стили фона задают параметрами background-color, background-image, background-repeat, background-attachment, background-position и background.
Параметр background-color устанавливает RGB-значение цвета фона. Нa него распространяются правила работы с параметром color. Например;
Н1 { background-color: #F00 }
Параметр background-image задаст адрес файла изображения, применяемого для наполнения фона тега Например
BODY { background-image: url("marble.gif')}
Р { background-image: none }
Параметр background-repeat применяют совместно с параметром background-image. Он задает способ отображения указанного изображения. Например, в следующем случае:
<HEAD>
<STYLE type="text/css">
BODY { background: url("images/bgrnd2.gif');
background-repeat: repeat-y;
background-position: center;}
H3 { background: rgb(255,200,100)}
P { background: Gray }
</STYLE>
</HEAD>
<BODY>
<НЗ>Заголовок со своим фоном</НЗ>
<Р>Абзац со своим фоном. </BODY>
центр окна просмотра, повторяясь многократно по вертикали, наполняет изображение bgrnd2.gif. Остальную поверхность тела документа наполняет фон по умолчанию (белый). Как и прежде, фон дочерних тегов перекрывает фон тела документа.
Параметр background-attachment применяют совместно с параметром background-image. Он задает степень подвижности изображения. Например, если в предыдущем примере стиль тела описать следующим образом:
BODY { background: url("images/bgrnd2.gif");
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}
то рисунок фона bgrnd2.gif не будет прокручиваться вместе с содержимым документа.
Параметр background-position применяют совместно с параметром background-image. Он задает расположение указанного изображения.
Если значение параметра background-position задано в процентах, то браузер применяет следующие правила:
В случае пары значений 0% 0% левый верхний угол изображения совмещают с левым верхним углом поля для фона.
В случае пары значений 100% 100% правый нижний угол изображения совмещают с правым нижним углом поля для фона.
В случае пары значений N% M% (0<N,M<100) точку пересечения N% M% поверхности изображения совмещают с точкой пересечения N% М% поля для фона. Например, в следующем случае центр фонового изображения будет совмещен с центром рабочей области окна просмотра:
BODY { background: url("images/bgrnd2.giF');
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
}
Если расположение указывают в единицах длины (length), например парой значений Nem Mem, то левый край изображения от левого края поля фона отступает на N сантиметров, а верхний край изображения от верхнего края поля фона - на М сантиметров.
Если для параметра background-position указаны два значения, то перовое значение задает позицию по горизонтали. Если указано только одно значение (в процентах или единицах длины), то второе значение автоматически приравнивается 50%. Разрешены комбинации в процентах или единицах длины (например, 50% 2cm) Допустимы и отрицательные значения.
Ключевые слова нельзя комбинировать со значениями в процентах или единицах длины. Допустимы следующие комбинации ключевых слов для параметра background-position:
top left и left top - то же, что и 0% 0%;
top, top center и center top - то же, что и 50% 0%;
right top и top right - то же, что и 100% 0%;
left, left center и center left - то же, что и 0% 50%;
center и center center - то же, что и 50% 50%;
right, right center и center right - то же, что и 100% 50%,
bottom left и left bottom - то же, что и 0% 100%,
bottom, bottom center и center bottom - то же, что и 50% 100%,
bottom right и right bottom - то же, что и 100% 100%
Параметр background применяют для сокращенного указания значений параметров стилей фона background-color, background-image, background-repeat, background-attachment и background-position.
Например, равноценны следующие описания
BODY { background: url("images/bgrnd2.gif");
background-repeat: no-repeat;
background-position: left;
background-attachment: fixed;
}
и
BODY { background: url("images/grnd2.gif")
no-repeat left fixed }