HTML bize web sayfamızda metin biçimlendirme alanında temel biçimlendirme yöntemidir.Bi sayfanın kemik yapısı diyebileceğimizi esas kısmını html ile kolay bir şekilde yapabiliriz.Ancak bu çoğu zaman yeterli olmaz.Hele ki günümüz teknolojisi için ilkel denilebilecek bi yapıdır.Tam bu noktada CSS yardimimiza kosuyor.Css web sayfalarinin görünümünü degistirmemizi saglayan stil dosyasidir.Web sayfasını bir bütün şeklinde veya tag dediğimiz yapılarla belirtilen belli ögeleri arkaplan resmi,arkaplan rengi,sayfadaki konumu,sağ ve solundan ne kadar boşluk olacağı öğenin genişlik ve yüksekliği ve çok daha fazla özellik ile sayfada harikalar yaratabilirsiniz.
HTML’i vücutta iskelet sistemine benzetecek olursak CSS içinde o sistemi birarada tutan,deri gibi hepsini tek bi şekilde birleştiren yapı diyebiliriz.
CSS ögrenmek için gereken en önemli bilgi Temel HTML bilgisine sahip olmamızdır. HTML bilmeden CSS kodlarini kullanmaniz çok zor olacaktir.Çünkü ikisi içiçe geçmiştir.
Tek bir CSS dosyasiyla bütün sayfalarinizin stilini olusturabilecegimiz için bu sayfalarimizin boyutu küçülür ve sayfaların boyutu düşeceğinden yüklenmesi daha kolay olacaktır.CSS te HTML gibi öğrenmesi dillere göre öğrenmesi kolay ama fazlasıyla özelliği olan bir yapıdır.
CSS konusunda Internet Explorer, Mozilla Firefox, Google Chrome, Opera, vb browserlar css dosyanızı farkli yorumlayabilir.Boyle bir durumda Chromeda harika görünen bir sayfa farklı bir browserda içiçe geçmiş bir halde karşınıza çıkabilir.Hazırlıklı olun 🙂 Tabi bunun da çözümleri var.
Bir CSS dosyası oluşturmak için özel bir platforma ihtiyaç yoktur.Bir notepad sayfasına stil tanımlamalarımızı yapıp .css uzantılı olarak kaydettiğimizde bu dosyayı sayfamızda kullanabiliriz.Ancak daha özel ortamlarda var ve bunlardan b iri Microsoftun ürünü olan Expression Webtir ki dizayn konusunda da faydalı bir platformdur.Oluşturduğumuz CSS dosyalarını sayfalarımızda 3 farklı şekilde kullanabiliriz. Bunlar Yerel CSS, Genel CSS ve Harici CSS’dir.
Yerel CSS, sadece sayfa içerisinde tanimlandigi tagde geçerlidir.Sadece o tagin düzenlenmesini sağlar.
Buna karsilik genel stil sablonu ise tüm sayfayi kapsar.Bu stil şablonu da sayfanın içerisinde yazılır.Ancak global bi biçimde tüm sayfada geçerlidir. Harici stil sablonu ise ‘.css’ uzantili bir dosya olarak kaydedilir, kullanilacagi sayfalarda çagirilmak suretiyle tüm web sitesini kapsayabilir.CSS dosyasını head tagleri arasında
[php]<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> [/php]
şeklinde yazılabilir.
Bunları kısaca örneklendirecek olursak;yerel css’te
[php]<a href="<a href="http://seydialkan.com/">www.seydialkan.com</a>" style="color:blue; background:green; font:13pt Arial;">Seydi Alkan Kişisel Web Sayfası</a> [/php]
şeklinde html tagleri arasında style özelliği ile istediğimiz değişiklikleri buraya yazabiliyoruz.
Genel Css te ise head tagleri arasına yazdığımız style tagı ile stil şablonlarını yazıyoruz.
[php]
<head>
<style>
a{color:red;font:18pt Arial;}
p{width:50px; height:5px; background-color:blue;}
</style>
</head>
[/php]
Harici CSS te ise sayfanın yazıldığı kısımdan bağımsız ayrı bir dosyada stil şablonlarını yazarız.Daha sonra bunu yukarıdaki gibi sayfamıza ekleriz.
a{font-color: blue; margin: 5px;}
p{font:12px;}
div{width:100px; height;100%;}
kodudur. Kodu kendinize göre düzenleyip HTML sayfaniza eklediginizde CSS dosyanizdaki kurallar sayfaniza etki etmeye baslayacak
Özelliklere giriş yapacak olursam yazı fazlasıyla uzayacak o yuzden başka bir yazıda devam etmeyi düşünüyorum.