CSS NEDİR ?

CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı ise, (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları) HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. CSS konusuna devam etmeden önce temel düzeyde HTML bilgisi gerekiyor. HTML için tıklayınız.


Sola Dayalı Resim

İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir. Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün Web sayfalarında ortak olarak kullanılabilir. Böylece sayfaların hafızadaki boyutu epey küçüldüğü gibi güncelleme yapmak da kolaylaşır.

CSS kodları, HTML kodlarının içinde <BODY> ... </BODY>bölümüne yazılabildiği gibi, harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. HTML kodlarının içinde yeralması yanlızca o HTML dosyası için geçerli olacağından, hem HTML kodları ile birbirine karışmaması, hemde aynı biçim özelliğinde bir çok HTML dosyası için <HEAD>... </HEAD> bölümünde <link href="dosyaadi.css" type="text/css" rel="stylesheet" /> koduyla CSS dosyası çalışma sayfasına eklenebilir. Onları ayrı dosyada veya dosyalarda saklamak, onları aynı biçim özelliklerine sahip birçok HTML sayfalarında kullanılmasını sağlar.

CSS kodları yazılırken "DIV" tagı kullanılır, DIV'in karşılığı tabloda (TABLE) bir hücre ile eş anlamlıdır, CSS yokken HTML sayfaları tablo ve hücrelerden oluşarak biçimleniyordu, ama madem CSS çıktı tablolar artık sayfa biçimlendirmesinde kullanmaya gerek kalmadı. tablolar sadece tablo formatında görsel listelemelerde kullanılmaktadır. DIV'in ne olduğunu kavrayabilmemiz için örneğimize atınız, örneğimizde de göründüğü üzere, bir CSS dosyası hazırlanıp biçim parametreleri belirtilir, sonra bu CSS dosyası referans verilerek bir HTML dosyası hazırlanıp kaydedilir. sonuçta CSS dosyasında belirtilen parametreler biçimide bir web sayfası elde edilir. burada önemli konu CSS dosyasındaki DİV ismini HTML dosyasında <BODY> ... </BODY> tagları arasında belirtmemizdir. DİV konusunda ilerde daha geniş bilgiler aktarmaya çalışacağım.

CSS dosyası sayesinde tek bir değişiklik yaparak aynı biçim özelliğinde sahip bir çok HTML sayfasında aynı değişiklik yapılır, mesela metin biçimi ve rengi, art alan rengi ve artalan resmi, DİV içinde bir objenin pozisyonu vs. vs gibi.

Stiller CSS uzantılı dosyalara kaydedilerek kullanılırsa, görüntüyü hızlı ve etkili bir şekilde değiştirmenize yarar, düzenlemesi kolaydır, web sitenize kod fazlalığı yaratmaz. Biraz abartı oldu mu diyorsunuz?. Ancak şurası kesin. Bizim İşimizi eskiye nazaran çok kolaylaştırıyor.

KULLANIM KOLAYLIĞI

HTML'de her elmente artı özellikler eklemek için başka bir element ve özellik eklememiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

:::html sayfasında;
<h1><font color="blue"> Başlık </font></h1> Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS'de aynı işlem için

:::css dosyasında;
h1 {
color: blue;
}
hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

Ayrıca, tek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.

TASARIM TUTARLILIĞI

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. HTML göre %50'ye varan performans ve hız artışları olacaktır.

CSS konusunda size yardımcı olacağımı umuyorum.

  

Copyright © 2018 Hüseyin Tepe