Свойства цвета и фона
Свойство color определяет цвет любого элемента CSS.
Пример:
SMALL {color: red:}
Свойство background-color указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных браузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы.
Пример:
H1 { background-color: #f00000;}
Свойство background-image устанавливает фоновое изображение всего документа или ячейки таблицы. С ним можно использовать параметр, указывающий на то, что данная страница не содержит фоновых изображений.
Пример:
BODY {background-image: URL(/images/picture.gif):}
Свойство background-repeat определяет параметры повторения (копирования)фонового изображения в разных направлениях видимой части html-документа. Может принимать одно их следующих значений:
· no-repeat — не повторять изображение;
· repeat — повторять изображение во всех направлениях;
· repeat-x —только по горизонтали;
· repeat-y — только по вертикали.
Пример:
BODY {background-repeat: no-repeat:}
Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует изображение на экране.
Пример:
BODY { background-attachment: scroll:}
Свойство background-position, в случае если значение свойства background-repeatустановлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения. Оно может принимать следующие значения:
· top — позиционирование по верхней границе экрана,
· middle — по центру экрана,
· bottom — по нижней границе,
· left — выравнивание по левой границе экрана или ячейки таблицы,
· right — выравнивание по правой границе,
· center — выравнивание по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.
Пример использования:
BODY {background-position: 30cm 0cm;}
TD {background-position: middle:}
Свойства границ
Свойства margin-left, margin-right, margin-top и margin-bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно слева, справа, сверху и снизу. Отступ представляет собой пустое пространство, не заполненное никакими другими элементами. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов, для которых вы хотите указать описанные здесь значения.
Пример:
Р {margin-left: 20px;}
IMG{
margin-top: 10mm:
margin-left: 15mm;
margin-bottom: 10mm:
}
Свойства padding-left, padding-right, padding-top и padding-bottom, аналогично рассмотренным выше, описывают значения отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах или миллиметрах. Они могут применяться как вместе, так и по отдельности.
Пример:
TABLE {
padding-left: 10рх:
padding-right:10px;
padding-top: 15px:
padding-bottom: 15px:
}
Свойства border-top-width, border-bottom-width, border-right-width и border-left-width определяют толщину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.
Пример:
TD{
border-top-width: 2px:
border-bottom-width: 2px:
border-right-width: 1mm:
border-left-width: 1mm;
}
Свойство border-color описывает цвет видимого обрамления объектов — рамок изображений и бордюров таблиц.
Пример:
TABLE (border-color: blue;}
Свойства списков
Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом <LI>.В языке CSS данному элементу присваиваются следующие свойства. Свойство list-style-type определяет внешний вид маркера нумерованного или маркированного списка и может принимать одно из перечисленных далее значений:
· none — маркер списка не отображается; для маркированного списка
· disc — метка отображается в виде черного круга,
· circle — в виде полой окружности,
· square — в виде черного квадрата; для нумерованного списка
· decimal —метки отображаются в виде последовательности арабских чисел,
· lower-roman —в виде последовательности римских цифр, записанных в строчном регистре,
· upper-roman — в виде последовательности римских цифр в заглавном регистре,
· lower-alpha — в виде последовательности строчных букв, upper-alpha — в виде последовательности заглавных букв.
Пример:
LI {list-style-type: square:}
Свойство list-style-image позволяет назначить в качестве метки маркированного списка произвольное изображение.
Пример:
LI {list-style-image: URL(/images/marker.gif);}
Свойство list-style-position описывает позиционирование элементов списка и может принимать следующие значения:
outside — позиционирование осуществляется по умолчанию и
inside — позиционирование без отступа от левой границы рабочего окна браузера. Пример:
LI { list-style-position: inside:}
Дата добавления: 2020-04-12; просмотров: 238;