Элементы CSS, описание свойств. Продолжение.

Продолжаем разбирать элементы CSS и их свойства. В предыдущей статье мы разобрали следующие элементы CSS:
— свойства шрифта
— свойства текста
— свойства цвета и фона
Итак приступаем к продолжению.

Свойства границ

Свойства margin-left, margin-right, margin-top, margin-bottom

Определяют величину отступа вокруг содержащего их элемента. Значения указываются в пикселях, сантиметрах или миллиметрах. Отступ представляет собой пустое пространство, не заполненное никакими элементами вокруг изображений, абзацев, таблиц или других компонентов веб-страницы. Могут применяться и вместе и по отдельности.
Пример:

P {margin-left: 20px; }

IMG {
margin-top: 10mm;
margin-left: 15mm;
margin-top: 20mm;
margin-bottom: 20mm;
}

Свойства padding-left, padding-right, padding-top, padding-bottom

Аналогично предыдущему свойству указывает значения отступов от видимых рамок объектов HTML, таблиц, изображений. Тоже могут применяться как вместе, так и по отдельности.
Пример:

TABLE {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px
}

Свойства border-top-width, border-bottom-width, border-left-width, border-right-width

Определяют толщину обрамления объектов HTML. Правила аналогичны вышеописанным свойствам.
Пример:

TD {
border-top-width: 1mm;
border-bottom-width: 1mm;
border-left-width: 2px;
border-right-width: 2px;
}

Свойства списков

Эти параметры определяют отображение элементов нумерованных и маркированных списков. Списки в HTML обозначаются тегом <LI>.

Свойство list-style-type

Определяет внешний вид маркера списка.
Параметры для маркированного списка:
— none,  маркер списка не отображается
— disk, маркер в виде черного круга
— circle, маркер в виде полой окружности
— square, маркер в виде черного квадрата
Параметры для нумерованного списка:
— decimal, отображается в виде последовательности арабских чисел
— lower-roman, в виде последовательности римских цифр в строчном регистре
— upper-roman, в виде последовательности римских цифр в заглавном регистре
— lower-alpha, в виде последовательности строчных букв
— opper-alpha, в виде последовательности заглавных букв
Пример:

LI { list-style-type: disk; }

Свойство list-style-image

Устанавливает в качестве метки маркированного списка произвольное изображение.
Пример

LI{ list-style-image: URL(/images/marker1.gif); }

Свойство list-style-position

Описывает позиционирование элементов списка.
— outside, позиционирование по умолчанию
— inside, позиционирование без отступа от левой границы
Пример:

LI { list-style-position: inside; }

Вспомогательные свойства элементов CSS

Свойство width и height

Определяет ширину и высоту объекта в пикселях, сантиметрах, миллиметрах или процентах от значения, принятого по умолчанию. Преимущественно применяются при размещении графики.
Пример:

IMG {
height: 100px;
width: 200px;
}

Свойство float

Указывает положение объекта относительно других объектов, размещенных рядом.
— none, расположение объекта по умолчанию
— left, расположение объекта слева
— right, расположение объекта справа
Пример:

TD { float:none; }

Свойство clear

Устанавливает правила расположения других объектов вокруг данного
— none, расположение по умолчанию
— left, расположение слева
— right, расположение справа
— both, расположение с двух сторон
Пример:

IMG { clear:both; }

Свойство white-space

Применяется для управления отображения пробелов и переносов..
— normal, стандартное отображение текста, при котором несколько подряд пробелов преобразуются в один
— pre, допускается отображение нескольких пробелов подряд
— nowrap, запрещен перенос строки в пределах действия элемента
Пример:

P {white-space: pre; }

Свойство display

Устанавливает правила расположения текста на экране.
— block, отображает перенос строки до и после объекта
— list-item, перносит строку до и после объекта и добавляет маркер в начало строки
— inline, допускает отображение объекта на одной строке с другими элементами
— none, объект не отображается
Пример:

IMG { display: block; }

На этом описание свойcтв элементов CSS можно считать законченными. Осталось описать классы (селекторы классов) и идентификаторы ( селекторы идентификаторов). Думаю, что напрягусь и дам несколько примеров по подключению CSS к HTML страницам.

12 комментариев на “Элементы CSS, описание свойств. Продолжение.”