Css Nedir? (Cascading Style Sheets) Css ile neler yapılır? Css kodları açıklamaları ve örnek kullanımları
Css Nedir?
Css'in açılımı (Casading Style Sheets)'dir.Css, Html'den bağımsız olarak bir web sayfasındaki tüm Html elementlerine ve taglarına etki eden bir web teknolojisidir. Kısaca bahsetmek gerekirse Html'de kullandığımız div,p,span,container vs tagların tümüne etki edebilir. Ayrıca dökümanlar,videolar,ses dosyaları, arkaplanlarada etki edebilir. Etki edebilirden kastımız şudur yani bir web projesindeki arkaplanlar yazı renkleri, yazı fontları, şekiller vs gözünüzle görebileceğiniz hemen herşeye Css sayesinde inşa edebilir ve isteğiniz şekle sokabilirsiniz. Css'i web projelerimizde kullanabilmemiz için Css'i projemize dahil etmemiz gerekir.Örnek olarak;
[<link rel="stylesheet" type"text/css" href="dosya.css">]
kodunu head taglarımız arasına yazdığımız zaman artık Css kodlarımızı yazıp Html dökümanımıza etki edebiliriz. Css'de kod yazmak oldukça basit ve esnektir. Css'de kod yazmamız için bilmemiz gereken üç unsur vardır bunlar seciçi,özellik ve değerdir. Bir örnekle açıklayalım;
seçici{özellik:değer;}
Yukarıda gördüğünüz şablondaki gibi kodlarımızı yazmamız gerekir mesela;
body{background-color:red;}
Yukarıdaki kodumuzu açıklayacak olursak "body" bir seçicidir yani burada demiş oluyoruz ki "body" alanına yazacağımız özelliği yap ve geçiyoruz özelliğimize "background-color" burada ise özellik olarak seçicimize yani "body" seçicisine bir arkaplan rengi belirleyeceğimizi söylüyoruz ve son olarak değer kısmına geldğimizde ise "red" yani son olarak body seçicimize bir arkaplan renklendirmesi istedik ve arkaplan renklendirmemizinde kırmızı olması gerektiğini söymiş olduk. Css bu kadar basit çalışma mantığına dayanır. Fakat unutulmaması gereken yazım kulları vardır dikkat ettiyseniz seçiciden sonra süslü parantez açtık ve özelliğimizi yazdıktan sonra iki nokta üst üste kullandık (:) ardından değermizi yazdıktan sonra noktalı virgül (;) ile sonlandırdık yazım kullarınada dikkat ettiğiniz sürece Css ile web projelerinize isteğiniz şekli verebilirsiniz.
COMMENTS