web-programlama

Tüm CSS elemanları birer kutu olarak düşünülebilir. CSS'te tasarım ve düzenden bahsediliyorsa, "Kutu Modeli" terimi kullanılır. CSS Kutu Modeli esasında HTML bileşenlerinin etrafını saran ve margin (kenar mesafesi), border (sınır), padding (boşluk) ve content (içerikten) oluşan elemanlardan ibarettir.

CSS Kutu Modeli, bize elemanların etrafına bir sınır ekleme (border) ya da elemanlar arasında bir boşluk (padding) tanımlama olanağı sağlar.

Aşağıdaki şema, CSS Kutu Modeli elemanlarını daha iyi kavramanıza yardımcı olacaktır:

Tablo renklerini istediğiniz gibi değiştirebilirsiniz. Bu eğitimimizde göreceğiniz üzere sınır renkleri, metin ve zemin rengi atamaları, <th> elemanının içinde gerçekleştirilmektedir:

table, td, th {
    border: 2px solid yellow;
}

th {
    background-color: pink;
    color: white;
}

background-color ve color özellikleriyle arka zemin ve yazı renklerini kolayca ayarlayabilirsiniz. Dilerseniz, tablonun border özelliğini kullanarak çerçevenin kalınlığı ve renginin nasıl değiştirildiğini de deneyebilirsiniz.

Bir tablonun sınırı ile içerik arasındaki boşluğu ayarlamak için td ve th elemanları üzerinde padding özelliği kullanılır. Şimdi örneğimizle içerideki boşluğu 17 piksel (px) yapalım. Bunun için aşağıda gördüğünüz gibi, istediğimiz boşluk miktarını td parametresinin içinde padding özelliğine piksel cinsinden söyleyebiliriz:

td {
    padding: 17px;
}

Şimdi HTML dosyasında nasıl kullandığımıza bakalım:

Tabloya metin yerleştirmek için, text-align ve vertical-align özellikleri kullanılır. text-align özelliği, yatay yerleştirmeyi belirler; değerleri, left (sol), right (sağ) ya da center (merkez, ortala) olabilir.

td {
    text-align: right;
}

Vertical-align özelliğiyse hücre içinde düşey doğrultudaki atamayı gerçekleştirir; değerler, top (üstte), bottom (altta) veya middle (ortada) olabilir.

Bir tablonun ebatları, width (genişlik) ve height (yükseklik) özellikleriyle belirlenir. Aşağıdaki örnek kod ile bunlarla ilişkili atamalar yapacağız:

CSS'in sağladığı araçlarla HTML'in tablo oluşturma olanakları büyük ölçüde iyileştirilmiştir. Bu eğitim içeriği ve alt içeriklerinde tabloları nasıl daha güzel ve kullanışlı tasarlayacağınızı göstereceğiz.

Tablo sınırları

CSS'te tablo sınırlarını belirlemek için border özelliğini kullanmalısınız.

table, th, td {
   border: 2px solid black;
}

Aşağıdaki örnek, tablo, th ve td elemanları için siyah sınırlar belirliyor:

Bir CSS kural kümesi, bir seçici (selector) ve bir bildiri bloğundan (declaration block) oluşur. Selector, biçim (style) bilgilerini yükleyeceğiniz HTML elemanını işaret eder. Declaration block (bildiri bloğu) bir ya da daha fazla bildiriden oluşur. Değiştirilmek istenen birden fazla özellik varsa bildiriler arasına ";" sembolü konur. Her bildiri, bir özellik adı (property name) ve bir değer (value) içerir. Aralarına ":" sembolü yerleştirilir.

Bir CSS bildirimi daima bir noktalı virgül sembolüyle sonuçlanır ve bildiri grupları "{}" sembolleri arasına alınır.

CSS öğrenmeye başlarken ön koşul, temel düzeyde HTML ve XHTML bilgisidir. CSS, Cascading Style Sheets (Basamaklı Biçim Sayfaları) ifadesinden oluşturulmuş bir kısaltmadır. Biçimler (styles), HTML elemanlarının nasıl görüntüleneceğini tanımlar.

HTML ve stil sorunu

HTML'de, bir belgeyi biçimlendirmek için kullanılabilecek etiketler mevcut değildir. HTML etiketleri, bir belgenin içeriğini tanımlamak için kullanılır.

HTML formları kullanıcıdan veri almak için kullanılır. 

<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur. Bu eğitimde bu elemanların bazılarını nasıl kullanacağınızı öğreneceğiz. İlerleyen 201 HTML5 & CSS derslerinde ise HTML5 ile gelen yeni form elemanlarını göreceğiz.

En basit haliyle bir form oluşturalım:

<form>
<!-- Form elemanları -->
</form>

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.

Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.