CSS Güzellemeleri

Nedir CSS? Size sözlük anlamını ve açılımını anlatacak değilim, benim için; hayat kurtarandır. Tonlarca kod yazmaktan alıkoyan ve insanların kendi tarzlarını kodlamaya yansıtmalarını sağlayan bir internet yaşam biçimidir.

Ders anlatır mahiyette bir açıklama yapmayacağım ama çok basit bir özellik göstererek CSS güzelliğinden bir parça anlatmak isterim.

Bildiğiniz üzere CSS’de class (sınıf) atama, ID (#) girerek tanımlama ya da etiket belirterek (body, table v.s.) biçimlendirme vardır. Bunun yanında HTML ile bütünleşik olarak kodun içindeki koda farklı özellikler de atanabilir. Ama benim esas anlatmak istediğim iki durum var;

  1. İki farklı tanımın (mesela class’ın) kesiştiği biçimler
  2. Eksi (-) margin değerleri ile oluşturulan harikalar

İki farklı tanımın (mesela class’ın) kesiştiği biçimler

Bu yöntem oldukça ilginçtir. Örneğin iki farklı class ile farklı biçimlendirmeler verdiğimizi düşünelim. Bunun yanında bu ikisinin aynı nesneye atanması ile yepyeni bir özellik ortaya çıkardığımızı. Örnekle açıklayalım. İlkin herhangi bir yazımıza “sarı” renk özelliği veren “Sari” classı oluşturalım;

.Sari {color:#FF0}

Bu classın atandığı nesne gördüğünüz üzere SARI oldu.

HTML kodu: <span class=”Sari”>SARI</span>

Şimdi “Mavi” classı ile mavi renkli başka bir yazı oluşturalım.

.Mavi {color:#0FF}

Bu classın atandığı nesne de gördüğünüz üzere MAVİ oldu.

HTML kodu: <span class=”Mavi”>Mavi</span>

Şimdi ise YEŞİL bir renk elde etmek istediğimizi farzedelim. Gerçek dünyada sarı ile mavi rengi karıştırdığınızda yeşil renk elde edersiniz. Gerçekten öykünerek her iki classın atandığı bir nesne oluşturalım, HTML kodumuz şöyle olmalı;

<span class=”Sari Mavi”>YEŞİL</span>

Ama durun bir şeyi atladık, gerçek dünyada değiliz, Sari ve Mavi classlarının birleşimini de CSS’de tanımlamamız gerekiyor :) Yani şöyle;

.Sari.Mavi {color:#0FF}

Classların nokta (.) ile başladığını ve CSS’de class isimlendirmelerinin numara ile başlayamayacağını hatırlatarak burada önemli olan noktayı belirteyim. İki classın kesişiminin gerçekleşmesi için classların bitişik yazılması ve arada boşluk olmaması gerekiyor. Eğer boşluk olursa bu sefer .Sari classı içindeki .Mavi classlı nesne için tanımlama yapılmış olur. (Pseudo class, yani çocuk nesnelerin biçimlendirmesi)

Kesişim yöntemleri olarak etiket ile class birleşimlerini yapabilirsiniz. Örneğin;

a.buton { color:#c00}

input.buton { color:#FFF}

Burada <a class=”buton”> etiketi için kullanılan “buton” classı için yazı rengini kırmızı verirken , <input class=”buton”> etiketi için kullanılan aynı isimli “buton” classı için beyaz vermiş oluyoruz. Bir başka örnek;

#Mor.Sari { color:#93F}

Burada ise kimliği (ID) “Mor” olan herhangi bir nesneye “Sari” classı verdiğimizde atanacak rengi tanımladık.

Örnek HTML: <p id=”Mor” class=”Sari”>YAZI</p>

Gördüğünüz gibi ID’si Mor olan ve classı .Sari olan herhangi bir nesne için apayrı bir biçimlendirme verdik, en yukarıdaki .Sari classına ait biçimlendirme sonrakiler tarafından iptal edildi.

Bir hatırlatma daha; CSS’de class, id veya etiket tanımlaması yapıldığında isimlendirmelerde boşluk olmamalı. Yani “.Bicimlendir Beni” şeklinde bir class ismi yada “#Kimlik No” gibi bir ID tanımlaması çalışmayacaktır.

CSS’de kesişim yöntemi Internet Explorer 6 ve alt sürümlerde çalışmamaktadır.

Eksi (-) margin değerleri ile oluşturulan harikalar

CSS geliştirildikten sonra “stupid table” tabiri ortaya çıktı. Yani “aptal tablolar”.

Tablolarla oluşturulan layout – sitenin genel şablonu – çok fazla kod içeriyordu ve tablolar gereksiz yere yüzlerce satır işgal ediyordu. Ayrıca siteler kodun tamamı yüklenmeden görünmüyor bu da kullanıcıyı bekletiyordu. (56K bağlantıların olduğu zamanlarda bunun ne denli önemli olabileceğini gözardı etmemeli)

Sonrasında DIV ve CSS birleşimi ile oluşturulan şablonlar kullanılmaya başlandı ve sonuç: %20’ye yakın daha az kod, daha hızlı yüklenen ve tamamı yüklenmeden gösterilmeye başlanan web siteleri ve mobil cihazlar için kabul edilebilir boyutlar.

DIV ile oluşturulan şablonlarda margin, padding, float ve clear özelliği fazlasıyla kullanılır. Ben burada eksi (-) margin değerleri ile nelerden kurtulduğumuzu anlatacağım. Bunu bir örnekle vermek istiyorum:

Birinci kutu
İkinci kutu

Elde etmeye çalıştığım görüntü “İkinci kutu” yazan şekil. Birinci kutu yazan şekli elde etmek tablolarla zor değil ancak ikinci kutu için benim en az bir adet görsele ve iç içe kullanılmış iki tabloya ihtiyacım var. Burada ise aşağıdaki kodları kullandık;

CSS Kodları:

.Kutu {background-color: #F90;padding: 10px;width: 200px;margin:10px 0px;}

.Icerik {background-color: #666; border: 1px solid #F60; color: #FFF;padding: 5px;}

.Eksi { margin-left:10px; width:190px}

.Eksi .Icerik { margin-left:-20px;}

HTML Kodları:

<div class=”Kutu”>

<div class=”Icerik”>Birinci kutu</div>

</div>

<div class=”Kutu Eksi”>

<div class=”Icerik”>İkinci kutu</div>

</div>

Bu görünümü tablolar ile oluşturmaya çalışmak çok fazla kod gereksiniminin yanı sıra fazladan görsel oluşturmak gibi bir mecburiyet getirebilir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir