Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Цвет и фон - Программирование от RIN.RU
Цвет и фон

Цвет текста: свойство color


Синтаксис:color: <цвет> | inherit
Начально:зависит от обозревателя
Применимо:ко всем элементам
Наследуемо:да
Проценты:не используются
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Соответствует стандарту (4.0+)


Свойство color задает цвет текста содержимого элемента при отображении. Примеры:


H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }


Примечание. Во избежании конфликта с пользовательской таблицей стилей, это свойство следует задавать вместе со свойством background.


Задание фона


Фон элемента может задаваться либо цветом (background-color), либо графическим образом (background-image, background-repeat, background-attachment и background-position). Можно также пользоваться сокращенным свойством background. Напомним, что фон элемента распространяется на область содержимого элемента и его заполнителя.


Фон корня дерева документов является фоном для отображения документа в целом, но для HTML-документов рекомендуется задавать общий фон в свойствах элемента BODY, а не HTML.


Цвет фона: свойство background-color


Синтаксис:background-color: <цвет> | transparent | inherit
Начально:transparent
Применимо:ко всем элементам
Наследуемо:нет
Проценты:не используются
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Соответствует стандарту (4.0+)


Свойство background-color задает цвет фона элемента при отображении. Значение transparent, принятое по умолчанию, соответствует прозрачному фону. Примеры:


BODY { background-color: white }
H1 { background-color: #0000F0 }
H2 { background-color: #0cc }


Примечание. Во избежании конфликта с пользовательской таблицей стилей, при задании этого свойства следует задавать также свойство background-image (обычно со значением none).


Графический образ фона: свойство background-image


Синтаксис:background-image: <uri> | none | inherit
Начально:none
Применимо:ко всем элементам
Наследуемо:нет
Проценты:не используются
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Соответствует стандарту (4.0+)


Свойство background-image задает графический образ фона элемента при отображении. Значение none, принятое по умолчанию, означает отсутствие фонового образа. Примеры:


BODY { background-image: url("marble.gif") }
P { background-image: none }


Примечание. При задании этого свойства следует задавать также свойство background-color на случай невозможности загрузки графического образа. Если заданы оба эти свойства, то цвет фона будет виден в прозрачных областях образа.


Повтор фонового образа: свойство background-repeat


Синтаксис:background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Начально:repeat
Применимо:ко всем элементам
Наследуемо:нет
Проценты:не используются
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Не поддерживается


Если задан графический образ фона, то свойство background-repeat задает повтор фонового образа при отображении. Его возможные значения:


repeatОбраз повторяется по горизонтали и вертикали.
repeat-xОбраз повторяется только по горизонтали.
repeat-yОбраз повторяется только по вертикали.
no-repeatОбраз не повторяется: отображается только одна его копия.

Пример:


BODY {
background: white url("image.gif");
background-repeat: repeat-y;
background-position: center;
}


Прокрутка фонового образа: свойство background-attachment


Синтаксис:background-attachment: scroll | fixed | inherit
Начально:scroll
Применимо:ко всем элементам
Наследуемо:нет
Проценты:не используются
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Не поддерживается


Если задан графический образ фона, то свойство background-attachment задает прокрутку фонового образа при отображении. Его возможные значения:


scrollОбраз прокручивается вместе с документом.
fixedОбраз зафиксирован и не прокручивается.

Пример:


BODY {
background: white url("image.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}


Позиция фонового образа: свойство background-position


Синтаксис:background-position: [[<размер> | <процент>] {1,2} | [[top | center | bottom] || [left | center | right]]] | inherit
Начально:0% 0%
Применимо:к блочным и внешним элементам
Наследуемо:нет
Проценты:относительно размеров объемлющего прямоугольника
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Не поддерживается


Если задан графический образ фона, то свойство background-position задает позицию фонового образа при отображении. Его возможные значения:


<размер> <размер>Если эта пара значений равна "2cm 3cm", то левый верхний угол образа помещается на 2 см правее и 3 см ниже левого верхнего угола области заполнителя.
<процент> <процент>Если эта пара значений равна "0% 0%", то левый верхний угол образа совмещается с левым верхним углом области заполнителя. Если эта пара значений равна "100% 100%", то правый нижний угол образа совмещается с правым нижним углом области заполнителя. Если эта пара значений равна "10% 80%", то левый верхний угол образа помещается на 10% правее и 80% ниже левого верхнего угола области заполнителя.



Если задано только одно значение, то оно считается позицией по горизонтали, а позиция по вертикали принимается равной 50%. Если даны два значения, то позиция по горизонтали стоит первой. Разрешаются комбинации размеров и процентов, например "2cm 30%". Отрицательные позиции также допустимы. Кроме того, значение этого свойства может задаваться следующими комбинациями ключевых слов (и только ими):


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%".

Пример:


BODY {
background-image: url("banner.jpg");
background-position: top center;
}


Если фоновый образ зафиксирован (см. свойство background-attachment), то его смещения вычисляются относительно окна обозревателя, а не области заполнения элемента. В следующем примере фоновый образ будет размещен в правом нижнем углу окна обозревателя.


BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}


Свойства фона: свойство background


Синтаксис:background: [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] | inherit
Начально:не определено для сокращений
Применимо:ко всем элементам
Наследуемо:нет
Проценты:применимы только в
Устройства:визуальные

Поддержка :Соответствует стандарту (4.0+)
Не поддерживается


Свойство background является сокращением для свойств background-color, background-image,
background-repeat, background-attachment и background-position. Оно позволяет задать все свойства фона одновременно. При этом сначала всем свойствам фона присваиваются их начальные значения, а затем изменяются значения тех свойств, которые явно заданы в данном свойстве.


В первом правиле следующего примера задается только цвет фона, во втором указаны все свойства фона:


BODY { background: blue }
P { background: url("bkgrd.gif") gray 50% repeat fixed }


Примечание. Во избежании конфликта с пользовательской таблицей стилей, это свойство следует задавать вместе со свойством color.




 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Введение в таблицы стилей

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Визуализация элементов

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь
http://st-service.ru/products/kanaty-verevki-shnury-shpagaty/ - канаты в Саратове.