У CSS існують два різних типи рамок: border і outline. У випадку border завжди використовується прямокутна рамка, в той час як рамки outline, введені в CSS2, призначені для не-прямокутних областей. Існує ще одна відмінність: при використанні outline обведення відбувається ззовні рамки, що дозволяє елементу мати як рамку з border, так і обведення з outline.
Визначені рамки, представлені в цьому навчальному посібнику, особливо цікаві для елементів, які утворюють власний абзац. Проте, в принципі, їх можна застосовувати і до інших елементів.
Визначення рамок
За допомогою border можна визначити зовнішній вигляд рамки навколо елемента.
Загальна властивість border - це сукупність наступних значень, які будуть розглянуті детальніше:
• border-color
• border-style
• border-width
Значення для кожної окремої властивості розділяються пропусками, а порядок їх вказання не має значення. Крім того, для border існують чотири підвластивості, за допомогою яких можна вказати значення кольору, товщини та типу рамки для окремих сторін елементу.
• border-top – верхня рамка
• border-right – права рамка
• border-bottom – нижня рамка
• border-left – ліва рамка
У наступному прикладі показано використання border. Це визначає рамку шириною в три пікселя, чорного кольору і лінії типу "пунктир".
<p style="border:3pt solid #000000;"> Ласкаво просимо </p>
Результат у браузері:
Колір рамки
За допомогою border-color визначається колір рамки. Дозволені наступні значення:
• transparent – прозора рамка
• Кольорове значення
Якщо вказане лише одне значення, воно застосовується до всіх сторін рамки. Щоб визначити різні кольори для окремих сторін, слід вказати кілька значень, розділених пропусками.
• Два значення – перше для верхньої та нижньої рамки, друге для лівої та правої рамки.
• Три значення – перше для верхньої, друге для лівої та правої, третє для нижньої рамки.
• Чотири значення – перше для верхньої, друге для правої, третє для нижньої та четверте для лівої рамки.
Також можна використовувати наступні підвластивості border:
• border-top-color – колір верхньої рамки
• border-right-color – колір правої рамки
• border-bottom-color – колір нижньої рамки
• border-left-color – колір лівої рамки
Приклад:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Та ось результат у браузері:
Тип ліній
За допомогою border-style можна визначити тип ліній рамки.
Нижче наведено перелік можливих варіантів рамок:
• none – невидима рамка
• dotted – крапкова
• dashed – штрихова
• solid – зав'язана
• double – подвійна
• groove – 3D-лінія
• ridge – 3D-лінія
• inset – 3D-лінія
• outset – 3D-лінія
Ось приклад, як виглядають різновиди рамок:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Результат у браузері:
Якщо вказано тільки одне значення, то воно використовується для всіх сторін рамки. Щоб визначити типи рамок для окремих сторін, слід вказати декілька значень, розділених пропусками.
• Два значення – перше для верхньої та нижньої, друге для лівої та правої сторін рамки.
• Три значення – перше для верхньої, друге для лівої та правої, третє для нижньої сторони рамки.
• Чотири значення – перше для верхньої, друге для правої, третє для нижньої та четверте для лівої сторін рамки.
Також можна використовувати наступні підвластивості border:
• border-top-style - стиль верхньої рамки
• border-right-style - стиль правої рамки
• border-bottom-style - стиль нижньої рамки
• border-left-style - стиль лівої рамки
Також приклад:
<p style="border-bottom-style: dashed;"> Пунктирна межа </p>
І отак виглядає у браузері:
Встановлення ширини рамки
Ширина рамки визначається за допомогою border-width.
• Вказівка довжини
• thin – тонка рамка
• medium – середня рамка
• thick – товста рамка
Якщо вказано лише одно значення, воно застосовується до всіх сторін елемента. Щоб встановити різні товщини меж для окремих сторін, існують два способи. За першим варіантом вказується декілька значень, розділених пробілами.
• Два значення – перше для верхньої і нижньої, друге для лівої та правої ширини межі.
• Три значення – перше для верхньої, друге для лівої та правої, третє для нижньої товщини межі.
• Чотири значення – перше значення для верхньої, друге для правої, третє для нижньої, четверте для лівої товщини межі.
Також можна використовувати наступні властивості межі:
• border-top-width – товщина межі зверху
• border-right-width – товщина межі справа
• border-bottom-width – товщина межі знизу
• border-left-width – товщина межі зліва
Приклад:
<p style="border-width:2px;border-style: dotted;"> Ласкаво просимо </p>
Колір межі для контуру
Колір межі визначається властивістю outline-color. Указання ідентичне для border-color.
• invert – колір інвертується. Цей колір утворюється шляхом обернення всіх бітів шістнадцяткового значення кольору.
• Вказівка кольору
Приклад:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Так виглядає у браузері:
Тип рамки для контуру
Вказівка outline-style визначає вид контуру. Дозволені ті ж самі значення, що й для border-style.
• none – невидима межа
• dotted – крапкована
• dashed – пунктирна
• solid – неперервна
• double – подвійна
• groove – 3D-лінія
• ridge – 3D-лінія
• inset – 3D-лінія
• outset – 3D-лінія
Приклад:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Товщина рамки для контуру
Вказівка outline-width ідентична border-width. Цим визначається товщина контуру. Для створення видимої лінії межі завжди комбінуємо outline-width з outline-style.
• medium – середня рамка
• thin – тонка рамка
• thick – товста рамка
• Вказівка довжини – визначає товщину межі
Приклад:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Ласкаво просимо
</p>
Також як і для межі, існує загальна властивість для рамки outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Ласкаво просимо на PSD-Tutorials.de!</p>
</body>
</html>
Це об'єднує наступні властивості:
• outline-width
• outline-style
• outline-color
Принцип дії тут ідентичний загальній властивості border.
