Уроки HTML, уроки CSS
CSS справочник Списки, обтекание...

Списки

list-style

– определяет свойства маркера или номера позиции списка:

list-style: list-style-image | list-style-position | list-style-type

list-style-image

– вместо маркера элемента списка отображается рисунок:

list-style-image: url(xxx.jpg)

list-style-position

– определяет позицию маркера:

list-style-position: outside | inside   →   значение outside (по умолчанию) отображает маркер элемента списка на некотором расстоянии от строки; inside – отображает маркер элемента списка в качестве первого символа строки.

list-style-type

– определяет тип маркера или номер позиции списка:

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type: disc   →   отображает закрашенный кружок (значение по умолчанию);

list-style-type: circle   →   окружность;

list-style-type: square   →   закрашенный квадрат;

list-style-type: decimal   →   маркерами являются арабские цифры;

list-style-type: lower-roman   →   маленькие римские цифры;

list-style-type: upper-roman   →   большие римские цифры;

list-style-type: lower-alpha   →   маленькие латинские буквы;

list-style-type: upper-alpha   →   большие латинские буквы;

list-style-type: none   →   маркер отсутствует.

Способы отображения элементов

display

– определяет способ отображения элементов страницы:

display: inline | block | none | inline-block | list-item;

display: inline   →   значение по умолчанию;

display: block   →   наделяет элементы свойствами блока;

display: none   →   элемент не отображается;

display: inline-block   →   аналогично block;

display: list-item   →   аналогично block, но при этом элемент страницы считается позицией списка.

visibility

– определяет видимость или невидимость элемента:

visibility: inherit | visible | hidden;

visibility: inherit   →   наследует видимость родительского элемента;

visibility: visible   →   делает элемент страницы видимым (значение по умолчанию);

visibility: hidden   →   невидимым.

overflow

– определяет будет ли элемент страницы иметь полосу прокрутки:

overflow: visible | scroll | hidden | auto;

overflow: visible   →   границы элемента расширяются по его содержимому (значение по умолчанию);

overflow: scroll   →   если содержимое элемента не вмещается в его границы – добавляются полосы прокрутки;

overflow: hidden   →   обрезает содержимое элемента по установленным размерам;

overflow: auto   →   полосы прокрутки отображаются если в этом есть необходимость.

overflow-x

– все как при overflow, но только по горизонтали:

overflow-x: visible | scroll | hidden | auto

overflow-y

– все как при overflow, но только по вертикали:

overflow-y: visible | scroll | hidden | auto

Обтекание

float

– задает обтекание (упорядочевание) элементов:

float: none | left | right;

float: none   →   обтекания нет (по умолчанию);

float: left   →   элементы с такими параметрами выстраиваются друг за другом слева направо;

float: right   →   обтекание справа налево.

clear

– отменяет обтекание:

clear: left | right | both;

clear: left   →   запрещает левостороннее обтекание;

clear: right   →   запрещает правосторонее обтекание;

clear: both   →   запрещает обтекание с обеих сторон.

Дата публикации: Октябрь 2009 | Обновление: Декабрь 2009

position, margin, padding ...   Списки, обтекание ...