CSS yani açılımıyla "Cascading Style Sheets" Türkçe' siyle "Basamaklanmış Stil Katmanları" bir web sitesi içerisinde birbiriyle uyumlu renk ve yazı tipi gibi öğelerin her sayfa için ayrı ayrı değil de tek bir yerden yönetilmesi anlamına gelen bir çeşit kodlama türüdür.
HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.
Örnek vermek gerekirse bir web sayfasında başlığın rengini kırmızı yapalım, yazı fontunu verdana yapalım. Diyelim ki 100 sayfadan oluşan bir web sitemiz var ve her sayfa için biz başlık rengini, yazı tipini ayrı ayrı belirlemeye kalkarsak hem bu bizim çok zamanımızı alacaktır hem de bunların değiştirilmesi gerektiğinde yine her sayfadaki kodu değiştirmek gerekecektir.
CSS burada imdadımıza yetişmektedir ve tek bir harici dosyaya yazacağımız CSS kodu ile tüm site geneline etki etmesini sağlayabiliriz. Bu hem zamandan tasarruf anlamına gelmekte hem de 100 kez yazılacağına 1 kez yazılan kodun sayfa yükleme süresini kısaltması anlamına gelecektir.
Örneğin bu web sitesi, harici bir CSS dokümanı tarafından yönetilmektedir ve içerisinde çok az miktarda kod barındırarak sayfaların hızlı yüklenmesi sağlanmaktadır. Bu sitenin css dokümanını görmek için tıklayınız.
Bir diğer örnek ise; daha önceki teknolojilerle rollover dediğimiz ve menünün ya da resmin üzerine geldiğimizde bize başka renkte bir resmin gösterilmesi şeklindeki sistemi kullanmaktaydık. Bu hem resmin normal hali, hem de üzerine gelindiğindeki ikinci bir hali demekti ve bu sistemde iki adet resim dosyası kullanılmaktaydı. Oysa ki CSS ile sadece bir adet resim dosyası kullanarak rollover efektini kodlar ile tanımlayabiliyoruz ve bu da web sayfalarının hızlı yüklenmesi anlamına gelmektedir.
Bin sayfalık bir sitemiz var diyelim ve tüm sitedeki arka alan rengini (background) değiştirmek istiyoruz. Bunu yapmak saniyelerimizi alacaktır ve sitemizin tümündeki arka alan değişecektir. Ne kadar kullanışlı değil mi?
CSS' in YararlarıDaha iyi ve kolay sayfa kontrolü
Kolay renk yönetimi ve değişimi
Etkin kenar boşluğu denetimleri
Metin biçimlendirme, yazı tipi ve özellikleri belirleme
Geçişler gibi görsel efektler yaratabilme
Görsel konumlandırma kolaylıkları
Tek bir yerden tüm sitenin kontrol edilebilmesi imkanı
CSS kodlaması dünya Web Birliği' nin belirlediği standartlara sahip olmalıdır. Bu standartlara uyulması hem görüntü birliği açısından hem de Google dostu olmasından önem taşımaktadır.
3C Bilişim tüm müşterilerinin web tasarımlarını standart olarak hem XHTML hem de CSS olarak W3C Standartlarına uygunluğunu garanti etmektedir. Bunu da sayfaların altına koyduğumuz doğrulama linkleriyle ispat etmekteyiz.
Bu sayfanın W3C Standartlarında kodlanıp kodlanmadığını aşağıdaki linkden sorgulayabilirsiniz.
CSS Kodlamasını sorgulamak için You are not allowed to view links.
Register or
LoginÖrnek bir CSS kodu:<html>
<head>
<style>
#WikipediaBox{
width:350px;
height:150px;
border:solid 2px}
.WikipediaLogo{
background:url(http://uyanangenclik.com/resimlerim/logo/uyanan.png)}
</style>
</head>
<body>
<div id="uyanan">
<div class="uyanangencliklogoLogo"> </div>
</div>
</body>
</html>
0 Yanıt
3128 Gösterim