CSS Kutu Modeli

Web tasarım derslerimizin CSS bölümüne devam ediyoruz. Herkese iyi dersler.

CSS’te Kutu Modeli

Web tasarımlarımızda tüm HTML öğelerini bir kutu olarak kabul edebiliriz. CSS’te kutu modeli terimi genellikle tasarım ve yerleşim konuşulurken kullanılır.

Aslında her HTML öğesinin etrafında bir kutu vardır. Bu kutu kenar boşlukları, kenarlıklar, dolgular ve asıl içerikten oluşur.

• Content (içerik) – Metin, resim gibi içeriklerin bulunduğu alan
• Padding (dolgu) – İçeriğin etrafında, kenarlığın içinde kalan boşluk
• Border (kenarlık) – Dolgu ve içeriğin çevresini saran, stil verilebilen sınır
• Margin (kenar boşluğu) – Kenarlığın dışında kalan, şeffaf boşluk

Kutu modeli, öğelerin etrafına kenarlık ve boşluk eklemenizi sağlar.

Bir kod örneği vererek tam olarak ne yapmak istediğimizi gösterelim.

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Bir Elemanın Genişliğini ve Yüksekliğini Ayarlamak

Bir öğenin genişliğini ve yüksekliğini tüm tarayıcılarda doğru ayarlayabilmek için bahsettiğimiz kutu modelinin mantığını anlamanız gerekir.

Aşağıdaki kod örneğinde toplam genişliği 350px olan bir stil ayarlanmıştır.

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

İşte matematiksel hesaplaması:

Bir öğenin toplam genişliği şu şekilde hesaplanır:

Toplam genişlik = genişlik + sol dolgu + sağ dolgu + sol kenarlık + sağ kenarlık + sol kenar boşluğu + sağ kenar boşluğu

Bir öğenin toplam yüksekliği ise şu şekilde hesaplanır:

Toplam yükseklik = yükseklik + üst dolgu + alt dolgu + üst kenarlık + alt kenarlık + üst kenar boşluğu + alt kenar boşluğu

Not: Günümüzde çoğu sitede box-sizing: border-box; kullanılır. Bu ayarla width ve height değerleri dolgu ve kenarlığı da kapsar; yani yukarıdaki öğeye width: 350px yazdığınızda toplam genişlik 350px olur.

CSS Anahat (outline)

CSS outline özelliği, öğenin kenarlığının dışına bir anahat çizer; anahata renk, stil ve kalınlık verebilirsiniz.

Ancak anahat özelliği kenarlık özelliğinden farklıdır: Anahat öğenin boyutlarına dahil değildir, dolayısıyla diğer öğelerin yerleşimini de etkilemez.

Anahat stili

Aşağıdaki örnek önce her paragrafın etrafına siyah bir kenarlık çizer, ardından farklı anahat stillerini gösterir.

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Anahat Rengi

outline-color özelliği anahat rengini belirlemek için kullanılır.

Anahat rengi şu şekillerde ayarlanabilir:

• İsim – “red” gibi bir renk adı girilebilir
• RGB – “rgb(255,0,0)” gibi bir RGB renk değeri girilebilir
• Hex – “#ff0000” gibi bir renk kodu girilebilir

Örnek:

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Anahat Kalınlığı

outline-width öğeye anahat kalınlığı verir.

Kalınlık px, pt, cm, em gibi birimlerle ya da thin, medium, thick değerleriyle verilebilir.

Örnek:

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Anahat Kodu Kısa Kullanımı

Bazen kodları uzun uzun yazmak zor gelebilir. Bu gibi durumlarda kodumuzu kısaltmak için güzel bir yöntem kullanırız.
Hemen bir örnekle açıklayalım:

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

Web tasarım derslerimizin bu bölümünü de bitirmiş bulunuyoruz.
Bir sonraki derste görüşmek üzere.