CSS Dünyasına Giriş
CSS teknolojisi 1993′ten bu yana gelişen bir teknolojidir. Bu teknoloji ile web sayfalarındaki kalınlıklı tablolar yerini 0 kalınlığa sahip daha ince ve düzenli div taglarına bırakmaya başladı. <table> </table> tagları artık nerdeyse kulalnılmaz hale gelmiştir. Bunun en temel sebeblerinden biride arama motorlarının ataklarıdır. Arama motorları botlarında minimum sayfa ağırlığı ile maximum hıza entegreli olarak çalışmaya başlamışlardır. Tablolar sayfada ağırlık yarattığı, kod sayısını çoğalttığı ve sayfa yapısını profesyonellikten çıkarttığı iddası ile artık div tagları ve css kodlarına ağırlık verilmesine önem verilmiştir.
CSS kodları web tasarımı aşamasında üç şekilde kullanılabilir;
1-) Sayfa içinde CSS kodları
Bu kodlama çeşidi pek rağbet görmez. Bunun sebebi sayfa içi kod yoğunluğunun fazla olmasından kaynaklanmaktadır.
Örnek olarak bir tablo yapısı ;
Görüldüğü gibi basit bir tablo yapısı oluşturmak için bir hayli kod harcandı. İşte bu sebebten dolayı bu seçenek fazla kullanılmamaktadır.
2-) <head>… </head> tagları arası CSS Kodları
<head>
<style type=”text/css”>
<!–
.deneme{
width:500px;
height:100px;
background-color:#999999;
border:#333333 1px solid;
margin-bottom:5px;
margin-left:2px;
margin-right:2px;
margin-top:5px;
}
–>
</style>
</head>
<div class=”deneme”></div>
Burada ise <head> talgarı arasında CSS dili taglarını oluşturduk. Ve içerisinde bir deneme class’ına bu tabloda yapmak istediğimiz kodları yerleştirdik. Daha sonrada <div class=”deneme”> burada ise bu class ı bu <div< tagına eşledik ve aynı sonucu aldık. Fakat bu kulalnımda birden fazla onlarca sayfası olan web sitesi tasarımında pek kullanılmamaktadır.
3-) CSS Dosyaları
İşte en çok kullanılan ve en çok işlevi olan CSS dosyası oluşturma ve sayfamıza çağırma işlemi.
İlk önce style.css adında bir dosya oluşturuyoruz. Dikkat ederseniz uzantısı .css ile bitiyor. Sonra editörümüz ile açıyoruz ve içine şu kodları koyuyoruz.
width:500px;
height:100px;
background-color:#999999;
border:#333333 1px solid;
margin-bottom:5px;
margin-left:2px;
margin-right:2px;
margin-top:5px;
}
Bu dosyayı index.html dosyamız ile aynı klasör ve(ya) aynı dizine atıyoruz.
Sonra index.html dosyamızda <head> tagından sonra şu konu ekliyoruz.
Bu kod style.css dosyamızın index.html dosyamıza import etmeye yarıyor yani 2. seçenekteki örneği düşürüsek <head> tagları arasında stlye kodumuzu bir nevi tek bir dosyada toplamış ve bunu index.html dosyamıza çağırmış olduk.
Şimdi index.html dosyamızda <body> tagları arasında tablomuzu oluşturabiliriz.
Kod:
Gördüğünüz üzere aynı işlemi 3 ayrı şekilde yapmış olduk. Profesyonellik ve pratiklik için 3. seçeneği kullanmanızı tavsiye ederim.
Bol CSS’li günler.
Yazar : rgisler
Kaynak : CSS Dünyasına Genel Bir Bakış
Son Yorumlar