Введение в CSS

20ex 3px

15cm 15cm

 

Выбирайте любой вариант по

вкусу.

 

body {background-image:

url("img/sexy/girl/foto.png");

background-position: 5ex 10em }

 

Background

 

Ну и под конец,

"всеобъемлющее" свойство

background. В нем можно 

указать все вышеприведенное,

только соблюдая правильный

порядок:

 

background: background-color

| background-image |

background-repeat |

background-attachment |

background-position

 

Например, фон для страницы

может выглядеть так:

 

body { background: black

url("tile.gif") repeat }

 

...или так

 

body { background: #A0A0A0

url("stones.png") repeat-x top right

}

 

...или даже так:

 

body { background: white}

 

 

Предыдущий Шаг | Следующий 

Шаг | Оглавление

Автор Аванесов Самвел.

Шаг 6 - Обрамление и

размерности

 

В официальном руководстве CSS

набор этих свойств называется

Box Attributes. Box, потому что 

свойства эти изменяют

отображение не текста,

содержащегося в тэге элемента,

а самого этого элемента как 

графической области

(прямоугольника с плавающими 

размерами). Какие же свойства

может иметь прямоугольник?

Правильно, размеры, рамку,

отступ и тому подобное.

Обратите внимание, что под 

отступом понимается в данном

случае расстояние всей строки

(абзаца) от базового края, а не

первой его линии, как это  было

со свойством text-indent.

 

Перед тем как приступить к 

собственно атрибутам, полезно 

будет рассмотреть единицы,

которыми можно задавать длины 

в таблицах стилей.

 

em- высота шрифта элемента

ex- высота буквы 'x' элемента

px- обычные пиксели

in- дюймы

cm- сантиметры

mm- миллиметры

pt- point, 1/72 дюйма

pc- пика, 12 point

 

Рекомендую ограничиться

первыми тремя типами

размерностей. Остальные сильно

зависят от установленного на

мониторе логического

разрешения (пикселей/дюйм), и,

как следствие, не обеспечивают

одинакового отображения 

страницы на разных медиа-

устройствах.

 

Помимо абсолютных,

используются также 

относительные меры длин

(проценты).

 

input { border-width: 8px } table

{width: 100% }

 

Width, Height

 

Значения высоты и ширины,

применимые к блочным 

элементам и элементам ввода. В 

дальнейшем, при рассмотрении

некоторых свойств CSS2 и 

соответствующих возможностей

JavaScript, мы увидим, что размер 

и положение можно будет 

менять не только для блочных

(элементов с определяемой 

шириной и высотой), но и для 

таких тэгов, как <div>,

например. Задаются в элементах 

длины. table { width:80%;

height:100% }

 

Полезно таким образом 

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

верхнего уровня. Для того,

чтобы таблицу эту выровнять  по

центру (в случае width<100%),

следует воспользоваться 

внешним тэгом <center> или 

любым другим, имеющим 

свойство text-align: center

 

Float, Clear

 

Опреляет такой интересный

аспект HTML и CSS, как 

"плавание" изображений и

других элементов в тексте, и 

соответственно "обтекание"

текстом этих элементов. Первой

отвечает за плавание и может 

принимать значения left, right,

none- соотвественно, разрешение 

плавать слева, справа, или 

отключение этой возможности.

Второй - Clear - определяет,

разрешено ли обтекание данным

элементом других плавающих 

слева, справа, с обеих сторон

или запрещено - left, right, both,

none.

 

Margin-Top, Margin-Left,

Margin-Bottom, Margin-Right,

Margin

 

Атрибуты, определяющие

соответствующие отступы для

элемента. Атрибут Margin

устанавливает отступ со всех

сторон.

 

td.menu { margin: 3px; margin-

bottom: 0 }

 

Padding-Top, Padding-Left,

Padding-Bottom, Padding-

Right, Padding

 

Внутренний отступ элемента,

для соответствующей стороны.

Крайне полезное свойство, если

Вы не сторонник слипшихся 

таблиц и изображений.

 

table { padding: 5px }

 

Border-Top-Width, Border-Left-

Width, Border-Bottom-Width,

Border-Right-Width, Border-

Width

 

У элемента может быть рамка,

существующая, вообще говоря,

на границе между margin и 

padding. Рамка, заданная одним 

из нижеописанных способов -

простой и достаточно

эффектный (если применять со

вкусом) метод выделения 

определенных участков

документа.

 

h1.title {border-width: 1px; border-

top-width: 0 }

 

Border-Color, Border-Style,

Border

 

Ну, первое свойство, как это ни

парадоксально, определяет цвет

рамки. Здесь никаких особых

причуд не наблюдается, цвет

задается как обычно в CSS.

Border-Style дает возможность 

изменить вид бордюра. А бывает

он (вид) таким:

 

none

dotted

dashed

solid

double

groove

ridge

inset

outset

 

Значений много, все они 

довольно разные и симпатичные.

Некоторые из них при ширине

обрамления меньше двух будут 

выглядеть сплошной линией,

поэтому ширину следует 

выбирать соответствующую.

 

Свойство Border позволяет 

задать все эти атрибуты разом  в 

одном флаконе. Синтаксис таков:

 

border: border-width | border-

style | color

 

Например:

 

h2 { border: 1px solid silver }

 

 

Предыдущий  Шаг | Оглавление

Автор Аванесов Самвел.