closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali Mengü | Kişisel Web Sayfasi

CSS'de Border Özelliğini Tanıyalım

Bu Dersimizde CSS'de benim çok kullandiğim ve gerekli gördüğüm bir konu olan Border özelliğini sizlere anlaticam.Öncelikle yine kendime göre borderi tanıtayım.

Css'De Border ; Oluşturduğumuz bir katmanin sağında,solunda,altında,üstünde kalınlığını ve rengini belirleyebildiğimiz bir çizgi oluşturmaktir.

Border Kodlari
Arkadaslar Borderi katmani çerçevelemek amaçli kullanabileceğimiz gibi sadece sağ kısmını kenarlamak veya sadece üst kısmını kenarlamak içinde kullanabiliriz.Aynı işlemleri sol ve alt kısım içinde yapabiliriz tabi , bunun için yapicağımız işlem borderin kodlarini kullanmaktir.Bu kodları margin ve padding kodlarindada kullanmiştik.Bu dersimizi okuduysaniz okadarka karışık birsey olmadiğini anlarsiniz.

Border ==> Katmanin tamamini çerçeveler.
Border-right ==> Katmanin sağ kısmında bir çizgi oluşturur
Border-left ==> Katmanin sol kısmında bir çizgi oluşturur
Border-top ==>Katmanin üst kısmında bir çizgi oluşturur
Border-bottom ==>Katmanin alt kısmında bir çizgi oluşturur

Border Kalınlık Değeri
Katmanimizin sağında,solunda,üstünde ve alt kısmında oluşturduğumuz çizginin kalınlık değerini verdiğimiz koddur.Değerlerin  0dan baslayıp Sonsuza gidebileceğini düsünüyorum fakat bir süre sonra ekranın tamamini kaplayacağından değerlerin büyük olmamasi gerekir.Bu yüzden değerleri 0-4px arasinda verebiliriz.CSS de kullanimi Şöyledir;

Borderin kodu belirlenir " : " işareti konulur ve Borderin kalınlık değeri girilir Borderin şekli belinlenir ardından rengi belirlenir " ; " işareti ile kapatilir.

border: 1px solid #999999;

Border Şekilleri
Border sadece düz bir çizgi değildir şekilleri vardir.

#etiket {border-style: dotted;}dotted border Stili - Noktalı Çizgi
#etiket {border-style: dashed;}dashed border Stili - Kesik Çizgi
#etiket {border-style: solid;}solid border Stili - Düz Çizgi
#etiket {border-style: double;}double border Stili - Çift Düz Çizgi
#etiket {border-style: groove;}groove border Stili - İçe Kabarık Çizgi
#etiket {border-style: ridge;}ridge border Stili - Dışa Kabarık Çizgi
#etiket {border-style: inset;}inset border Stili - İçe Gömülü Çizgi
#etiket {border-style: outset;}outset border Stili - Dışa Gömülü Çizgi


Artık Nasıl Kullanicağımızı bildiğimze göre Bir Katman Oluşturup alt kısmını 2px; kalınlığında sağ kısmını 3px kalınlığında sol ve üst kısmınıda kesik çizgili (dashed) 1px kalınlığında çerçeveliyelim.Çizgilerin hepsine siyah renk verelim.

Kod ;
<style type="text/css">
<!--
#katmanadi {
    border-top-width: 1px;
    border-right-width: 3px;
    border-bottom-width: 2px;
    border-left-width: 1px;
    border-top-style: dashed;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: dashed;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
}
-->
</style>
<div id="katmanadi"></div>

Önizleme
 

Şimdi birde siyah renkte etrafini düz çizgi olarak 1px kalınlığında çizelim
Kod;
<style type="text/css">
<!--
#katmanadi2 {
    border: 1px solid #000000;
}
-->
</style>
<div id="katmanadi2"></div>

Önizleme
 


Anlatim By Ali Mengü

Etiketler ; cssde kenarlik,cssde border, border nedir,border kodlari nelerdir,border nasıl kullanilir,çerçeve nasıl yapılır





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::08.06.2011, 07:08 (UTC)
alimcevik
alimcevik
Kapalı

güzel anlatım eline sağlık

Yorumu gönderen::05.06.2011, 23:55 (UTC)
alimengu
alimengu
Kapalı

Teşekkür ederim.

Yorumu gönderen::05.06.2011, 22:42 (UTC)
bs-platformu
bs-platformu
Kapalı

Güzel anlatım ellerine sağlık dostum...



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugün toplam 19 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=