Любой элемент веб-страницы занимает в окне веб-браузера некоторую прямоугольную область. Причем эта область имеет как внутринние, так и внешние отступы. Внутренний отступ — это расстояние между элементом страницы и реальной или воображаемой границей области. Внешний отступ — это расстояние между реальной или воображаемой границей и другим элементом веб-страницы, точнее сказать, между границей и крайней точкой внешнего отступа другого элемента веб-страницы.
Внешние отступы
С помощью атрибутов margin-left, margin-right, margin-top и margin-bottom можно задать отступы одного элемента веб-страницы от другого. Может быть задано абсолютное или относительное значение. Более того, атрибуты могут иметь отрицательные значения. Эти атрибуты означают следующее:
margin-left— отступ слева;-
body { margin-left: 0 } margin-right— отступ справа;-
body { margin-right: 5px } margin-top— отступ сверху;-
body { margin-top: 5% } margin-bottom— отступ снизу;-
body { margin-bottom: 5mm }
При изучении форматирования страниц с помощью таблиц мы убирали отступы с помощью этой строки кода:
<body bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
Теперь, зная СSS, можно переписать эту строку так:
<body style="margin-left:0; margin-right:0; margin-top:0; margin-bottom:0">
или так:
body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0 }
C помощью атрибута margin можно задать все внешние отступы за один раз:
margin: <top> <right> <bottom> <left>
Например:
body { margin: 5mm 5% 10px 0 }
Для совпадающих значений допускается и более короткая запись:
body { margin:0 }
Внутренние отступы
С помощью атрибутов padding-left, padding-right, padding-right, padding-bottom можно задать отступы от элементов веб-страницы до его рамки (если она есть). Например: ими задается расстояние между текстом и рамкой ячейки таблицы. Может быть задано абсолютное или относительное значение:
padding-left— отступ слева;-
td { padding-left: 0 } padding-right— отступ справа;-
td { padding-right: 10 } padding-top—отступ сверху;-
td { padding-top: 10mm } padding-bottom— отступ снизу;-
td { padding-bottom: 20 }
С помощью атрибута padding можно задать все внутринние отступы за один раз:
padding <top> <right> <bottom> <left>
Например:
td { padding: 15mm 20 10 0 }
Совпадающие отступы можно задать короче:
td { padding: 5 }
Рамки
Как мы уже знаем, любой элемент веб-страницы занимает в окне веб-браузера некоторую прямоугольную область. Содержимое этой области может быть окружено рамками. Иными словами, рамки могут иметь не только таблицы, но и любые элементы веб-страницы, например, абзацы.
Стиль линии рамки
С помощью атрибутов border-left-style (левая линия), border-right-style (правая линия), border-top-style (верхняя линия) и border-bottom-style (нижняя линия) можно задать тип линии рамки. Могут принимать следующие значения:
none— линия не отображается;solid— линия отображается сплошной линией;dotted— пунктирная линия;dashed— штриховая линия;double— линия отображается в виде двойной линии;groove— вдавленная рельефная линия;ridge— выпуклая рельефная линия;inset— весь блок элемента отображается, как будто он вдавлен в лист;outset— весь блок элемента отображается, как будто выдавлен из листа.
В качестве примера укажем стиль рамки для разных элементов страницы.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тип рамки</title>
<style type="text/css">
table { border-left-style:dashed; border-right-style:dotted; border-top-style:solid; border-bottom-style:groove }
td { border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none; text-align:center }
caption { border-top-style:solid }
p { border-left-style:dotted; border-right-style:dotted; border-top-style:dotted; border-bottom-style:dotted }
</style>
</head>
<body>
<table width="300" align="center">
<caption>Заголовок таблицы </caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>Текст в пунктирной рамке</p>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Этот пример показывает, что указать тип рамки можно не только для границ таблицы, но и для заголовка таблицы, и даже для абзацев.
Эти атрибуты могут быть объединены в одном атрибуте border-style:
border-style: <top> <right> <bottom> <left>
Если все значения совпадают, можно указать это значение один раз:
table { border-style:dotted }
Толщина линии рамки
С помощью атрибутов border-left-width (левая линия), border-right-width (правая линия), border-top-width (верхняя линия), border-bottom-width (нижняя линия) можно задать толщину линии рамки. Может быть задано абсолютное значение:
table {border-left-width: 5px; border-right-width: 5px; border-top-width: 0; border-bottom-width: 10px }
Также можно указать одно из предопределенных значений:
thin— тонкая линия;medium— средняя толщина линии;thick— толстая линия.
table {border-left-width: medium; border-right-width: medium; border-top-width: thin; border-bottom-width: thick }
Эти атрибуты могут быть объединены в одном атрибуте border-width:
border-width: <top> <right> <bottom> <left>
Если значения совпадают, можно указать их один раз:
table {border-width: medium}
Цвет линии рамки
С помощью атрибутов border-left-color (левая линия), border-right-color (правая линия), border-top-color (верхняя линия), border-bottom-color (нижняя линия) можно задать цвет рамки:
table { border-left-color: red; border-right-color: blue; border-top-color: green; border-bottom-color:black }
Если значения совпадают, можно указать их один раз, объединив в атрибут border-color:
table { border-color: red }
Одновременное задание атрибутов рамки
Если атрибуты рамки одинаковы для всех ее сторон, можно задать их в одном атрибуте border:
border: <стиль> <толщина> <цвет>
Поскольку значение атрибута однозначно определяет, к какому именно компоненту он относится, то их можно указать в произвольном порядке:
td { border: red thin solid }
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться