CSS Kutu Modeli

Bir HTML nesnesi kutu gibi davranabilir. İşte bu kutu şekilli tasarım modeline CSS Kutu Modeli diyoruz. Kutu modelinde size tanıtacağımız dört özellik var:
 

• Margin - Kenarlığın çevresinde verilen boşluk.
• Border - Kenarlık
• Padding - Kenarlık ile içerik arasındaki boşluk. Arkaplan rengine boyanır.
• Content (İçerik)

                                                            

Yukarıda CONTENT içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz boşluk padding, kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.
 

Bir Elementin Genişlik ve Yüksekliği

İçerik alanının genişliği width ve yüksekliği height özelliği ile ayarlanır.
 

   .kutum {
      width:250px;
      padding:10px;
      border:5px solid gray;
      margin:10px;
   }
   

Yukarıdaki örnekte genişlik (width) 250 piksel olarak ayarlanmıştır. Peki HTML dosyamızda da bu elementin kaplayacağı alan 250 piksel mi olacaktır? Tabiki HAYIR!

Şimdi hesaplayalım:
 

• 250 piksel = Genişlik
• 20 piksel = Sağdan ve Soldan İç Boşluk (padding 10x2)
• 10 piksel = Sağ ve Sol Kenarlıklar (border 5x2)
• 20 piksel = Sağ ve Sol Dış Boşluk (margin 10x2)
• 300 piksel = Toplam Genişlik

Kısacası kodlama yaparken genişliği iyi hesap etmek için boşluk, kenarlık ve içerik genişliği toplanarak hesaplanmalıdır. Yüksekliği hesap ederken width değeri yerine height değeri ve boşluk, kenarlıklar toplanarak hesap edilmelidir. Şimdi dış boşluğu 20 piksel, iç boşluğu 5 piksel, kenarlığı 3 piksel ve genişliği 300 piksel olan bir kutu oluşturalım:

CSS Kodumuz:
 

   .kutum {

      /* Dış boşluk */
      margin: 20px;

      /* Kenarlık */
      border: 3px black solid;

      /* İç boşluk */
      padding: 5px;

      /* Genişlik */
      width: 300px;

   }
   
Şimdi bu tablomuzun nasıl göründüğüne bakalım:

                                                                       

Yukarıdaki kutumuzun toplam genişliği (20x2)+(3x2)+(5x2)+300 = 356 dır.
 

Tarayıcı Uyumluluğu

Bazı eski tarayıcılar sitenizi hazırladığınızdan farklı gösterebilir. Bu sorunla karşılaşma nedeniniz sayfanızın başında DOCTYPE kullanmamanız olabilir. Bu nedenle uyumluluk için aşağıdaki kodu mutlaka sayfa kodlarınızın başında kullanın.
 

 

CSS Kenarlıklar (Border)

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

                                                          

Ö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

CSS Dış Kenarlık (Outline)

İstiyorsak kenarlığın dışında bir kenar daha çizebiliriz. Bunun için outline komutunu kullanıyoruz. Üç özelliği var:
 

• outline-style
• outline-width
• outline-color

 

outline-style: Kenarlık Stili

Dış kenarlığı burada belirtilen şekillerde çizmemizi sağlar.

 

outline-width: Kenarlık Boyutu

Piksel olarak dış kenarlık boyutunu belirtmemizi sağlar.

 

outline-color: Kenarlık Rengi

Kenarlığın rengini belirlememizi sağlar.

 

Dış Kenarlığın Kısa Kullanımı

Yukarıda sayılan tüm özellikleri tek bir outline koduyla belirtebiliriz.
 

   .kutu1
   {
      outline-width: 1px;
      outline-color: black;
      outline-style: solid;
   }

   .kutu2
   {
      outline: 1px black solid;
   }

   

Yukarıda yer alan kutu1 stilinde bu sayfadaki özellikler tek tek kullanılmıştır. Ancak kutu2 stilinde tek bir kod ile yine aynı stil sağlanmıştır.