TIKLA
  • Anasayfa
  • Favorilere Ekle
  • Site Haritası
  • https://www.facebook.com/edkirtasiye?ref=hl
  • https://plus.google.com/b/106886206509708574199/106886206509708574199/posts
  • https://twitter.com/egitimdunyamiz
Ziyaret Bilgileri
Aktif Ziyaretçi4
Bugün Toplam130
Toplam Ziyaret1365898
ANKET
Sizce Eğitim Sisteminin En Büyük Eksikliği Nedir?
Site Haritası
REKLAM4
reklam5
REKLAM2
REKLAM1
REKLAM

CSS Kenarlıklar

Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

  • border-style
  • border-width
  • border-color
Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

  • Kenarları ayrı ayrı şekillendirmek
  • Kenarlık kullanımının kısa yolu

border-style: Kenarlık Stili

Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

none - Kenarlık yok
dotted - Noktalı
dashed - Kesik çizgili
solid - Çizgi
double - Çift çizgi
groove
ridge
inset
outset

Örnek bir kullanım:

   .kutum { border-style: dotted; }
   

border-width: Kenarlık Boyutu

Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:

   .kutum { border-style: solid; border-width: 1px; }
   

border-color: Kenarlık Rengi

Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.



Örnek bir kullanım:

   .kutum {
      border-style: solid;
      border-width: 1px;
      border-color: #0000CC;
   }
   

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

  • border-left-style - Sol kenarın şekli.
  • border-right-style - Sağ kenarın şekli.
  • border-top-style - Üst kenarın şekli.
  • border-bottom-style - Alt kenarın şekli.
Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

border-style: dotted solid double dashed;

Üst kenar - dotted,
Sağ kenar - solid,
Alt kenar - double,
Sol kenar - dashed.

Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;

Üst kenar - dotted,
Sağ ve Sol kenar - solid,
Alt kenar - double,

Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar - dotted,
Sağ ve Sol kenar - solid,
Bu kullanımda Yukarı - Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

   .kutum {
      border: 1px #0000CC solid;
   }
   

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

  • border-left - Sol kenar
  • border-right - Sağ kenar
  • border-top - Üst kenar
  • border-bottom - Alt kenar

Yorumlar - Yorum Yaz


 TIKLA