Каждая таблица стилей образуется из наборов правил. Чтобы лучше понять, что же такое правила, давайте разберем их структуру. Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block).

Структура правила CSS

Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет собой сочетание свойства (property) и значения (value).

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значения этого свойства. Выше представлен блок, содержащий два объявления. Первое определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе — что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы H1 (определённые селектором) этого документа будут выводиться красным текстом на желтом фоне.

Текущая категория

Свойства CSS — background-color

Данное свойство задает чистый цвет фона элемента. Этот цвет заполняет области содержимого, отступов и рамок элемента, распространяясь до внешнего края рамки элемента. Для рамок, имеющих прозрачные участки, таких как пунктирные рамки, фоновый цвет будет просматриваться сквозь эти прозрачные участки.

Значения:

<?php
<цвет> | transparent inherit

Начальное значение: transparent
Область применения: все элементы
Наследование: нет
Вычисляемое значение: как задано

Для того чтобы цвет немного выступал за края текста элемента, просто добавьте отступы:

<?php
р 
{
background-colorgray;
padding10px;
}

Фоновый цвет можно задать практически для любого элемента, от body до строковых элементов, таких как em и а. Свойство background-color не наследуется. Для него по умолчанию устанавливается значение transparent: если цвет элемента не определен, его фон должен быть прозрачным, чтобы был виден фон его элемента-предка.

Чаще всего в применении ключевого слова transparent нет необходимости, т. к. это значение по умолчанию. Однако иногда оно может быть полезным. Представьте, что браузер пользователя делает фон всех ссылок белым. Создавая свою страницу, вы делаете белым основной цвет ссылок и не хотите, чтобы они имели фон. Чтобы обеспечить своему выбору преимущество, объявите:

<?php
{
colorwhite;
background-colortransparent;
}

Специальные эффекты:

Комбинируя свойства color и background-color, можно создавать некоторые полезные эффекты:

<?php
h2 
colorwhite;
background-colorrgb(20%,20%,20%);
font-familyVerdana,sans-serif;
}

Пример этого стиля:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.

Эта таблица стилей немного сложнее:

<?php
body 
{colorblackbackground-colorwhite;}
h2 {coloryellowbackground-colorrgb(0,51,0);}
{colorred;}
a:link {colorblackbackground-colorsilver;}
a:visited {colorgreenbackground-colorwhite;}

Пример этого стиля:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.

Текущая категория

ПОЛЕЗНЫЕ ССЫЛКИ: