CSS'de bileşenler genellikle dikdörtgen kutular veya şeritler olarak işlenir. Kutuların tanımı için aşağıdaki - artık size tanıdık gelen - özellikler kullanılır:
• width – Bileşenin genişliği
• height – Bileşenin yüksekliği
• left – Sol başlangıç mesafesi
• right – Sağ başlangıç mesafesi
• top – Üst başlangıç mesafesi
• bottom – Alt başlangıç mesafesi
• margin – Dış kenar boşluğu
• border – Bileşeni saran çerçeve
• padding – İç kenar boşluğu, yani çerçeveden içerik bölgesine olan mesafe
Bu özellikler önceden tanıtılmıştı.
Bir bileşenin toplam genişliği, verilen ölçülerin toplamıdır. (Aynı durum yükseklik için de geçerlidir).
Bir örnek:
div#box {
width: 100px;
padding: 20px; /* her iki tarafı da 20px /
border: 2px solid; / her iki tarafı da 2px /
margin: 0 30px; / her iki tarafı da 30px */
}Bu div alanının genişliği nedir? Tek tek değerlere bir göz atalım:
• 100 Piksel
• 2 Defa 20 Piksel
• 2 Defa 2 Piksel
• 2 Defa 30 Piksel
Bu, bileşenin toplam genişliğinin 204 Piksel olduğunu gösterir.
Bileşenlerin genişliği ve yüksekliği width ve height ile belirlenir. Bu değerler Stil Sayfasında açıkça belirtilmemişse aşağıdaki kurallar geçerlidir:
• width eksikse, kutu etrafındaki eleman kadar genişlikte olur.
• height eksikse, elemanın içeriği kadar yükseklikte görüntülenir.
Bir örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* her iki tarafı da 2px */
margin: 0 30px; /* her iki tarafı da 30px */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Tarayıcıda görünen şu şekildedir:
div öğesinin üst öğesi body'dir. Dolayısıyla öğe gerçekten body öğesi kadar geniş görünür. Yükseklik ise içeriğe yöneliktir.
Her Şey Sıfır
Her tarayıcının yerleşik bir Stil Sayfası vardır. Bu Stil Sayfalarında bazı varsayılan değerler tanımlanmıştır. Bu, örneğin padding ve margin için de geçerlidir. Ve bu varsayılan değerler maalesef farklı tarayıcılarda değişmektedir. Bu yön, tarayıcılarda kutu modeliyle ilgili benzer sonuçlar elde etmeyi zorlaştırır. Bu nedenle, tarayıcılarda varsayılan olarak belirlenen boşlukları sıfıra ayarlamak faydalı olabilir. Bunu şu şekilde yapabiliriz:
* { padding: 0; margin: 0; }
Bu satırı Stil Sayfanızın başına ekleyin. Bu şekilde artık kutuları istediğiniz konumlara yerleştirmeye başlayabilirsiniz.
Kutu Türleri
Bir öğenin sonuçta nasıl gösterileceği ve diğer öğeleri nasıl etkileyeceği, öğenin türüne bağlıdır. Aslında CSS spesifikasyonu Blok Öğeleri ve Satır İçi Öğeler arasında ayrım yapar. (Bu konumda göz ardı edildiği için, yalnızca Blok ve Satır İçi Öğeleri ele alınmaktadır).
Blok öğeler her zaman yeni bir satır oluşturur. Ardışık öğeler de yeni bir satırda başlar. Tipik blok öğeleri, örneğin p, div, h1, ul vb. Bu öğeler için önce belirtilen Dış Kenar Boşluğu, İç Kenar Boşluğu, Yükseklik, Genişlik ve Çerçeve özellikleri geçerlidir.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Tarayıcıdaki sonuca bakıldığında, h1 ve p'nin her birinin kendi satırını oluşturduğu görülür.
Satır İçi öğeler ise kendi başlık oluşturmaz, bunun yerine normal metin akışında gösterilirler. Tipik Satır İçi öğeler, span, em, strong, img, br vb.'dir. Satır İçi öğeler için dikey dış boşluklar ve genişlik-yükseklik belirtileri geçerli değildir.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Ve işte sonuca bir bakalım:
Artık blok öğeleri olan elemanları iç içe geçirme imkanınız var.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Bir resim her zaman bütündür</em>. Ancak izleyicinin nereye ilk bakması gerektiğini her zaman düşünmek gerekir.</p>
</body>
</html>Çıktıyı tarayıcıda görüntüleyin.
h1 başlığının arka plan rengi, elemanın tüm genişliğe yayıldığını gösterir. Genişlik üst öğe olan body elemanına göre belirlenir.
Şimdi display özelliği devreye giriyor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Bir resim her zaman bütündür</em>. Ancak izleyicinin nereye ilk bakması gerektiğini her zaman düşünmek gerekir.</p>
</body>
</html>display: inline ile elemanın genişliği değişir.
Gerçekten de eleman genişliği şimdi mevcut içeriğe göre ayarlanıyor. Hangi değerlerin display özelliğine atanabileceği hakkında bir genel bakış:
• none – görüntüleme yok
• block – elemanı blok olarak gösterir, yani yeni bir satır oluşturur.
.....
Bu, öğelerin konumlandırılmasıyla ilgili olarak önemli bir rol oynar. Daha fazlası ileriki öğreticilerde.
