Установка свойства color

Свойство color устанавливает цвет текста элемента. Вы можете присваивать этому свойству значение цвета с использованием форматов, которые описаны на вставке «Задание значений цвета». Например, следующее правило устанавливает синий цвет для текста элемента AUTHOR:

AUTHOR {color.blue}

А это правило устанавливает для текста элемента AUTHOR красный цвет: 

AUTHOR {color:rgb(255,0,0)}

Свойство coдor наследуется дочерними элементами. Так, если вы присоедините следующую таблицу стилей к XML-документу из Листинга 7-2, весь текст будет отображен синим цветом за исключением текста элемента PRICE, который будет отображен красным, поскольку для него в таблице стилей предусмотрена отдельная установка цвета.

BOOK

(displayiblock; 

margin-top:12pt; 

font-size:10pt; 

colorblue}

TITLE

{font-style:italic} 

AUTHOR

{font-weight:bold} 

PRICE

(coloured)

Совет. Свойство color устанавливает цвет для отдельных букв текста (foreground color). Чтобы установить цвет фона, воспользуйтесь свойством background-color (см. раздел «Установка свойства background-color» далее в этой главе).

Задание значений цвета

К свойствам, которым вы можете назначать значения цвета, относятся color, background-color и border-color. Вы можете присвоить значение цвета с использованием четырех различных форматов, которые содержатся в приведенных ниже примерах правил. Эти правила являются эквивалентными - каждое из них назначает свойству coдor красный цвет.

PARA {coloured}

PARA{color:rgb(255,0,0)}

PARA{color:#FF0000}

PARA {color:rgb(100%,0%,0%)}

Первый формат использует ключевое слово CSS (red), в то время как другие три формата задают цвет путем установки относительной интенсивности компонентов красного, зеленого и синего в составе цвета (именно в таком порядке). Во втором формате интенсивность каждого из цветов задается десятичным числом в диапазоне от 0 до 255. В третьем формате цвет задается с использованием шестизначного шестнадцатеричного числа в диапазоне от 000000 до FFFFFF, где первые две цифры определяют интенсивность красного, вторые две цифры — интенсивность зеленого, а последние две цифры - интенсивность синего. В последнем формате интенсивность каждого из цветов задается в процентах от 0 % до 100 %.

В таблице 7.9 приведены значения цвета, которые вы можете присвоить с помощью ключевых слов CSS. Для каждого цвета указано описание во всех четырех форматах. (Ключевые слова CSS соответствуют названиям цветов.)

Таблица 7.9

Если вы используете один из RGB-форматов, вы можете создать и  множество других цветов, не показанных в данной таблице. Фактически вы можете присвоить каждому из компонентов 256 различных значений, что в сумме дает 16777216 различных цветов (256*256*256). Если вы отображаете документ в системе с глубиной цвета 24 бита I или более, монитор может реально отобразить каждый из этих различных цветов.

Установка свойств фона

Стандарт CSS поддерживает следующие свойства, позволяющие вам модифицировать фоновое оформление элемента:

• bacfcground-coior;
• background-image;
• background-repeat;
• background-position.

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

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

• Установка свойства background-color

Вы можете установить цветовой фон для элемента (заливку), присвоив значение цвета свойству background-color. (Информация о различных типах значений цвета содержится на вставке «Задание значений цвета» ранее в этой главе.) Например, следующее правило устанавливает светло-желтый цвет фона для элемента TITLE:

TITLE {background-coloryellow}

Напомним, что свойство color устанавливает цвет собственно символов элемента. Так, следующее правило создает синие буквы на желтом фоне:

TITLE

{colorblue; 

background-color:yellow}

Если вы не хотите задавать сплошной цвет фона для элемента, вы можете присвоить свойству bacfcground-cotor значение transparent, например:

TITLE {background-color:transparent}

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

Установка свойства background-image

Вы можете добавить элементу фоновый рисунок, назначив свойству background-image URL файла с рисунком. (Информация о задании URL содержится на вставке «Задание значений URL» ранее в этой главе.) Например, следующее правило устанавливает для элемента STANZA фоновый рисунок, содержащийся в файле Leaf.bmp:

STANZA {background-image:url(Leaf.bmp)}

Для дальнейшего рассмотрения воспользуемся таблицей стилей, представленной в Листинге 7-3, которая присоединена к XML-документу, представленному в Листинге 7-4. (Копия обоих листингов содержится на CD-ROM в файлах Leaves.css и Leaves.xml.)

Листинг 7-3

 Leaves.css

/* Имя файла: Leaves.css */

РОЕМ

{font-size: 145%}

РОЕМ, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE 

{display: block)

SECTION, STANZA 

{margin-top:1 em}

STANZA 

(background-image:url(Leaf.bmp)}

 

Листинг 7-4

Leaves.xml

<?xmlversion="1.0"?>

<!-- Имя файла: Leaves.xml -->

<?xml-stylesheet type="text/css" href="Leaves.css"?>

<POEM>

<TITLE>Leaves of Grass

<SUBTITLE>I Sing the Body Electric</SUBTITLE> 

</TTTLE> 

<AUTHOR>by Walt Whitman</AUTHOR>

<SECTION> 

<NUMBER>1.</NUMBER> 

<STANZA>

<VERSE>I SING the Body electric;</VERSE> 

<VERSE>The armies of those I love engirth me, and I engirth them;</VERSE> 

<VERSE>They will not let me off till I go with them, respond to them,</VERSE> 

<VERSE>And discorrupt them, and charge them full with the charge of

theSoul.</VERSE> 

</STANZA> 

<STANZA>

<VERSE>Was it doubted that those who corrupt their own bodies conceal

themselves;</VERSE> 

<VERSE>And if those who defile the living are as bad as they who defile

the dead?</VERSE>

<VERSE>And if the body does not do as much as the Soul?</VERSE> 

<VERSE>And if the body were not the Soul, what is the Soul?</VERSE> 

</STANZA> 

</SECTION>

</POEM>

На следующем рисунке показано содержимое графического файла Leaf.bmp.

Internet Explorer 5 отобразит документ Leaves.xml, как показано на рисунке в начале следующей страницы.

Обратите внимание, что рисунок повторяется при заполнении всей области, занимаемой содержимым элемента, достигая почти правой границы окна браузера. (В следующем разделе «Установка свойства background-repeat» вы узнаете, как управлять заполнением.) Любая часть изображения, выступающая за пределы текста элемента (внизу или вверху) обрезается. В рассматриваемом примере обрезается только очень небольшая часть изображений в нижнем ряду каждого элемента STANZA.

Если вы не хотите задавать фоновый рисунок для элемента, то можете установить для свойства background-image значение попе, например:

STANZA {background-image:none}

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

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

Установка свойства background-repeat

Если вы назначили свойству background-image файл рисунка, вы можете управлять повторами изображения, назначив свойству background-repeat  одно из следующих ключевых слов:

• peat (по умолчанию). Повторяет изображения, как по горизонтали, так ипо вертикали. Поскольку это значение устанавливается по умолчанию, добавление background-repeat к правилу STANZA в таблице стилей из Листинга 7-3 (см. ниже) не окажет эффекта на способ отображения документа, как показано на рисунке вверху следующей страницы.

STANZA

{background-image:url(Leaf.brnp); 

background-repeat: repeat}

• repeat-x. Повторяет изображение только в горизонтальном направлении. Например, следующее правило STANZA приведет к отображению документа, как показано на следующем рисунке.

STANZA

{background-image:url(Leaf.bmp); 

background-repeat:repeat-x}

• repeat-y. Повторяет изображение только в вертикальном направлении. Например, следующее правило STANZA отобразит документ, как это показано на следующем рисунке.

STANZA

{background-image:url(Leaf.bmp); 

background-repeat:repeat-y}

• no-repeat. Приводит к однократному отображению рисунка. Например, следующее правило STANZA отобразит документ, как это показано на рисунке вверху следующей страницы.

STANZA

{background-image:url(Leaf.bmp); 

background-repeat:no-repeat}

Установка свойства background-position

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

• Значения горизонтальной и вертикальной позиции в единицах размеров. Вы можете задать свойству background-position два значения размеров. Первое значение определяет горизонтальную позицию изображения внутри элемента, а второе значение — вертикальную позицию изображения внутри элемента. Вы можете присвоить любой тип численного значения размера (см. вставку «Задание значений в размерных единицах» ранее в этой главе). Например, следующее правило помещает верхний левый угол изображения на 0,5 дюймов правее и на 0,25 дюймов ниже верхнего левого угла элемента STANZA:

STANZA

(background-image:url(Leaf.bmp); 

background-repeat:no-repeat; 

background-position:5in .25in)

Ha вepxнем рисунке на следующей странице показало как будет выглядеть результат.

Если изображение будет повторяться в соответствии с приведенным ниже правилом, весь узор, состоящий из повторных изображений, окажется смещенным, как это показано на следующем рисунке.

STANZA

{background-image:url(Leaf.bmp); 

background-repeat:repeat; 

background-position:.5in .25in}

• Значения горизонтальной и вертикальной позиции в процентах. Вы можете установить для свойства background-position два процентных значения. Первое из них определяет горизонтальную позицию изображения внутри элемента, при этом 0% соответствует левому краю (горизонтальная позиция по умолчанию), 50% соответствует центру элемента по горизонтали, а 100% - правому краю элемента. Второе значение в процентах определяет вертикальную позицию изображения, при этом 0% соответствует верхнему краю (вертикальная позиция по умолчанию), 50% соответствует центру элемента по вертикали, а 100% - нижнему краю элемента. Например, следующее правило поместит изображение в середину элемента:

STANZA

{background-image:url(Leaf.bmp); 

background-repeatmo-repeat; 

background-position:50% 50%}

На следующем рисунке показан результат действия этого правила.

Если изображение повторяется в соответствии со следующим правилом, весь узор из повторяющихся изображений будет смещен на заданную величину, как показано на следующем рисунке.

STANZA

{background-image:url(ljeaf.bmp); 

background-repeat:repeat; 

background-position:50% 50%}

• Значения в виде ключевых слов. Вы можете задать позицию фонового изображения, назначив свойству background-position одно или два ключевых слова CSS. Например, введите ключевые слова right и bottom, как в следующем правиле, и ваше изображение будет помещено в правый нижний угол элемента, как показано на верхнем рисунке следующей страницы.

STANZA

{background-image:url(Leaf.bmp); 

background-repeatrno-repeat; 

background-positiomright bottom}

На нижнем рисунке следующей страницы представлены различные врианты сочетаний ключевых, слов и соответствующие им позиции изображения.

Порядок ключевых слов значения не имеет. Например, background-position:bottom right эквивалентно background-position:right bottom.

Установка свойств разбивки текста и выравнивания

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

• letter-spacing;
• vertical-align;
• text-align;
• text-indent;
• line-height;
• text-transform;
• text-decoration.

Дочерние элементы наследуют все эти свойства, за исключением vertical-align.

Установка свойства letter-spacing

Вы можете воспользоваться свойством letter-spacing для увеличения или уменьшения просвета между символами в тексте элемента. Для увеличения просвета свойству letter-spacing следует присвоить положительное значение в соответствующих единицах размера. Например, следующее правило увеличивает просвет между символами на одну четверть от высоты текста:

TITLE {letter-spacing:.25em}

Вы можете задать свойству letter-spacing отрицательное значение для v менынения просвета между символами на значение в соответствующих единицах размера. Например, это правило уменьшает просвет между символами на половину пункта:

TITLE {letter-spacing:-.5pt}

(Более подробная информация о различных видах значений размеров, которые вы можете устанавливать, содержится на вставке «Задание значений в размерных единицах» ранее в этой главе.)

Вы также можете выбрать обычную величину просвета, установив для свойства letter-spacing значение normal. Например, следующая таблица стилей, присоединенная к XML-документу из Листинга 7-4, назначает увеличенный просвет между символами для элемента TITLE, и назначает обычный просвет между символами для элемента SUBTITLE (второе назначение необходимо, чтобы отменить увеличенный просвет между символами, который в противном случае элемент SUBTITLE унаследовал бы от родительского элемента, TITLE):

РОЕМ

{font-size: 145%} 

РОЕМ, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE

{display: block} 

SECTION, STANZA

{margin-top:1em} 

TITLE

{letter-spacing:.5em} 

SUBTITLE

{letter-spacing:normal}

В соответствии с правилами этой таблицы стилей, Internet Explorer 5 отобразит XML-документ как показано на следующем рисунке.

Установка свойства vertical-align

Вы можете использовать свойство vertical-align для создания верхних или нижних индексов (надстрочных и подстрочных символов). Это свойство оказывает воздействие только на элементы inline (см. раздел «Установка свойства display» ранее в этой главе).

Вы можете назначить свойству vertical-align одно из ключевых слов CSS, описанных в таблице 7.10. Чтобы получить образцы текста, я присваивал значение свойству vertical-align только для элемента CHILD, который является элементом inline и описан в документе следующим образом:

<PARENT>PARENT ELEMENT

<CHILD>CHILD ELEMENT</CHILD> 

</PARENT>

Дочерние элементы не наследуют свойство vertical-align. 

Таблица 7.10

Установка свойства text-align

Мы можете воспользоваться свойством text-align для управления горизонтальным выравниванием текста элемента. Это свойство будет работать только в том случае, если вы используете его для элемента типа block. Оно воздействует как на сам элемент, так и на дочерние элементы, которые он содержит, независимо от того, относятся ли они к типу block или inline. (Об элементах block и inline рассказывалось в разделе «Установка свойства display».)

Свойство text-align воздействует на выравнивание текста внутри области содержимого текста. По умолчанию область содержимого текста занимает практически полную ширину окна браузера. Однако, вы можете модифицировать как ширину, так и положение области текста элемента (см. раздел «Установка свойств текстовых областей» далее в этой главе).

Вы можете назначить свойству text-align одно из следующих трех ключевых слов:

• left. Выравнивает каждую строку по левому краю. Предположим, вы применяете следующее правило к XML-документу из Листинга 7-4 (в добавление к остальным правилам, содержащимся в таблице стилей из Листинга 7-3, за исключением установки свойства background-image, которая у далека):

РОЕМ {text-align:left}

Поэма будет выглядеть, как показано на следующем рисунке.

• right. Выравнивает каждую строку по правому краю. Так, следующее правило выравнивает текст поэмы вправо, как показано на верхнем рисунке следующей страницы.

РОЕМ {text-align:right}

• center. Центрирует строки по горизонтали. Например, следующее правило центрирует весь текст поэмы, как показано на рисунке ниже.

РОЕМ {text-align:center}

Установка свойства text-indent

Вы можете воспользоваться свойством text-indent, чтобы задать отступ для первой строки текста элемента. Вы можете устанавливать для свойства text-indent все виды значений размеров, описанных на вставке « Задание значений в размерных единицах» ранее в этой главе. Например, следующее правило задает отступ для первой строки элемента VERSE, равный трехкратной высоте ее шрифта:

VERSE {text-indent:3em} 

Вот как будет выглядеть элемент VERSE:

    It is in his walk, the carriage of his 

neck, the flex of his waist and knees—dress 

does not hide him;

Альтернативой является задание величины отступа в процентах от полной ширины текста элемента. Например, это правило задает смещение первой строки элемента VERSE на половину ширины элемента:

VERSE {text-indent:50%} 

Вот как элемент VERSE будет выглядеть:

                                It is in his walk, the

carriage of his neck, the flex of his waist 

and knees—dress does not hide him;

Совет. Чтобы задать отступ для всех строк элемента (а не только для первой строки), воспользуйтесь свойством margin-left (см. раздел «Установка свойств управления полями» далее в этой главе).

Вы можете задать отрицательное значение - в размерных единицах или в процентах - чтобы сдвинуть первую строку влево относительно других строк. Однако если вы просто присвоите отрицательное значение свойству text-indent, первая часть строки окажется скрытой, как показано на следующем рисунке.

VERSE

{margin-left:4em; text-indent:-2em}

Установка свойства line-height

Свойство line-height управляет расстоянием между базовыми линиями соседних строк текста элемента. Вы можете воспользоваться этим свойством для разбивки строк по вертикали.

Свойству line-height можно присвоить значение, выраженное в любой из размерных единиц, описанных на вставке «Задание значений в размерных единицах» ранее в этой главе. Предположим, вы применили следующее правило для XML-документа из Листинга 7-4 (в дополнение к правилам, содержащимся в таблице стилей из Листинга 7-3, за исключением установки свойства background-image, которое удалено с целью облегчения восприятия):

STANZA {line-height:2em}

Текст элемента STANZA будет иметь двойной междустрочный интервал, как показано на верхнем рисунке на следующей странице.

Альтернативой является задание междустрочного интервала в процентах от высоты текста элемента. Например, следующее правило эквивалентно предыдущему, т.е. задает двойной междустрочный интервал:

STANZA {line-height:200%}

Установка свойства text-transform

Вы можете воспользоваться свойством text-transform для управления стилем прописных букв текста элемента при отображении его браузером. Вы можете установить для свойства text-transform значения в виде ключевых слов, описанных в таблице 7.11.

Таблица 7.11

Установка свойства text-decoration

Вы можете использовать свойство text-decoration для рисования различных типов линий внутри текста элемента. В таблице 7.12 представлены ключевые слова, которые могут быть назначены этому свойству:

Таблица 7.12

Мы можете применить более одного типа линий, присвоив свойству text-decoration несколько значений. (Однако включение ключевого слова none отменяет действие всех ранее установленных ключевых слов.) Например, следующее правило указывает браузеру нарисовать линию поверх и под текстом:

TITLE {text-decoration:underline overline}

Установка свойств текстовых областей

Спецификация CSS поддерживает ряд свойств (типа box), которые вы можете использовать для форматирования блока текста, принадлежащего элементу. К этим свойствам относятся следующие:

• свойство margin добавляет невидимое (прозрачное) поле вокруг элемента, снаружи от видимой рамки (если она имеется);
• свойство border отображает видимую рамку - определенного стиля -вокруг элемента, снаружи от просвета (если он имеется);
• свойство padding добавляет просвет непосредственно снаружи от содержимого элемента, но внутри рамки (если она имеется);
• свойства задания размеров height и width устанавливают размеры области содержимого элемента с добавленными просветом и рамкой (см. следующий рисунок);

• свойства задания позиций float и clear устанавливают положение элемента относительно окружающих элементов.

Элемент block - это элемент, для свойства display с установленным значением block, а элемент inline — это элемент, для свойства display с установленным значением inline (см. раздел «Установка свойства display»). В Internet Explorer 5.0 и 5.01 первые три группы свойств (margin, border и padding) действуют только на элементы block. Однако, в Internet Explorer 5.5 вы можете использовать эти свойства как для элементов block, так и для : шементов inline. При другой версии Internet Explorer (с 5.0 по 5.5) вы можете применять свойства позиционирования и для элементов block, и для элементов inline; однако наиболее эффективно и предсказуемо они работают с элементами block. Дочерние элементы не наследуют свойств для текстовых областей.

Установка свойств управления полями

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

• margin-top;
• margin-right;
• margin-bottom;
• margin-left.

Вы можете устанавливать для этих свойств любые значения в размерных единицах, описанных на вставке «Задание значений в размерных единицах» ранее в этой главе. Например, следующее правило добавляет поле слева и справа от элемента STANZA. Ширина поля в два раза больше высоты текста элемента:

STANZA

{margin-left:2em; 

margin-right:2em}

Вы также можете устанавливать величину поля в процентах относительно ширины родительского элемента. Например, следующее правило создает левое поле, равное 1/4 от ширины родительского элемента:

STANZA (margin -left:25%}

Вы можете назначать одинаковые величины полей по всем четырем сторонам элемента путем присвоения одного значения — в размерных единицах или в процентах - свойству margin. В качестве примера возьмем таблицу стилей, представленную в Листинге 7-5, которая присоединена и XМL-документу, представленному в Листинге 7-6. В соответствии с этой таблицей стилей текст отображается без полей. (Копии этих двух листингов содержатся на CD-ROM в файлах Raven.css и Raven.xml.)

Листинг 7-5 

Raven.css

Г Имя файла: Raven.css */

РОЕМ

{font-size:small}

РОЕМ, TITLE, AUTHOR, DATE, STANZA, VERSE {display:block}

 

Листинг 7-6

Raven.xml

<?xmlversion="1.0"?>

<!-- Имя файла: Raven.xml -->

<?xml-stylesheettype="texVcss" href="Raven.css"?>

<POEM>

<TITLE>The Raven</TITLE> 

<AUTHOR>Edgar Allan Poe</AUTHOR> 

<DATE>1845</DATE>

<STANZA>

<VERSE>Once upon a midnight dreary, white I pondered, weak and

weary,</VERSE> 

<VERSE>Over many a quaint and curious volume of forgotten

tore&*8212;</VERSE> 

<VERSE>Whife I nodded, nearly napping, suddenly there came a tapping,</

VERSE> 

<VERSE>As of some one gently rapping, rapping at my chamber door.</

VERSE> 

<VERSE>"Tis some visitor," I muttered, "tapping at my chamber

door&#8212;</VERSE>

<VERSE>Only this, and nothing more."</VERSE> 

</STANZA> 

<STANZA>

<VERSE>Ah, distinctly I remember it was in the bleak December,</VERSE> 

<VERSE>And each separate dying ember wrought its ghost upon the

floor.</VERSE>

<VERSE>Eagerly I wished the morrow;&#8212;vainly I had sought to

borrow</VERSE>

<VERSE>From my books surcease of sorrow&#8212;sorrow for the lost 

Lenore&#8212;</VERSE>

<VERSE>For the rare and radiant maiden whom the angels name 

Lenore&#8212;</VERSE>

<VERSE>Nameless here for evermore.</VERSE> 

</STANZA>

</POEM>

Примечание. &#8212; есть ссылка на символ для увеличенного (em) тире (-).

На следующем рисунке показано, как будет выглядеть элемент без полей.

Добавив следующее правило в таблицу стилей, которое устанавливает поля в 2,5еm по всем четырем сторонам элементов STANZA, вы получите т, что представлено на рисунке на следующей странице. 

STANZA {margin:2.5em}.

Примечание. Зона полей всегда прозрачна, т.е. через нее видна фоновая ;4цлннка или фоновый рисунок родительского элемента (или браузера).

Copyright © Realcoding.NET 2003-2007. При перепечатке материалов ссылка на автора материала обязательна.
Сообщить об ошибке или написать письмо администрации через форму контактов.