CSS.MANUAL.RU



Введение
Синтаксис CSS
Включение стилей в документ
Значения свойств
Свойства шрифта
Свойства текста
Свойства цвета и фона
Свойства обрамления
Свойства позиционирования
Визуальные свойства
Свойства списков
Свойства полос прокрутки
Тег SPAN
Статьи
Идеология CSS
Как использовать CSS
Меню с помощью CSS
Алфавитный указатель
Ссылки
Обратная связь
Форум





  Модель форматирования

Каждый элемент документа занимает прямоугольную область, которая помещена последовательно еще в три области: подложка (padding), рамка (border), поля (margin). Рисунок снизу иллюстрирует это модель.

Иллюстрация модели форматирования CSS

Свойство полей, подложки и рамки задается следующим образом


{Контейнер[-Сторона][-Свойство]: значение;}

где контейнер это одно из слов margin, padding или border, сторона – это left, right, top или bottom, свойство – это название определяемого свойства. Название сторон можно пропустить, если вы хотите применить стилевое правило ко всем сторонам. Название свойства также можно пропустить, если вы хотите использовать краткое свойств. Пример:


td {border-left: solid 1px blue}
table {border-left: double 3px black}

После селектора Контейнер[-Сторона] вы можете перечислить значение свойств рамки в  произвольном порядке.


  Свойство border-color

Это свойство задает цвет рамки. Оно может принимать от одного до четырех значений. Если установлено только одно значение, то все четыре стороны рамки будут одного цвета. Два значения приводят к тому, что верх и низ рамки окрашиваются в первый цвет, а левая и  правая стороны рамки – в другой. В случае трех значений первое будет цветом верха рамки, второе цветом левой и правой стороны, а третье задаст цвет низа. Четыре значения определяют цвет каждой из сторон рамки в следующем порядке: верха, правой стороны, левой стороны, низа. Также можно явно задавать цвет некоторой стороны рамки, пример:


h1, h2, h3{border-left-color: red; border-right-color: green}


  Свойство border-width

Свойство border-width определяет толщину рамки. Как и свойство border-color может принимать от одного до четырех значений в том же порядке. Для указания толщины могут использоваться стандартные единицы длины или одно из ключевых слов: thin (тонкая), medium (средняя), thik (тонкая). Можно также определить толщину конкретной стороны, пример:


a{border-left: 2px}.


  Свойство border-style

Это свойство используется для украшения рамки и может принимать одно из следующих значений: none, dotted (точечная), dashed (штриховая), double (двойная), solid (сплошная), groove (паз), outset (приподнятая), inset (утопленная), ridge (ребро). Значение none применяется по умолчанию. Популярные броузеры некоректно поддерживают это свойство, так что не увлекайтесь им.


  Свойство margin

Этим свойством можно установить ширину полей. Можно задать ширину всех полей сразу, присвоив свойству margin значение, или каждого поля по отдельности, задав значения свойствам margin-left, margin-right, margin-top, margin-bottom. Это свойство может принимать значение auto, указывающее броузеру, что надо применить стандартное значение ширины полей.


  Свойство padding

Этим свойством можно установить ширину подложки. Можно задать ширину всех подложек (верхней, нижней, правой и левой) сразу, присвоив свойству padding значение, или каждого поля по отдельности, задав значения свойствам padding-left, padding-right, padding-top, padding-bottom. Это свойство может принимать значение auto, указывающее броузеру, что надо применить стандартное значение ширины полей.


  Свойства height и width

Свойства height и width определяют высоту и ширину элемента соответственно. Значением этих свойств может быть длина, процентное значение или ключевое слово auto, которое подразумевает, что элемент обладал изначально какой-то высотой/шириной и отображает его в соответствии с этим значением. Эти два свойства применяются обычно к таблицам и изображениям. Однако его можно применять ко всем элементам CSS. Вкупе со свойством Overflow (см. раздел визуальные свойства) можно достичь интересных эффектов.


  Свойство clear

Это свойство очень похоже на атрибут clear тега <br> (за описанием этого тега загляните в  НTML справочник). Это свойство говорит броузеру, помещать ли содержимое тега рядом с "плавающим" элементом или на первой строке перед ним. Значением свойства clear может быть none, left, right или both. Значение none принято по умолчанию и подразумевает, что броузер размещает содержимое тега рядом с  плавающими элементами по обе стороны, если там есть место. Значение left запрещает располагать содержимое слева от плавающего элемента, right – справа. Both не допускает размещение содержимого тега рядом плавающим элементом вообще.


  Свойство float

Свойство float описывает область отображения тега в качестве плавающего элемента. Это свойство аналогично атрибуту align тегов <img> и <table>, но оно может применяться к любым HTML-элементам.

Свойство float принимает одно из трех значений: left, right, none. Значение none принято по умолчанию, оно выключает свойство float. Значения left и right приказывают броузеру поместить содержимое элемента слева и справа от потока соответственно и позволить другому содержимому обтекать его.






Владимир Климонтович (контакт), Copyright (C) 2003
При поддержке проекта MANUAL.RU