border-top
border-bottom
border-right
border-left
|
| Их использование позволяет установить стиль, цвет и ширину каждой из четырех сторон рамки. Любые атрибуты, не установленные явно, сохраняют свои первоначальные значения. |
| Синтаксис |
border-top: border-top-width border-top-style color
border-bottom: border-bottom-width border-bottom-style color
border-right: border-right-width border-right-style color
border-left: border-left-width border-left-style color
|
| Значения |
| Применение атрибутов ширины и стиля рамки показано в следующем примере (допустимые значения цвета приведены в приложении). |
| Примеры |
P
{
border-top: ridge 5px darkred;
border-bottom: ridge 5px darkred;
border-right: ridge 2px darkred;
border-left: ridge 2px darkred;
}
|
|
border-color
|
| Этот атрибут позволяет установить цвет всех четырех сторон рамки. Броузер Netscape допускает только одно значение, применяемое ко всем четырем сторонам. Броузер IE и спецификация CSS2 Разрешают указывать каждую сторону отдельно. |
| Синтаксис |
border-color: color {1-4 значения}
|
| Значения |
Броузер Netscape допускает только одно значение цвета. Броузер IE позволяет использовать до четырех разных значений
цвета color, способ применения которых, описанный в таблице 1, трудно объяснить логически.
Таблица 1. Число значений и действие атрибута border-color
| Число значений |
Действие |
| 1 | Установить одинаковый цвет всех четырех сторон рамки |
| 2 | Верхняя и нижняя сторона получают первое значение цвета, правая и левая — второе значение цвета. |
| 3 | Верхняя сторона получает первое значение цвета, правая и левая — второе значение цвета, нижняя — третье значение цвета. |
| 4 | Установить цвета сторон рамки по часовой стрелке: верхняя, правая, нижняя и левая стороны. |
|
| Примеры |
H2 { border-color: red blue #3366FF rgb(0%, 95%, 30%); }
P { border-color: green coral; }
|
border-top-color
border-right-color
border-bottom-color
border-left-color
|
| Каждый из указанных атрибутов устанавливает цвет отдельного элемента рамки. Пример установки этих цветов в одном операторе приведен в разделе с описанием атрибута border-color. |
| Синтаксис |
border-top-color: color
border-right-color: color
border-bottom-color: color
border-left-color: color
|
| Значения |
| Приемлемо любое допустимое значение цвета color (см. раздел "Цвета" в приложении). |
| Примеры |
H1
{
border-top-color: blue;
border-right-color: lightblue
}
P
{
border-bottom-color: rgb (0, 51, 153);
border-left-color: rgb (14%, 33%, 89%)
}
|
| border-style |
| Еще один атрибут рамки, позволяющий определять стили элементов рамки как одинаковые или разные. Броузер Netscape допускает только одно значение borderStyle, а броузер IЕ позволяет использовать до четырех значений. |
| Синтаксис |
border-style: borderStyle {1-4}
|
| Значения |
| Броузеры поддерживают не все стили, определенные в спецификации CSS2. Приводим перечень стилей, которые могут применяться и в Netscape, и в IE: |
double
groove
inset
none
solid
|
| Как видно из таблицы 2, число значений определяет, какие стороны получат те или иные стили рамки. |
Таблица 2. Число значений и действие атрибута border-style
| Число значений |
Действие |
| 1 | Устанавливает одинаковый стиль для всех четырех сторон рамки. |
| 2 | Верхняя и нижняя стороны получают первый стиль, правая и левая — второй стиль. |
| 3 | Верхняя сторона получает первый стиль, правая и стороны — второй, а нижняя — третий стиль. |
| 4 | Устанавливает стили рамки по часовой стрелке: верхняя правая, нижняя и левая стороны. |
|
| Примеры |
P { border-style: ridge solid }
H1 { border-style: ridge none solid none;}
|
border-top-style
border-right-style
border-bottom-style
border-left-style
|
| Каждый из указанных атрибутов устанавливает стиль отдельного элемента рамки. Пример того, как устанавливать эти стили в одном операторе, приведен в описании атрибута border-style. |
| Синтаксис |
border-top-style: borderStyle
border-right-style: borderStyle
border-bottom-style: borderStyle
border-left-style: borderStyle
|
| Не все стили спецификации CSS2 распознаются обоими броузерами. Ниже приведен перечень стилей, которые могут применяться и в Netscape, и в IE: |
double
groove
inset
none
outset
ridge
solid
|
| Примеры |
H1
{
border-top-style: ridge;
border-right-style: solid;
}
P
{
border-bottom-style: groove;
border-left-style: double;
}
|
|
border-width
|
| Данный атрибут дает возможность установить ширину всех сторон рамки элемента в одном операторе, во многом аналогично атрибутам border-color и border-style. |
| Синтаксис |
border-width: thin | medium | thick | length {1,4}
|
| Значения |
| Эти три константы — thin, medium и thick — позволяют броузеру без вашего участия выбрать толщину рамки. Вы можете также задать собственное значение толщины. Допустимые единицы указания толщины length приведены в разделе "Единицы измерения" в приложении.
Если вы предпочитаете точные значения, то можете ввести до четырех чисел. Как показано в таблице 3, в зависимости от того, сколько вы укажете значений, будут затронуты определенные стороны рамки. |
Таблица 3. Значения ширины и действие атрибута border-width
| Число значений |
Действие |
| 1 | Устанавливает одинаковые значения стиля для всех четырех сторон рамки. |
| 2 | Верхняя и нижняя стороны получают первый стиль, правая и левая — второй. |
| 3 | Верхняя сторона получает первый стиль, правая и левая стороны — второй, нижняя — третий стиль. |
| 4 | Устанавливает стили рамки по часовой стрелке: верхняя, правая, нижняя и левая стороны. |
|
| Примеры |
P {border-width: 5px 3px 5px;}
DIV {border-width: thin;}
B {border-width: 10mm 20mm 10mm 15mm;}
|
border-top-width
border-right-width
border-bottom-width
border-left-width
|
| Каждый из указанных атрибутов устанавливает ширину отдельного элемента рамки. Пример установки этих значений ширины в одном операторе приведен в описании атрибута. |
| Синтаксис |
border-top-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length
|
| Значения |
| Эти три константы — thin, medium И thick — позволяют броузеру выбрать толщину рамки за вас. Вы можете также задать собственное значение толщины. Допустимые единицы измерения длины 1епдЪЬ приведены в разделе "Единицы измерения" в приложении. |
| Примеры |
H1
{
border-top-width: 3px;
border-right-width: 6px;
}
P
{
border-bottom-width: .25in;
border-left-width: .35in;
}
|
|
clear
|
| Данный атрибут описать сложнее. Он определяет, может ли элемент быть отображен в той же горизонтальной полосе, что и плавающий элемент (см. атрибут float далее в этом приложении). Поскольку атрибут float обычно имеет значение left или right, следует, как правило, применять такое же значение атрибута clear. ЕСЛИ атрибут clear какого-то элемента имеет значение, отличное от none, этот элемент будет выведен с начала следующей доступной строки вслед за плавающим элементом. Однако поскольку броузеры Netscape и IE не выводят элемент с атрибутом float одинаково, вероятно, в настоящее время следует избегать применения и атрибута и атрибута clear |
| Синтаксис |
clear: right | left | both | none
|
| Значения |
| Любое из приведенных выше четырех значений: right, left, both или none. |
| Примеры |
<IMG SRC="images/biolab.gif" HEIGHT="40" WIDTH="100" STYLE="float:left">
<H2 STYLE="clear:left">Get a Portable BioLab today!</H2>
|
|
float
|
| По существу, этот атрибут действует как средство выравнивания элемента, позволяющее другому информационному наполнению охватывать данный элемент слева или справа. Он часто применяется с изображением, находящимся внутри текста. Однако между броузерами Netscape и IE существуют некоторые различия в обработке этого атрибута, которые невозможно согласовать, поэтому в настоящее время рекомендуем его не использовать. |
| Синтаксис |
float: alignment | none
|
| Значения |
| Выравнивание alignment может иметь значение right или left. |
| Примеры |
IMG { float: left;}
|
| margin |
|
Этот атрибут позволяет устанавливать ширину невидимых вдоль всех четырех сторон элемента в одном операторе. Поля ] за видимые края элемента и являются полезным средством установки дополнительного пустого пространства вокруг него. |
| Синтаксис |
margin: auto | thickness {1,4}
|
| Значения |
| Толщина thickness поля может быть выражена в обычных единицах длины (см. раздел "Единицы измерения" в приложении). Можно также ввести до четырех значений размеров полей. Как показано в таблице 4, от числа введенных значений зависит то, какие стороны воспримут эти значения. |
| Примеры |
P { margin: 20px 15px 20px;}
|
Таблица 4. Число значений и действие атрибута margin
| Число значений |
Действие |
| 1 | Устанавливает одинаковый стиль для всех четырех сторон рамки. |
| 2 | Верхняя и нижняя стороны получают первый стиль, правая и левая — второй стиль. |
| 3 | Верхняя сторона получает первый стиль, правая и левая — второй стиль, нижняя — третий стиль. |
| 4 | Устанавливает стили рамки по часовой стрелке: верхняя, правая, нижняя и левая стороны. |
|
margin-top
margin-right
margin-bottom
margin-left
|
| Данные атрибуты устанавливают ширину определенного поля элемента. Поле — это невидимое пространство, которое выходит за пределы видимой области (как поля на странице печатного текста).
С помощью атрибута margin можно установить ширину всех четырех полей в одном операторе. |
| Синтаксис |
margin-top: thickness | auto
margin-right: thickness | auto
margin-bottom: thickness | auto
margin-left: thickness | auto
|
| Значения |
| В качестве толщины thickness можно указать значение длины (см. раздел "Единицы измерения" в приложении), процент от размера следующего элемента, расположенного в направлении внешней рамки страницы, или значение auto, которое предусмотрено в броузере по умолчанию. |
| Примеры |
H1
{
margin-top: 3px;
margin-right: 16px;
}
P
{
margin-bottom: .25in;
margin-left: .35in;
}
|
|
padding
|
| Промежуток padding — это пространство между краем элемента и началом его рамки. Увеличение ширины промежутка вокруг элемента увеличивает ширину пространства внутри рамки, поэтому рамка охватывает большую площадь. В отличие от поля margin, увеличение ширины промежутка внутри элемента приводит к увеличению размеров элемента, но размер информационного наполнения остается неизменным. Помните, что Netscape добавляет собственный трехпиксельный промежуток вокруг информационного наполнения, и с этим ничего нельзя сделать; любое указанное вами значение промежутка padding будет складываться с уже имеющимся трехпиксельным промежутком. |
| Синтаксис |
padding: thickness {1,4}
|
| Значения |
Можно ввести до четырех значений thickness. Они могут быть выражены в единицах длины (см. раздел "Единицы измерения" в приложении) или в процентах от размеров следующего элемента в направлении к внешней рамке страницы. Как показано в таблице 5, от числа введенных значений зависит, какие стороны будут затронуты.
Таблица 5. Число значений и действие атрибута padding
| Число значений |
Действие |
| 1 | Устанавливает одинаковый стиль для всех четырех сторон рамки. |
| 2 | Верхняя и нижняя стороны получают первый стиль, правая и левая — второй стиль. |
| 3 | Верхняя сторона получает первый стиль, правая и левая — второй стиль, нижняя — третий стиль. |
| 4 | Устанавливает стили рамки по часовой стрелке: верхняя, правая, нижняя и левая стороны. |
|
| Примеры |
P {border-color: red; padding: 5px 10px;}
|
padding-top
padding-right
padding-bottom
padding-left
|
| Указанные атрибуты позволяют установить ширину определенного промежутка внутри элемента. Промежуток — это пространство между блоком информационного наполнения и внутренним краем рамки элемента. Вы можете установить значения промежутков со всех четырех сторон элемента в одном операторе с помощью атрибута padding. |
| Синтаксис |
padding-top: thickness
padding-right: thickness
padding-bottom: thickness
padding-left: thickness
|
| Значения |
| Значение толщины thickness может быть выражено в единицах длины (см. раздел "Единицы измерения" в приложении) или в процентах от размера следующего элемента в направлении к внешней рамке. |
| Примеры |
H1
{
padding-top: 30px;
padding-right: 10px;
}
P
{
padding-bottom: 4pt;
padding-left: 6pt;
}
|
