FrontPage 2003

81

Приложение 2.

Описание некоторых свойств CSS

Не все элементы CSS поддерживаются браузеры разных производителей и разных версий. Об этом необходимо помнить при создании своего web-сайта. Приведенные далее примеры оптимизированы под браузер Internet Explorer 6.0.

Описание цвета шрифта и фона.

color: - цвет текста. Цвет можно задавать ключевым словом или шестнадцатеричным кодом. background-color: - цвет фона. По умолчанию – transparent (прозрачный). background-image: url(…) - фоновое изображение. В скобках задается путь к изображению. background-position: - начальное положение фонового изображения. Задается либо в

пикселях или процентах (два значения через пробел), указывающих отступы по горизонтали и вертикали от левого верхнего угла окна, либо одним из значений left, top, center, right, bottom.

background-repeat: - заполнения элемента фоновым изображением. Значения: repeat –

повторяется, no-repeat - не повторяется, repeat-x - повторяется по оси x, repeat-y - повторяется по оси y.

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

Пример.

Описание шрифта.

font-family: - гарнитура шрифта. Задается списком шрифтов через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек), cursive (курсив), fantasy

(аллегорический), monospace (моноширинный).

font-size: - размер шрифта. Указывается либо в пикселях (px), пунктах (pt), дюймах (in),

82

сантиметрах (cm), миллиметрах (mm), пиках (pc) или процентах (%) от текущего размера, либо специальным словом xx-small,x-small, small, medium, large, x- large, xx-large, larger, smaller.

font-style: вид шрифта: normal (обычный), italic (курсив), oblique (наклонный).

fontweight: насыщенность шрифта, задается числом от 100 до 900 (кратное 100) или специальным словом: normal, bold, bolder, lighter.

font-variant:small-caps - вывод капителью (есть не во всяком шрифте).

Пример.

text-indent: - отступ первой строки текста в блоке. Задается либо размер, либо проценты

относительно ширины блока.

text-align: - выравнивание текста по ширине задается как left, right, center, justify text-decoration: - задает различные виды декорирование текста: none (нет), underline

(подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), blink (мерцающий).

letter-spacing: - размер межсимвольного расстояния. word-spacing: - размер расстояние между словами.

text-transform: - преобразования текста задаются специальными словами: none(нет),

capitalize (первая буква каждого слова заглавная), uppercase (все буквы заглавные), lowercase (все буквы строчные).

line-height: - межстрочный интервал. Задается либо размер, либо % от текущего, либо normal. white-space: - способы обработки символов пустого пространства внутри блока normal (по

умолчанию), nowrap (не разрывать строку).

Пример.

Html-код файла css.css:

.pr6 { background-color:#87CEFA;

width:250px; height:200px; border-top-style:dotted; border-right-style:double; border-bottom- style:solid;

border-left-style:dashed; border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px; border-top-color:#ff0000; border-right-color:00ff00; border-bottom-color:0000ff; border-left-color:#57a292 }

.pr7 { background-color:#B0C4DE;

width:75%; height:50%; margin-top:5px; margin-left:10px; padding-right:10px; padding-left:10px; padding-top:10px; border-top-style:groove; border-right-style:ridge;

border-bottom-style:inset; border-left-style:outset; border-top-width:thin; border-right-width:medium;

84

border-bottom-width:thick medium; border-left-width:7px; border-top-color:#aaaa00; border-right-color:#aa00aa; border-bottom-color:#00aaaa; border-left-color:#2a2975 }

<div class=pr6>Длинный текстовый блок,

состоящий из нескольких строк размером 250 на 200 пиксель.

<div class=pr7>Текстовый блок, вложенный в первый</div>

</div>

float: - определяет плавающий блок текста, принимает значения left (блок прижат к левой границе охватывающего блок элемента), rigth (блок прижат к правой границе охватывающего блок элемента), both (текст может обтекать блок с обеих сторон).

clear: - запрещает наличие плавающих блоков около блока текста, может принимать значения: right, left, none, both.

Примеры.

Html-код файла css.css:

.pr8 {background-color:#87CEFA; width:100px; height:50px; border-top-style:dotted; border-right- style:dotted; border-bottom-style:dotted; border-left-style:dotted; float:left}

.pr9 {background-color:#FACE87; width:100px; height:50px; border-top-style:dashed; border-right-style:dashed; border-bottom-style:dashed; border-left-style:dashed; float:right}

.pr10 {background-color:#B0C4DE; width:250px; height:100px; border-top-style:groove; border-right-style:groove; border-bottom-style:ridge; border-left-style:ridge; }

<div class=pr8>Текстовый блок,

обтекание left</div>

<div class=pr9>Текстовый блок, обтекание right</div>

<div class=pr10>Длинный текстовый блок, состоящий из нескольких строк размером 250

на 200 пиксель.</div>

Если в класс .pr10 добавить свойство clear:left, то при просмотре того же html-кода обтекания будут иметь следующий вид:

85

Свойства позиционирования.

position: задает алгоритм позиционирования. Может принимать значения: static -

обычный блок, заданные свойства top и left игнорируются, relative - свойства top и left смещают блок относительно его нормального положения в общем потоке

данных; absolute - блок изымается из потока данных и позиционируется в соответствии со свойствами top, left, right или bottom относительно ближайшего по вложенности вмещаю щего его позиционированного контейнера; fixed - блок позиционируется как и в случае значения absolute, а потом фиксируется относительно некоторого объекта.

top: - вертикальное смещение блока относительно верха контейнера (значение или

процент относительно высоты контейнера).

right: - горизонтальное сме щение блока относительно правой границы контейнера

(значение или процент относительно ширины контейнера).

bottom: - вертикальное смещение блока относительно низа контейнера (значение или

процент относительно высоты контейнера).

left: - горизонтальное смещение блока относительно левой границы контейнера (значение или процент относительно ширины контейнера).

z-index: - позиционный уровень блока; блок с большим свойством z-index располагается над блоком с меньшим свойством z-index, auto - свойство z-index присваивается в порядке описания элементов в исходном коде.

Пример.

Свойства отображения.

overflow: - определяет тип усечения содержимого блока с заданной шириной и высотой.

Возможные значения visible (все равно видно), hidden (усечено по размерам), scroll (усечено, но есть возможность прокрутки).

Пример:

clip: - определяет какая часть элемента видна. Работает если указано позиционирование.

Возможные значения: auto (показывать все), rect(<top> <right> <bottom> <left>) –

описание координат видимой прямоугольной области.

visibility: – определяет видимость блока. Возможные значения: visible (видимый блок), hidden (блок не отображается, но остается пустое место, которое бы он занял).

Свойства списков.

list-style-type: - тип списка. Возможные значения: square - в виде маркера используем квадрат, disk – диск, circle – круг, lower-roman – строчные римские буквы, upper-roman – заглавные римские буквы, lower-alpha – строчные латинские буквы, upper-alpha – заглавные латинские буквы.

list-style-image:url(адрес изображения) – вместо маркеров будет изображение.

Фильтры (только для Internet Explorer)

Фильтры могут применяться для текстовых блоков и для графических изображений. Синтаксис записи фильтра - filter:название

фильтра(атрибут=значение,атрибут=значение,… ).

alpha(opacity=…, finishOpacity=…,style=…) – прозрачность, где opacity и finishOpacity

степень прозрачности в начале и конце градиента, style – тип градиента: 0 –

равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный. chroma(color=…) - абсолютная прозрачность для одного заданного цвета.

dropshadow(color=…, offx=…,offy=…, positive=…) - эффект тени, где color – цвет тени или маски, offx и offy – численное значение смещения тени по горизонтали и вертикали, positive – применение атрибута color: 0-как цвет маски, 1-как цвет тени.

flipv - зеркальное отображение по вертикали. fliph - зеркальное отображение по горизонтали.

glow(color=…, strength=…) – ореол, где color – цвет, strength – интенсивность (от1 до 100). gray - преобразование цветов объекта в оттенки серого.

invert - инверсия цветов объекта.

87

mask(color=…) - выделяет фон текстового объекта указанным цветом, цвет шрифта становится белым.

shadow(color=…, direction=…) - тень, где color – цвет, direction - угол поворота (от 0 до 360). wave(add=…, freq=…, phase=…, lightstrength=…, strength=…) - волнообразное искажение,

где атрибут add – 1 или 0, а остальные определяют частоту волны, фазу волны,

освещенность, интенсивность волны и задаются числом. xray - негативное изображение.

Пример.