CSS Dersleri Bölüm 1 – Giriş ve Söz dizimi
Css öğrenmeye başlamadan önce HTML veya XHTML bilmeniz gerekmektedir. Bilmiyorsanız buraya tıklayarak öğrenmeye başlayabilirsiniz.
Css Nedir?
Css yığma stil dosyasıdır.
- Stiller HTML elementlerinin nasıl gösterileceğini tanımlarlar.
- Stiller bir problemi çözmek için eklenmişti HTML 4.0’a.
- Harici Stil dosyaları birçok işten kurtarır.
- Harici stil dosyaları CSS dosyalarında tutulur.
CSS’e ait bir demo var. Bunu görüntülemek için buraya tıklayın; ilk üçü farklı stillere sahip, without yazan stilsiz görünüm ve alttaki üçü de stil dosyalarının içerikleridir.
Stilleri büyük bir problemi çözdü
HTML, bir belgeyi biçimlendirmek için etiketler içeren bir şekilde tasarlanmamıştı.
Bir belgenin içeriğini belirlemek için tasarlanmıştı; tıpkı:
<h1>Bu bir başlık</h1>
<p>bu bir paragraf</p>
HTML 3.2’de <font> etiketi gibi etiketler eklendiğinde web geliştiricileri için bir kabus oldu bu durum. Büyük siteleri geliştirmek, fontları ve renk bilgilerini tek tek er sayfa için değiştirmek uzun ve pahalı bir süreç haline geldi.
Bu problemi çözmek içinse; WWW konsorsiyumu CSS’i oluşturdu.
HTML 4.0’da tüm formatlar HTML belgesinden arındırıldı ve ayrı bir css dosyasında barındırılmaya başlandı.
Günümüzde tüm tarayıcılar css’i desteklemekte.
CSS bizi iş yükünden kurtardı
CSS HTML elemanlarının nasıl gösterileceğini tanımlar.
Bu sayede birçok sayfaya bağlı olan css dosyasını değiştirdiğimizde tüm sayfalarımız da değişecektir. Bizleri uğraştan kurtaracaktır.
CSS’te söz dizimi
Birinci örnek için tıklayın;
ikinci örnek için tıklayın.
Bir CSS kuralı iki ana bölümden oluşur; birisi seçici, bir veya daha fazla da tanımlayıcısından oluşur.
Yukarıdaki resim için h1 elementinin(stil vermek istediğiniz element ya da ) olduğu kısım seçici, declaration’ların olduğu yerler de tanımlayıcılar ve tanımlayıcılar da h1 gibi elementin özellikleri ve değerlerinden oluşur ve süslü parantez kapanır noktalı virgülden sonra.
CSS örneği
p
{
color:red;
text-align:center;
}bu örnek paragraf etiketini kırmızı renge ve yazıyı da merkeze alarak şekillendirir.
CSS Yorumları
Yorumlar yazdığınız kodları açıklamak içindir ve sonraki zamanlarda düzenleme yaparken size yardımcı olur. Yorumları tarayıcılar yok sayar.
Bi CSS yorumu /* ile başlar ve */ ile biter.
Örnek;
/*Burası yorum satırı ve p paragrafı temsil ediyor etiket olarak*/
p
{
text-align:center;
/*Bu da başka bir yorum tanımlama kısmında yer alıyor.*/
color:black;
font-family:arial;
}