Техника Web-дизайна для студента
Свойства блоков
Блок это прямоугольный фрагмент страницы, который может иметь определенные размеры, отступы между содержимым блока и его границами, поля, рамку и фоновую заливку. Содержимым блока могут быть любые элементы, размещаемые на странице. Блок может быть снабжен собственными полосами прокрутки. Свойства блоков приведены в табл. 7.6.
|
Таблица 7.6. Свойства блоков
|
Padding-top, padding-right, padding - bottom, padding-left
Padding
Border-top-style,
Border-right-style,
Border-bottom-style,
Border-left-style
Размеры отступов содержимого блока от его краев: верхнего, правого, нижнего, левого
Размеры отступов содержимого блока от его краев - сокращенная форма записи
Стиль рамки вокруг блока - сверху, справа, снизу, слева
В случае равенства всех полей задается только одно значение:
Margin: 10 рх
В случае попарного равенства противоположных полей (верхнего и нижнего, правого и левого) задаются только два значения:
Margin: 5 рх 10 рх
Абсолютное или относительное значение
Абсолютное или относительное значение. Формат записи аналогичен свойству margin
Возможны следующие значения:
Попе - нет рамки (по умолчанию),
Dotted - пунктирная;
Dashed - прерывистая;
Solid - непрерывная;
Double - двойная;
Groove - углубленная;
Ridge - выпуклая;
8 border-style
Border-top-width,
Border-right-width,
Border-bottom-width,
Border-left-width
10 border-width
11 border-top-color, border-right-color, border-bottom-color, border-left-color
12 border-color
13 border-top, border - right, border-bottom, border-left
Стиль рамки вокруг блока - сокращенная форма записи
Толщина рамки вокруг блока: сверху, справа, снизу, слева
Толщина рамки вокруг блока - сокращенная форма записи
Цвет рамки вокруг блока: сверху, справа, снизу, слева.
Цвет рамки вокруг блока - сокращенная форма записи
Свойства каждой из сторон рамки в отдельности - сокращенная форма записи
Insert - эффект углубления блока;
Outset - эффект выпуклости блока;
Формат записи аналогичен свойству margin
Абсолютные значения, а также ключевые слова:
Thin - тонкая рамка;
Medium - средняя;
Thick - толстая
Формат записи аналогичен свойству margin
Цвет можно задавать как шестнадцатеричным кодом, например:
#00FF00 или #0F0,
Так и используя названия цветов, например: green
Формат записи аналогичен свойству margin
Позволяет задать для каждой из сторон сразу три свойства рамки в любой последовательности. Например:
Border-top: red dotted 10 рх
№ Обозначение Изменяемое Примечания
П/п свойство
|
14 border Свойства всех Сторон рамки при условии их равенства 15 overflow Действия при Переполнении Блока |
Позволяет задать три свойства рамки, одинаковые для всех сторон:
Border: blue solid 5 рх
Возможны следующие значения:
Visible - содержимое блока, не поместившееся внутри, остается видимым (по умолчанию);
Hidden - содержимое блока, оказавшееся за его пределами, будет скрыто;
Scroll - независимо от объема содержимого блок снабжается полосами прокрутки;
Auto - полосы прокрутки устанавливаются только при переполнении блока
В качестве примера создания блоков рассмотрим следующий документ (листинг 7.9)
Листинг 7,9. Создание блоков с различными параметрами форматирования
<ЬШ1>
<11еас1>
<1;11;1е>Блоки</1;11;1е>
<^у1е type="text/css">
<! —
.stl {background-color: #00FFFF; margin: 20px; padding: 10px; height: 50px; width: lOOpx; border: medium solid #0000FF; letter-spacing: 8px; font-weight: 700}
.st2 {background-color: #CCFFFF; padding: 10px; height: 50px; width: lOOpx; border: solid #00FF00; letter-spacing: 8px; font-weight: 700}
.st3 {background-color: #00FFFF; margin: 10px; padding: 10px; height: 50px; width: lOOpx; border: medium solid #0000FF; letter-spacing: 8px; font-weight: 700}
</style>
</head>
<body leftmargin=0 topmargin=0>
<div class="st2">BjioKl</div>
<div class="st2">BjioK2</div>
<div class="st3">BjioK3</div>
<div class="stl">BjiOK4</div>
</body>
</html>
|
Рис. 7.8. Внешний вид блоков с различными свойствами форматирования в окне браузера |
В документе были использованы три стиля. Стиль stl предусматривает создание поля вокруг блока размером 20 рх, стиль st3 — 10 рх, а стиль st2 не предусматривает создания полей. Стиль st2 применен к блокам 1 и 2, стиль stl — к блоку 4, а стиль st3 — к блоку 3. Внешний вид документа в окне браузера показан на рис. 7.8.
По умолчанию страница имеет поля и для того, чтобы при отсутствии собственных полей блоки примыкали к сторонам браузера, нужно задать нулевые значения этих полей. Это делается с помощью параметров leftmargin и topmargin метки <body>.
