Визуальное форматирование

display

Определяет вид создаваемого элемента. Эти разные виды по-разному взаимодействуют друг с другом зависимости от расположения на странице.

Может иметь значение:

   inline - встроенный элемент (по умолчанию).
   block - блочный элемент,
   list-item - встроенный элемент пункта списка.
   marker - общее содержимое, которое появляется перед элементом или после него.
Используется только с псевдо-элементами :
before (перед)
safter (после),
   none - отсутствие элемента. Элемент в общей схеме не работает.
   run-in - элемент типа блочного, свойства которого зависят от его местоположения.
   compact - элемент типа встроенного, свойства которого зависят от его местоположения,
   table (таблица),
inline-table (оперативная таблица),
table-row-group (группа строк таблицы),
table-column (столбец таблицы),
table-column-group (группа столбцов таблицы),
table-header-group (группа верхних заголовков таблицы),
table-footer-group (группа нижних заголовков таблицы),
table-row (строка таблицы),
table-cell (ячейка таблицы),
table-caption (подпись таблицы) - элемент таблицы, соответствующий имени свойства.

p {display: block}
widtht

Определяет ширину элемента.

Может иметь значение:

auto - ширина элемента выбирается броузером (по умолчанию).
длина - любое число соответствующая стандарту , представляющее ширину элемента.
процентное значение -любое соответствующее стандарту в процентном соотношении ширины элемента к ширине окна,

p {width: 260px}

Примеры: [1]

min-width, max-width

Определяет соответственно минимальную или максимальную ширину элемента.

Может иметь значение:

длина - любая соответствующая стандарту число, представляющее минимальную или максимальную ширину элемента.
процентное значение -любое соответствующее стандарту отношение в процентах минимальной или максимальной ширины элемента к ширине окна.
none - ширина не ограничивается; такое значение применяется только к свойству max-width.

p {min-width: 100pх; max-width: 400px}
height

Определяет высоту элемента.

Может иметь значение:

auto - высота элемента выбирается броузером (по умолчанию).
длина - число,любое соответствующая стандарту представляющее высоту элемента.
процентное значение - любое соответствующее стандарту отношение в процентах высоты элемента к высоте окна.

p {height: 260px}

Примеры: [1]

min-height, max-height

Определяет соответственно минимальную или максимальную высоту элемента.

Может иметь значение:

длина - число,любое соответствующая стандарту представляющее минимальную или максимальную высоту элемента.
процентное значение -любое соответствующее стандарту отношение в процентах минимальной или максимальной высоты элемента к высоте окна,
попе - высота не ограничивается; такое значение применяется только к свойству max-height.

p{min-height: 100pх; max-height: 400px}
line-height

Определяет интерлиньяж для текстового элемента. Интерлиньяж - это расстояние между базовыми линиями двух соседних строк.

Может иметь значение:

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

p {line-height: 2.2}

Примеры: [1]

vertical-align

Определяет выравнивание текста по вертикали внутри элемента.

Может иметь значение:

baseline - выравнивание базовой линии элемента по базовой линии его родительского элемента (по умолчанию).
middle - выравнивание средней линии элемента по базовой линии его родительского элемента
top - выравнивание верхней части элемента по верхнему краю его текста.
bottom - выравнивание нижней части элемента по базовой линии его родительского элемента.
sub - выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента.
super - выравнивание элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента.
text-top - выравнивание верхней части элемента по верхней части текста родительского элемента.
text-bottom - выравнивание нижней части элемента по нижней части текста родительского элемента.
длина - число,любое соответствующая стандарту показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.
процентное значение -любое соответствующее стандарту отношение в процентах, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.

p{vertical-align: super}

Примеры: [1]

float

Определяет обтекание элемента слева или справа.

Может иметь значение:

none - элемент не обтекается (по умолчанию).
left - элемент передвинут влево, а остальные элементы обтекают его справа.
right - элемент передвинут вправо, а остальные элементы обтекают его слева.

img {float: right}

Примеры: [1]

clear

Определяет, как данный элемент обтекается по сторонам другими элементами.

Может иметь значение:

none - обтекание доступно со всех сторон (по умолчанию).
left - элементов не должно быть слева от данного элемента.
right - элементов не должно быть справа от данного элемента.
both - элементов не должно быть справа и слева от данного элемента.

img {clear: both}
overflow

Определяет, как отображать элемент, когда он перекрывает другой элемент.

Может иметь значение:

visible - перекрываемый элемент виден полностью, и из него ничего не вырезано (по умолчанию).
hidden - перекрываемая часть вырезается.
scroll - перекрываемая часть вырезается, и становятся видимыми любые полосы прокрутки.
auto - браузером определяется, надо ли вырезать перекрываемые области

img {overflow: visible}

Примеры: [1][2]

visibility

Определяет, является ли элемент видимым.

Может иметь значение:

visible - элемент видимый.
hidden - элемент не видимый, но он все равно влияет на общую структуру страницы.
collapse-если не применяется к таблицам, то получается тот же эффект, что и для hidden.

img {visibility: visible}
clip

Определяет для перекрываемых частей вырезаемые области.

Может иметь значение:

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

img {clip: rect(5px, 4рх, 2рх, 4рх)}

Примеры: [1]

direction

Определяет направление текста в текстовых блоках.

Может иметь значение:

Itr - слева направо (по умолчанию).
rtl - справа налево.

body {direction: Itr; unicode-bidi: embed}

Примеры: [1]

unicode-bidi

Позволяет менять направление текста.

Может иметь значение:

normal - менять направление письма не разрешено (по умолчанию).
embed - можно устанавливать направление письма с помощью свойства direction.
bidi-override - можно устанавливать направление письма с помощью свойства direction.Применяется к дополнительным текстовым блокам

body {unicode-bidi: embed}
cursor

Определяет, как выглядит указатель мыши при прохождении по элементу.

Может иметь значение:

auto - внешний вид определяется браузером (по умолчанию).
crosshair - принимает форму указателя "графическое выделение".
default - внешний вид, как у указателя, установленного в системе пользователя по умолчанию.
pointer - принимает форму указателя "выбор ссылки".
move - принимает форму указателя "перемещение".
e-resize,
ne-resize,
nw-resize,
n-resize,
se-resize,
sw-resize,
s-resize,
w-resize - принимает формы указателей изменения размеров.
text - принимает форму указателя выделения текста.
wait - принимает форму указателя "система недоступна".
help - принимает форму указателя "выбор справки".
любой соответствующий стандарту URL - URL файла указателя мыши.

Свойство cursor в CSS3

cору - указывает на то, что что-то будет скопировано. Может изображаться как стрелка с небольшим знаком плюса рядом с ней.
alias - представляет альтернативу или ярлык на что-либо. Часто изображается как стрелка с небольшой изогнутой стрелкой сразу, за ней.
context menu - этот курсор указывает на наличие контекстного меню, обычно открываемого щелчком на объекте правой кнопкой мыши. Чаете изображается в виде стрелки с небольшой картинкой меню сразу за ней.
cell - указывает на то, что может быть выбрана ячейка или группа ячеек. Курсор должен выглядеть как жирный знак плюс.
grab - указывает на то, что объект может быть ухвачен. Курсор должен выглядеть как разжатая кисть.
grabbing - указывает на то, что объект был схвачен. Курсор должен выглядеть как сжатая в кулак кисть.
spinning - свидетельствует о том, что программа выполняет задачу. Похоже на свойство wait, но пользователь может продолжать взаимодействовать с программой. Возможны различные изображения курсора, включая вращающийся мячик.
count up - указывает на то, что программа осуществляет отсчет в прямом направлении. Курсор должен быть изображен в виде отсчитывающих пальцев.
count down - указывает на то, что программа осуществляет отсчет в обратном направлении. Подобно отсчету в прямом направлении, курсор должен быть изображен в виде отсчитывающих пальцев.
count up-down - указывает на то, что программа осуществляет отсчет сначала в прямом, а затем в обратном направлении.

img {cursor: pointer}

Примеры: [1]