$1.99 Domains* at GoDaddy.com

CSS Sınır Çizgisi

css-13

HTML derslerinde tabloların ve resimlerin sınır çizgilerine sahip olduÄŸunu görmüş ve kodlarımıza border=”…” parametresiyle yansıtmıştık. Özellikle tablolarda bu parametreyi çok kullanırız. DiÄŸer kodların da sınır çizgileri vardır ama varsayılan deÄŸerleri sıfır olduÄŸundan ve genellikle kullanılması tercih edilmediÄŸinden üzerinde durmamıştık.

Sınır Çizgi Şekilleri

CSS’de sınır çizgilerinin ÅŸeklini belirlemek için border-style özelliÄŸinden yararlanırız. Bu özelliÄŸin deÄŸerleri ÅŸunlardır: none, dotted, dashed, solid, double, groove, ridge, inset, ve outset. AÅŸağıdaki uygulama bu deÄŸerlerin nasıl sonuç verdiÄŸini gösteriyor. NOT: Bu özelliÄŸi Netscape desteklemiyor.

 

<html>

<head>

<title>Sınır çizgi şekilleri,</title> 

</head>

<body>

<p style=”border-style: none”>none</p>

<p style=”border-style: dotted”>dotted</p>

<p style=”border-style: dashed”>dashed</p>

<p style=”border-style: solid”>solid</p>

<p style=”border-style: double”>double</p>

<p style=”border-style: groove”>groove</p>

<p style=”border-style: ridge”>ridge</p>

<p style=”border-style: inset”>inset</p>

<p style=”border-style: outset”>outset</p>

</body>

</html> 

Uygulamada sonuçlarını gördüğümüz bu özellik değerlerinin listesini aşağıda bulabilirsiniz.

none Sınır çizgisinin olmamasını sağlar.
  border-style: none
dotted Sınır çizgisini noktalı formatta gösterir. ÇoÄŸu gözatıcıda (browser’da) katı formatta çıkar.
  border-style: dotted
dashed Sınır çizgisini kesikli formatta gösterir. ÇoÄŸu gözatıcıda (browser’da) katı formatta çıkar.
  border-style: dashed
solid Sınır çizgisini katı formatta gösterir.
  border-style: solid
solid Sınır çizgisini katı formatta gösterir.
  border-style: double
solid Sınır çizgisini çift çizgili formatta gösterir.
  border-style: double
groove Sınır çizgisini oluk formatında gösterir.
  border-style: groove
ridge Sınır çizgisini tümsek formatında gösterir.
  border-style: ridge
inset Sınır çizgisini 3D basılmış düğme formatında gösterir.
  border-style: inset
outset Sınır çizgisini 3D düğme formatında gösterir.
  border-style: outset

Bunların yanısıra dilersek birkaç değeri birden yazarak melez sınır çizgileri de oluşturabiliriz: border-style: değer1 değer2 değer3.

Sınır Çizgi Rengi

Sınır çizgilerinin rengini belirlemek için border-color özelliğine renk değerleri veririz. Eğer border-color özelliğine tek bir renk değeri verirsek, sınır çizgisi o renkte olur. Eğer iki renk değeri verirsek, sınırın üst ve alt çizgileri ilk rengi, sınırın sol ve sağ çizgileri ikinci rengi alırlar. Eğer özelliğe üç renk değeri verirsek, üst sınır çizgisi ilk rengi, sol ve sağ çizgiler ikinci rengi, alt çizgi üçüncü rengi alır. Eğer özelliğe dört renk değeri atarsak, üst çizgi ilk rengi, sağ çizgi ikinci rengi, alt çizgi üçüncü rengi ve sol çizgi dördüncü rengi alır. NOT: Bu özelliği Netscape desteklemiyor.

 

<html>

<head>

<title>Sınır çizgi renkleri,</title> 

</head>

<body>

<p style=”border-style: solid; border-color:red”>Tek renk</p>

<p style=”border-style: solid; border-color:red blue”>Ä°ki renk</p>

<p style=”border-style: solid; border-color:red blue green”>Üç renk</p>

<p style=”border-style: solid; border-color:red blue green yellow”>Dört renk</p>

</body>

</html> 

Sınır Çizgi Kalınlığı

Sınır çizgisinin kalınlığını border-width özelliği ifade eder. Bu özelliğe thick (kalın), medium (orta kalın), thin (ince) gibi standart değerler verebileceğimiz gibi, birimsel değerler de verebiliriz. (bak. CSS birimleri) Eğer tek bir değer verilmişse, sınır çizgisinin her yanı o değeri alır. Eğer iki değer verilmişse, üst ve alt çizgiler ilk değeri, sol ve sağ çizgiler ikinci değeri alır. Eğer üç değer verilmişse, üst çizgi ilk değeri, sol ve sağ çizgiler ikinci değeri, alt çizgi üçüncü değeri alır. Eğer dört değer verilmişse, üst çizgi ilk değeri, sağ çizgi ikinci değeri, alt çizgi üçüncü değeri alır, sol çizgi dördüncü değeri alır.

 

<html>

<head>

<title>Sınır çizgi kalınlığı,</title> 

</head>

<body>

<p style=”border-style: solid; border-width: thick”>Tek kalınlık deÄŸeri</p>

<p style=”border-style: solid; border-width: thin thick”>Ä°ki kalınlık deÄŸeri</p>

<p style=”border-style: solid; border-width: 5px 10px 1px”>Üç kalınlık deÄŸeri</p>

<p style=”border-style: solid; border-width: 5px 10px 1px medium”>Dört kalınlık deÄŸeri</p>

</body>

</html> 

border-width özelliğine değerler vererek, sınır çizgilerinin dört tarafına değerler verebileceğimiz gibi, aşağıdaki özelliklerle sınır çizgisinin tek bir tarafına da değerler verebiliyoruz.

border-top-width Üst sınır çizgisinin kalınlığını ifade eder.
  border-top-width: thin
border-right-width Sağ sınır çizgisinin kalınlığını ifade eder.
  border-right-width: 1 cm
border-left-width sol sınır çizgisinin kalınlığını ifade eder.
  border-left-width: thick
border-bottom-width Alt sınır çizgisinin kalınlığını ifade eder.
  border-bottom-width: 20px

Sınır Çizgi Özelliklerini Tek Kodla İfade Etme

Sayfanın finalinde, yine bütün bu özellikleri aynı anda barındıran bir özellik sunuyoruz: border. Bu özelliğe şu şekilde değer veririz: border: (border-width değeri) (border-style değeri) (border-color değeri). Bu özelliğin sınır kenarlarına indirgendiği aşağıdaki özellikleri de kullanabilirsiniz.

border-top Üst sınır çizgisinin özelliklerini ifade eder.
  border-top: thin outset green
border-right Sağ sınır çizgisinin özelliklerini ifade eder.
  border-right: 12px solid rgb(100%, 20%, 20%)
border-left Sol sınır çizgisinin özelliklerini ifade eder.
  border-left: thick dotted #ccffff
border-bottom Alt sınır çizgisinin özelliklerini ifade eder.
  border-bottom: 1cm double rgb(218, 97, 255)

 

 

Kategoriler: CSS, Web Programlama

Tags: , , , ,

Yorumlar

Yorum Yok

Yorumunuzu Ekleyin

Yorum eklemek için giris yapmalısınız.