Цвета в таблицах стилей CSS

В этой главе мы рассмотрим свойства цветовой гаммы в таблицах стилей и их значения.

Цвета необходимы для того, чтобы выделить абзац или часть его, заголовок и т.д. для усиления визуального воздействия на пользователя. Управлять свойствами цветов в таблицах стилей (CSS) можно применяя следующие атрибуты:

color: - Определяет цвет элемента.

В качестве значения этого атрибута задается либо непосредственно имя нужного цвета, либо его шестнадцатиричное значение.
color: red; - задает цвет элемента, используя имя цвета
color: #FF0000; - задает цвет элемента, используя код цвета

Пример:

color: red; 

background-color - задает фоновый цвет Web-страницы или ее элемента.

Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию. Может принимать значение имени цвета или его шестнадцатиричный эквивалент
background-color: #FF0000; - задает цвет фона;
background-color: transparent; - цвет фона - прозрачный

Пример:

background-color: #FF0000; 

background-image - задает фоновый рисунок Web-страницы или ее элемента.

Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
background-image: url - задает интернет-адрес файла рисунка
background-image: none - отключает фоновый рисунок

Пример:

background-image: none; 

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

background-attachment: scroll; - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);
background-attachment: fixed; - фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы;

Пример:

background-attachment: scroll; 

background-repeat - устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.

Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.
background-repeat: repeat; - размножает фоновое изображение во всех направлениях (значение по умолчанию);
background-repeat: no-repeat; - запрещает фоновому изображению повторяться;
background-repeat: repeat-x; - размножает фоновое изображение только по горизонтали;
background-repeat: repeat-y; - размножает фоновое изображение только по вертикали

Пример:

background-repeat: repeat; 

background-position-x - задает горизонтальную координату фонового рисунка.

Координата может быть задана целым числом X (абсолютная координата), процентом от соответствующего размера фонового рисунка % (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно. Значение по умолчанию 0%.

Пример:

background-position-x: 0%; 

background-position-y - задает вертикальную координату фонового рисунка.

Координата может быть задана целым числом Y (абсолютная координата), процентом от соответствующего размера фонового рисунка % (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно. Значение по умолчанию 0%.

Пример:

background-position-y: 0%; 

background - задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-repeat, background-position и background-repeat.

Значение по умолчанию scroll transparent none repeat 0% 0%. Значения этих свойств могут располагаться в любом порядке.

Пример:

background: scroll; transparent; none; repeat; 0%; 0%; 

scrollbar-3dlight-color - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

scrollbar-3dlight-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-3dlight-color: red; 

scrollbar-arrow-color - задает цвет стрелок на кнопках полосы прокрутки.

scrollbar-arrow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-arrow-color: red; 

scrollbar-base-color - задает цвет бегунка и кнопок-стрелок полосы прокрутки.

scrollbar-base-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-base-color: red; 

scrollbar-darkshadow-color - задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних границ).

scrollbar-darkshadow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-darkshadow-color: red; 

scrollbar-face-color - задает цвет бегунка и кнопок прокрутки полосы прокрутки.

scrollbar-face-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-face-color: red; 

scrollbar-highlight-color - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).

scrollbar-highlight-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-highlight-color: red; 

scrollbar-shadow-color - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.

scrollbar-shadow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-shadow-color: red; 

scrollbar-track-color - задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.

scrollbar-track-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-track-color: red; 

В следующей главе будут подробно описаны свойства текста.

Цвета в таблицах стилей CSS

Реклама