В CSS съществуват два различни типа рамки - border и outline. Докато border винаги определя правоъгълна рамка, въведените в CSS2 рамки outline са предназначени за не-правоъгълни области. Има и още едно различие: при 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.
