Модели областей. CSS-свойства

Рассматриваемые темы

Строчные и блочные области элементов
Свойство display — тип отображения
Не замещаемые

Модели представления.

block
list-item
table
inline
inline-block
inline-table
none
run-in

%block

%inline

%flow

http://www.w3.org/TR/CSS2/sample.html

Группы Inline и Block в DTD

Inline: символьные данные, a, abbr, acronym, b,

Свойство display — тип отображения

Строчный тип (inline-level): inline (начальное значение)
Блочные типы

Модели содержания элементов в DTD

Модель содержания (content model) — правила о допустимых

Области на веб-странице

Модель областей CSS

область (box)
background = content + padding + border

border —

Контейнер

Контейнер (containing block) области — прямоугольник, в котором обитает данная область
Многие параметры

Отступы блочных областей

padding — внутренний отступ
em (1em = кегль шрифта текущей

Условные комментарии в IE

Например

Описание работы:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

Рамки блочных областей

border: толщина стиль цвет;
порядок значений не важен
значения можно пропускать
толщина:
em

Закругления рамок блочных областей

border-radius: <радиус>{1,4} [ / <радиус>{1,4}];
Например: border-radius: 10px 20px

Префиксы

-moz-border-radius: 10px 20px 30px 50px;
-webkit-border-radius: 10px 20px 30px 50px;

Свойство overflow — переполнение

Применение:
Не замещаемые блочные элементы (display — block, list-item, table)
ячейки

Ширина и отступы блочных областей

формула для применяемых значений (used values):

Значение auto для width и margin

-color: шестнадцатеричное число, функционал
-image: функционал url с именем файла
-position:
-attachement: закрепление

Мультифон и градиент

http://dev.w3.org/csswg/css3-images/
Подбор градиента http://www.colorzilla.com/gradient-editor/
Руководство разработчиков IE10 http://msdn.microsoft.com/ru-ru/ie/hh272902.aspx
background-image: url(sheep.png), url(betweengrassandsky.png);