Стили цветового форматирования Параметр стили цвета color принимает значения, задаваемые ключевым словом или RGB-значением. Кроме этих ключевых слов, можно задавать идентификаторы системных цветов операционной системы пользователя, например, Windows Примеры применения ключевых слов: BODY {color: black } H1 { color: maroon } H2 { color: olive } Примеры применения RGB-значений цветов: EM { color: #f00 } EM { color: #ff0000 } EM { color: rgb(255,0,0) } EM { color: rgb(100%, 0%, 0%)} Формат 16-ричной записи RGB-значения содержит три или шесть 16-ричных символов Функция rgb возвращает 16-ричное число с тремя или шестью цифрами. Например, вызов rgb(f, b, 0) возвращает число #fb0 или #ffbb00, в зависимости от цветового разрешения дисплея пользователя. Устройство отображения документа также корректирует указанные разработчиком RGB-значения. Например, разработчик, вызывая функцию rgb(300,0,0), говорит, что первая (красная) составляющая RGB-значения должна принимать максимально допустимое значение в диапазоне от 0 до 300. Браузер пользователя, если любая из RGB-составляющих цветов дисплея может принимать значение от 0 до 255, решает, что эта составляющая может принимать значение только в диапазоне от 0 до 255 Стили фона Фон любого тега тела и самого тела документа задают с помощью значения цвета или адреса изображения. Например,- в следующем фрагменте устанавливают различный фон для тела 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 задано в процентах, то браузер применяет следующие правила: 1. В случае пары значений 0% 0% левый верхний угол изображения совмещают с левым верхним углом поля для фона. 2. В случае пары значений 100% 100% правый нижний угол изображения совмещают с правым нижним углом поля для фона. 3. В случае пары значений 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 } Стили рамок Стили рамок описывают толщину, цвет и стиль линий рамок. Толщину линий рамок задают параметры border-top-width, border-right-width, border-bottom-widthи border-left-width,а также параметр border-width. Толщину линий задают явным неотрицательным значением. Параметры, устанавливающие толщину одной из сторон рамки (border-top-width, border-right-width, border-bottom-widthи border-left-width)никакой сложности не представляют. Параметр border-widthимеет некоторые особенности, связанные с тем, что устанавливает толщину всех сторон рамки Рассмотрим возможные варианты задания значений этого параметра: 1. Если задано одно значение, то оно применяется к всем сторонам рамки. 2. Бели заданы два значения, то первое значение устанавливает толщину верхней и нижней сторон, а второе значение - левой и правой сторон рамки Например, следующий заголовок H1 { border: solid; border-width: thin thick;text-align: center } имеет рамку, у которой верхняя и нижняя стороны рисуются тонкой сплошной линией, а левая и правая - толстой сплошной линией. 3. Если заданы три значения, первое значение устанавливает толщину верхней стороны, второе значение устанавливает толщину левой и правой сторон, а третье значение -толщину нижней стороны Например, следующий заголовок H1 {border: solid; border-width: thin 1сm thick; text-align: center } имеетрамку, у которой верхняя сторона рисуется тонкой сплошной линией, левая и правая стороны - сплошной линией толщиной 1 см, а нижняя - толстой сплошной линией 4. Если заданы четыре значения, то они устанавливают толщину соответственно верхней, правой, нижней и левой сторон рамки. Цвет линий рамок задают параметры border-top-color, border-right-color, border-bottom-colorи border-left-color,а также параметр border-color.Цвет рамки задают значением типа color. Параметры, устанавливающие цвет одной из сторон рамки (border-top-color, border-right-color, border-bottom-colorи border-left-color)никакой сложности не представляют. Параметр border-colorимеет некоторые особенности, связанные с тем, что устанавливает цвет всех сторон рамки Эти особенности такие же, как и в случае параметра border-width.Например, следующий заголовок. Н1 { border: solid; border-width: thin 1 сm thick; text-align: center; border-color: gray Purple Yellow } имеет рамку, у которой верхняя сторона рисуется серой линией, левая и правая стороны - пурпурной линией, а нижняя - желтой линией. Тип линий рамок задают параметры border-top-style, border-right-style, border-bottom-styleи border-left-style,а также параметр border-style. Параметры, которые устанавливают тип линии одной из сторон рамки (border-top-style, border-right-style, border-bottom-styleи border-left-style)никакой сложности не представляют. Параметр border-styleимеет некоторые особенности, связанные с тем, что устанавливает типы линий всех сторон рамки. Эти особенности такие же, как и в случае параметра border-width. Стиль (толщину, цвети и тип) линий рамок задают параметры border-top, border-right, border-bottomи border-left,а также параметр border . Например, следующий заголовок: H1 { border-bottom: thick solid red } имеет только нижнюю сторону рамки из толстой сплошной линии красного цвета. Внимание, параметр borderне может устанавливать разные стили для разных сторон рамки |