CSS'de border ve outline olmak üzere iki farklı çerçeve türü bulunmaktadır. border her zaman dikdörtgen bir çerçeve belirtirken, CSS2'de tanıtılan outline çerçeveler, köşeli olmayan alanlar için tasarlanmıştır. Ve bir başka fark da şudur: outline kullanıldığında çerçevenin dışına bir sınır çizilir, bu nedenle bir öğe hem border hem de outline ile sınırlandırılabilir.
Bu öğreticide sunulan çerçeve tanımları özellikle kendine ait bir paragraf oluşturan öğeler için ilginçtir. Temelde diğer öğelere de uygulanabilirler.
Çerçeve Tanımlama
border ile bir öğenin çerçevesinin görünümü belirlenebilir.
Genel border özelliği, daha sonra ayrıntılı olarak ele alınacak olan aşağıdaki değerlerin bir özeti gibidir:
• border-color
• border-style
• border-width
Her bir özellik için değerler arasında boşluk bırakılarak ayrılır. Özellikleri belirtirken sıranın önemi yoktur. Ayrıca border için öğelerin tek taraflı çerçeve rengi, kalınlığı ve türü hakkındaki bilgileri belirtebileceğiniz dört alt özelliği de vardır.
• border-top – Üst çerçeve
• border-right – Sağ çerçeve
• border-bottom – Alt çerçeve
• border-left – Sol çerçeve
Aşağıdaki örnek border kullanımını göstermektedir. Bu tanım bir üç nokta genişlikte, siyah ve kesikli bir çerçeve oluşturur.
<p style="border:3pt solid #000000;"> Hoş geldiniz </p>
Tarayıcıdaki sonuç:
Çerçeve Rengi
border-color ile çerçeve rengi belirlenir. Şunlar geçerlidir:
• transparent – şeffaf çerçeve
• Renk değeri
Tek bir değer verildiğinde bu, tüm çerçeve kenarları için geçerli olur. Farklı renkler belirtmek için her kenar için birden fazla değer, boşlukla ayrılmış şekilde verilir.
• İki değer – birincisi üst ve alt, ikincisi sol ve sağ çerçeve rengi için.
• Üç değer – birincisi üst, ikincisi sol ve sağ, üçüncüsü alt çerçeve rengi için.
• Dört değer – ilk değer üst, ikinci sağ, üçüncü alt ve dördüncü sol çerçeve rengi için.
Ayrıca aşağıdaki border alt özellikleri kullanılabilir:
• border-top-color – Üst çerçeve rengi
• border-right-color – Sağ çerçeve rengi
• border-bottom-color – Alt çerçeve rengi
• border-left-color – Sol çerçeve rengi
Bir örnek:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Ve işte tarayıcıdaki sonuç:
Çizgi Türü
border-style ile çerçevenin çizgi türü belirlenebilir.
Aşağıda, mümkün çerçeve varyasyonlarının bir listesi bulunmaktadır:
• none – görünmez çerçeve
• dotted – noktalı
• dashed – kesikli
• solid – kesintisiz
• double – çift kesintisiz
• groove – 3D çizgi
• ridge – 3D çizgi
• inset – 3D çizgi
• outset – 3D çizgi
İşte çerçeve türlerinin nasıl göründüğüne dair bir örnek:
<!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>Tarayıcıdaki sonuç:
Bir değer belirtilirse, bu tüm çerçeve kenarları için geçerlidir. Her kenar için farklı çizgi türleri belirlemek için birden fazla değer boşlukla ayrılarak yazılır.
• İki değer – birincisi üst ve alt, ikincisi sol ve sağ çerçeve türü için.
• Üç değer – birincisi üst, ikincisi sol ve sağ, üçüncüsü alt çerçeve türü için.
• Dört değer – ilk üst, ikinci sağ, üçüncü alt ve dördüncü sol çerçeve türü için.
Ayrıca aşağıdaki border alt özellikleri de kullanılabilir:
• border-top-style – Üst çerçeve türü
• border-right-style – Sağ çerçeve türü
• border-bottom-style – Alt çerçeve türü
• border-left-style – Sol çerçeve türü
Bu konuya bir örnek:
<p style="border-bottom-style: dashed;"> Kesikli çerçeve </p>
Ve tarayıcıda görüntülenen hali şu şekildedir:
Çerçeve genişliğini belirleme
border-width ile çerçeve genişliği belirlenir.
• Uzunluk belirtimi
• ince – ince çerçeve
• orta – orta güçlü çerçeve
• kalın – kalın çerçeve
Tek bir değer belirtilirse, bu değer elemanın tüm kenarları için geçerli olur. Farklı kenar kalınlıkları belirlemek için iki yöntem vardır. İlk varyantta, boşluklarla ayrılmış birden fazla değer yazılır.
• İki değer – ilk değer üst ve alt, ikinci değer ise sol ve sağ çerçeve genişliği için kullanılır.
• Üç değer – ilk değer üst, ikinci değer sol ve sağ, üçüncü değer ise alt çerçeve genişliği için kullanılır.
• Dört değer – ilk değer üst, ikinci değer sağ, üçüncü değer alt ve dördüncü değer sol çerçeve genişliği için kullanılır.
Ayrıca aşağıdaki border alt özelliklerini de kullanabilirsiniz:
• border-top-width – üst çerçeve kalınlığı
• border-right-width – sağ çerçeve kalınlığı
• border-bottom-width – alt çerçeve kalınlığı
• border-left-width – sol çerçeve kalınlığı
Bir örnek:
<p style="border-width:2px;border-style: noktalı;"> Hoş geldiniz </p>
outline için çerçeve rengi
outline-color özelliği ile çerçeve rengi tanımlanır. Belirtme border-color ile aynıdır.
• tersine – bir renk tersine çevrilir. Bu renk, onaltılık bir renk değerinin tüm bitlerinin ters çevrilmesiyle elde edilir.
• Renk belirtimi
Bir örnek:
<p style="outline-width: orta; outline-style: sürekli; outline-color: mavi;"> PSD-Tutorials.de </p>
Tarayıcıda görüntülendiği şekliyle:
outline için çerçeve türü
outline-style belirtimi konturun türünü belirler. İzin verilen değerler border-style ile aynıdır.
• hiçbiri – görünmez çerçeve
• noktalı – noktalı
• çizgili – kesikli
• sürekli – kesintisiz
• çift – çift kesintisiz
• oluk – 3D çizgi
• çıkıntı – 3D çizgi
• çöküntü – 3D çizgi
• dışa doğru – 3D çizgi
Bir örnek:
<p style="kontur-stili:sürekli;kontur-genişliği:2px; kontur-renk:kırmızı;"> PSD-Tutorials.de </p>
outline için çerçeve kalınlığı
outline-width belirtimi border-width ile aynıdır. Bu şekilde çerçeve kalınlığı tanımlanır. Görünür bir çerçeve çizgisi oluşturmak için, her zaman outline-width'ı outline-style ile birleştirin.
• orta – orta güçlü çerçeve
• ince – ince çerçeve
• kalın – kalın çerçeve
• Uzunluk belirtimi – çerçeve kalınlığını belirler
Bir örnek:
<p style="outline-width: ince;outline-style: sürekli; outline-color: kırmızı;">
Hoş geldiniz
</p>
Ve border için olduğu gibi, outline çerçeveleri için genel bir özellik bulunmaktadır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:kırmızı kesikli kalın;
outline:yeşil noktalı kalın;
}
</style>
</head>
<body>
<p>PSD-Tutorials.de'ye hoş geldiniz!</p>
</body>
</html>
Bu, aşağıdaki özellikleri içerir:
• outline-width
• outline-style
• outline-color
Buradaki prensip, genel border özelliğinin prensibiyle aynıdır.
