2.4 Свойства блоков с обрамлением
Особое значение и удобство стили приобретают при работе с блочными элементами. Для блочного элемента вводят следующие понятия.
Содержимое (контент), чаще всего текст, располагается в самом внутреннем блоке и отделяется от границ блока отступами (padding). Далее следует граница (border), которая имеет свои размеры. Наконец, за границей располагается поле (margin), которое является самым внешним элементом блока. Поле прозрачное, поэтому сквозь него просвечивает фон родительского элемента, на котором расположен данный блок. Вместе эти части образуют блок форматирования. Все блочные элементы HTML располагаются в блоках форматирования.
Средства CSS позволяют гибко управлять размерами, расположением и цветом блочных элементов.
В примере 2.5 приведена WEB-страница с размеры границ обрамления и заполненной области равными четверти дюйма. При отображении указанных компонентов выводится разный фон. Внешний вид страницы показан на рис. 2.5.
|
Пример 2.5. WEB-страница с блоком, содержащим обрамление |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HЕАD> <TITLE>Bounding Box</TITLE> <STYLE>H1 { TEXT-ALIGN: center } P { MARGIN: 0.25in; BORDER: 0.25in solid black; РАDDING: 0.25in; BАCKGROUND: url(imаges/bond-paper.jpg) } BODY { BACKGROUND: url(images/bricks.jpg) } </STYLE> </HEAD> <BODY> <H1>CSS1 Bounding Box</H1> <P>The <В>margin</B> is where the bricks show through. The <B>border</B> is the solid black line. The <B>padding</В> is the space around the text in the bond-paper background. </BОDY> </HTML>
|
2.5 Свойства списков
При отображении списков CSS позволяет управлять формой и изображением маркера для элементов списка.
Например, свойство list-style-type позволяет задавать маркер в виде квадрата, круга или окружности (пример 2.6). Внешний вид списка с разными вариантами маркера показан на рис.2.6.
|
Пример 2.6. WEB-страница с различными маркерами списка |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Список</TITLE> </HEAD> <BODY> <UL STYLE="list-style-typе:square"> <LI>В виде маркера используем квадрат </UL> <UL STYLE="list-style-tyре:disk"> <LI>В виде маркера используем круг </UL> <UL SТYLE="list-style-tyрe:circle"> <LI>В виде маркера используем окружность </UL> </BОDY> </HTML>
|
