Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.
- Пример в котором показано, как задать стиль для четырех сторон границы.
<html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>
<body>
<pre class="inset">рамка inset </pre>
<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>
<h1 class="dotted">рамка dotted</h1>
<h2 class="dashed">рамка dashed</h2>
<h3 class="solid">рамка solid</h3>
<h4 class="double">рамка double</h4>
<h5 class="groove">рамка groove </h5>
<h6 class="ridge">рамка ridge</h6>
</body>
</html>
- Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
<html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>
<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>
<h2 class="styleh2"> заголовок заголовок заголовок </h2>
<h3 class="styleh3"> заголовок заголовок заголовок </h3>
<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>
</html>
- Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>
</head>
<body>
<h1 class="styleh1">одноцветная рамка</h1>
<h2 class="styleh2">рамка из двух цветов</h2>
<h3 class="styleh3">рамка из трех цветов</h3>
<h4 class="styleh4">рамка из четырех цветов</h4>
<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать толщину нижней стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать толщину левой стороны границы.
<html>
<head>
<style type="text/css">
h2
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>
<body>
<h2>fdgfgdf</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать толщину правой стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-right-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать толщину верхней стороны границы.
<html>
<head>
<style type="text/css">
h4
{
border-style: dotted;
border-top-width: 7px
}
</style>
</head>
<body>
<h4>заголовок h4</h4>
<pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
h1
{
border-bottom: thick double blue
}
</style>
</head>
<body>
<h1> Заголовок h1.</h1>
</body>
</html>
- Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-left: thin ridge #f0ffff
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>
</html>
- Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
h4
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>
<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>
</html>
- Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>
</html>
- Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3
{
border-style: outset;
border-width: 7px
}
h4.styleh4
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>
<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку.
Сначала задайте границы с помощью свойства <b>"border-style"</b>.</pre>
</body>
</html>
- Пример, в котором показано, как задать задания свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
<html>
<head>
<style type="text/css">
h1
{
border: thin dotted #ff00ff
}
</style>
</head>
<body>
<h1>Заголовок h1</h1>
</body>
</html>
Параметры границы в CSS
Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.
Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.
| Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
| border |
Параметр для задания свойств всех четырех сторон границы в одном объявлении |
border-width |
4 |
1 |
4 |
1 |
| border-style |
| border-color |
| border-bottom |
Параметр для задания всех свойств нижней стороны границы в одном объявлении |
border-bottom-width |
4 |
1 |
6 |
1 |
| border-style |
| border-color |
| border-bottom-color |
Задает цвет нижней стороны границы |
border-color |
4 |
1 |
6 |
2 |
| border-bottom-style |
Задает стиль нижней стороны границы |
border-style |
4 |
1 |
6 |
2 |
| border-bottom-width |
Задает толщину нижней стороны границы |
thin |
4 |
1 |
4 |
1 |
| medium |
| thick |
| length |
| border-color |
Задает цвета четырех сторон границы, может иметь от одного до четырех значений |
color |
4 |
1 |
6 |
1 |
| border-left |
Параметр для задания всех свойств левой стороны границы в одном объявлении |
border-left-width |
4 |
1 |
6 |
1 |
| border-style |
| border-color |
| border-left-color |
Задает цвет левой стороны границы |
border-color |
4 |
1 |
6 |
2 |
| border-left-style |
Задает стиль левой стороны границы |
border-style |
4 |
1 |
6 |
2 |
| border-left-width |
Задает толщину левой стороны границы |
thin |
4 |
1 |
4 |
1 |
| medium |
| thick |
| length |
| border-right |
Параметр для задания всех свойств правой стороны границы в одном объявлении |
border-right-width |
4 |
1 |
6 |
1 |
| border-style |
| border-color |
| border-right-color |
Задает цвет правой стороны границы |
border-color |
4 |
1 |
6 |
2 |
| border-right-style |
Задает стиль правой стороны границы |
border-style |
4 |
1 |
6 |
2 |
| border-right-width |
Задает толщину правой стороны границы |
thin |
4 |
1 |
4 |
1 |
| medium |
| thick |
| length |
| border-style |
Задает стили четырех сторон границы, может иметь от одного до четырех стилей |
none |
4 |
1 |
6 |
1 |
| hidden |
| dotted |
| dashed |
| solid |
| double |
| groove |
| ridge |
| inset |
| outset |
| border-top |
Параметр для задания всех свойств верхней стороны границы в одном объявлении |
border-top-width |
4 |
1 |
6 |
1 |
| border-style |
| border-color |
| border-top-color |
Задает цвет верхней стороны границы |
border-color |
4 |
1 |
6 |
2 |
| border-top-style |
Задает стиль верхней стороны границы |
border-style |
4 |
1 |
6 |
2 |
| border-top-width |
Задает толщину верхней стороны границы |
thin |
4 |
1 |
4 |
1 |
| medium |
| thick |
| length |
| border-width |
Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений |
thin |
4 |
1 |
4 |
1 |
| medium |
| thick |
| length |
Границы в CSS: подробное рассмотрение
Параметр 'border'
Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| border-width |
Задает свойства для четырех сторон границы |
| border-style |
| border-color |
Примеры:
h1
{
border: medium solid #FFFF00
}
h2
{
border: dotted green
}
Параметр 'border-bottom'
Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.
Наследование: нет.
Возможные значения:
| Значение |
Описание |
| border-bottom-width |
Задает свойства для нижней стороны границы |
| border-style |
| border-color |
Примеры:
span
{
border-bottom: thick solid #800080
}
li
{
border-bottom: dotted #800000
}
Параметр 'border-bottom-color'
Данный параметр задает цвет нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| Color |
Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p
{
border-bottom-color: rgb(20,200,250)
}
span
{
border-bottom-color: blue
}
Параметр 'border-bottom-style'
Этот параметр задает стиль нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет отсутствие границы |
| Hidden |
То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted |
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed |
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid |
Определяет сплошную границу |
| double |
Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
|
| groove |
Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge |
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset |
Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset |
Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p
{
border-bottom-style: dotted
}
Параметр 'border-bottom-width'
Данный параметр задает толщину нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| thin |
Определяет тонкую нижнюю границу |
| medium |
Определяет нижнюю границу средней толщины |
| thick |
Определяет толстую нижнюю границу |
| length |
Позволяет определить толщину нижней границы |
Примеры:
p
{
border-bottom-width: 1px
}
p
{
border-bottom-width: thick
}
Параметр 'border-color'
Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.
Наследование: нет.
Возможные значения:
| Значение |
Описание |
| Color |
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
| Transparent |
Граница является прозрачной |
Примеры:
p {border-color: blue}
все четыре стороны границы будут синие.
p {border-color: blue yellow}
верхняя и нижняя стороны границы будут синие,
левая и правая стороны границы будут желтые.
p {border-color: blue yellow green}
верхняя стороны граница будет синей,
левая и правая стороны границы будут желтые,
нижняя сторона границы будет зеленая.
p {border-color: blue yellow green red}
верхняя сторона границы будет синей,
правая сторона границы будет желтой,
нижняя сторона границы будет зеленой,
левая сторона границы будет красной.
Параметр 'border-left'
Данный параметр позволяет определить все свойства левой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| border-left-width |
Задает свойства левой стороны границы |
| border-style |
| border-color |
Примеры:
p
{
border-left: medium dashed green
}
p
{
border-left: thin dotted #FF00FF
}
Параметр 'border-left-color'
Данный параметр задает цвет левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| Color |
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1
{
border-left-color: green
}
h2
{
border-left-color: #00FF00
}
Параметр 'border-left-style'
Данный параметр задает стиль левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет отсутствие границы |
| Hidden |
То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted |
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed |
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid |
Определяет сплошную границу |
| double |
Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove |
Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge |
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset |
Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset |
Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p
{
border-left-style: dotted
}
Параметр 'border-left-width'
Данный параметр задает толщину левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| thin |
Определяет тонкую левую сторону границы |
| medium |
Определяет левую сторону границы средней толщины |
| thick |
Определяет толстую левую сторону границы |
| length |
Позволяет определить толщину левой стороны границы |
Примеры:
p
{
border-left-width: 7px
}
p
{
border-left-width: thick
}
Параметр 'border-right'
Этот параметр используется для определения всех свойств правой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| border-right-width |
Задает свойства правой стороны границы |
| border-style |
| border-color |
Примеры:
h1
{
border-right: medium dotted #FFFF00
}
h2
{
border-right: thin dashed green
}
Параметр 'border-right-color'
Данный параметр задает цвет правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| color |
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p
{
border-right-color: rgb(250,200,250)
}
p
{
border-right-color: blue
}
Параметр 'border-right-style'
Данный параметр задает стиль правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет отсутствие границы |
| Hidden |
То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted |
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed |
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid |
Определяет сплошную границу |
| double |
Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove |
Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge |
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset |
Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset |
Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p
{
border-right-style: dashed
}
Параметр 'border-right-width'
Данный параметр задает толщину правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| thin |
Определяет тонкую правую сторону границы |
| medium |
Определяет правую сторону границы средней толщины |
| thick |
Определяет толстую правую сторону границы |
| length |
Позволяет определить толщину правой стороны границы |
Примеры:
h1
{
border-right-width: 2cm
}
h2
{
border-right-width: medium
}
Параметр 'border-style'
Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| None |
Определяет отсутствие границы |
| Hidden |
То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted |
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed |
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid |
Определяет сплошную границу |
| double |
Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove |
Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge |
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset |
Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset |
Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p {border-style: dashed}
все четыре стороны границы будут штрих-пунктирными.
p {border-style: solid double}
верхняя и нижняя стороны границы будут сплошными,
левая и правая сторона граница будут двойными.
p {border-style: solid double dotted}
верхняя сторона границы будет сплошной,
левая и правая сторона границы будут двойными,
нижняя сторона границы будет пунктирной.
p {border-style: dashed double dotted solid}
верхняя сторона граница будет штрих-пунктирной,
правая сторона границы будет двойной,
нижняя сторона границы будет пунктирной,
левая сторона границы будет сплошной.
Параметр 'border-top'
Данный параметр определяет все свойства верхней стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| border-top-width |
Задает свойства верхней стороны границы
|
| border-style |
| border-color |
Примеры:
p
{
border-top: thick dashed green
}
p
{
border-top: dotted #FF0000
}
Параметр 'border-top-color'
Этот параметр задает цвет верхней стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
| Значение |
Описание |
| color |
Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1
{
border-top-color: blue
}
h2
{
border-top-color: rgb(200,10,250)
}
Параметр 'border-top-style'
Параметр задает стиль верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
| Значение |
Описание |
| None |
Определяет отсутствие границы |
| Hidden |
То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted |
Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed |
Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid |
Определяет сплошную границу |
| double |
Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove |
Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge |
Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset |
Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset |
Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p
{
border-top-style: dotted
}
Параметр 'border-top-width'
Данный параметр задает толщину верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
| Значение |
Описание |
| thin |
Определяет тонкую верхнюю сторону границы |
| medium |
Определяет верхнюю сторону границы средней толщины |
| thick |
Определяет толстую верхнюю сторону границы |
| length |
Позволяет определить толщину верхней стороны границы |
Примеры:
p
{
border-top-width: medium
}
p
{
border-top-width: 1cm
}
Параметр 'border-width'
Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.
Наследование: нет.
Возможные значения:
| Значение |
Описание |
| thin |
Определяет тонкую границу |
| medium |
Определяет границы средней толщины |
| thick |
Определяет толстую границу |
| length |
Позволяет определить толщину границ |
Примеры:
p {border-width: thick}
все четыре стороны границы будут толстыми.
p {border-width: thick thin}
верхняя и нижняя стороны границы будут толстыми,
левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin}
верхняя сторона границы будет иметь среднее значение,
левая и правая стороны границы будут толстыми,
нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium}
верхняя сторона границы будет толстой,
правая сторона границы будет тонкой,
нижняя сторона границы будет тонкой,
левая сторона границы будет иметь среднее значение.
|
Посмотреть
порно видео в онлайне »