Zeki Can - WordPress
CSS Kodlarının Yapısı
CSS’nin “Cascading Style Sheets” kelimesinin baş harflerinden oluştuğunu ve bir kısaltma olduğunu öğrenmiştik bundan önceki ‘Css Nedir?’ adlı yazımızda. Basamaklı Stil Sayfası anlamına gelmekteydi ve stiller, bir HTML elementinin nasıl görüneceğini belirlemizi sağlıyordu.
Css Kodlarının yapısına baktığımızda bir css kodunun iki temel bileşeni vardır. Bunlardan ilki element ve stilleri birbirinden ayıran seçim dediğimiz kısım diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.
Seçim stilini belirlemek istediğimiz HTML elementidir. Seçime örnek verirsek h1, h2, h3, p, a, body’lerdir.
İfadeler ise özellik ve değer’den oluşan iki ifade arasının virgülle ayrıldığı ve tüm ifadelerin parantezler içine alınması ile oluşturulur. Bunları alttaki şemamızı inceleyerek daha açık bir şekilde ele alalım.
HTML > Bu kısmımız Seçim kısmımızdır ve bir html’le elementidir. Bu elemente parantez içinde ifademizi tanımlamışız. Farkettiğiniz üzere ifade kısmımız iki bölümden oluşuyor. Özellik ve Değer bölümleri. Özelliğimize değerimizi verirken aralarına iki nokta kullanılır.İki noktadan sonra değer kısmı vardır. Orda gördüğünüz # ifadesi değer bölümünün bir özelliği değildir. color yani renk değeri verdiğimizden # ifadesi ile başlayıp 333333 diye biten ifade rengin kodudur. Ve siyaha benzer bir renktir.
Değer bölümü bittikten sonra kapanış her zaman noktalı virgül ile bitmek zorundadır. Aynı şekilde Seçim kısmımıza birden fazla İfade gireceksek bunların arasında noktalı virgül koyarak ifadelerimizi gireriz.
h1 > Seçim kısmımızda h1’i kullandık ve onu tanımladık. Bu css yapısına baktığımızda iki tane ifade kısmımızı görüyoruz. Diğeriyle karşılaştırdığımıza yeni ifade girerken dikkat etmemizz gereken yerleri görmüşüzdür. Ama tekrar hatırlatmamda fayda olduğunu düşünüyorum. Dikkat etmemiz gerekenler;
- Her Seçim kısmımızın ifadeleri kıvrımlı parantezler içinde yer alması gerekiyor.
- İfadelerimizi noktalı virgülle ayırmamız gerekiyor.
- Özellik ve değerlerimiz arasında iki nokta üst üste kullanmalıyız.
- Son ifademizde noktalı virgülle son bulmalı.
- Seçimlerimizi tanımlarken kıvrımlı parantez açarak başladık kıvrımlı parantezi kapatarak bitirmeliyiz.
Alttaki birkaç Css örneğini inceleyebilirsiniz.
Üstteki kodlar CSS‘miz için ideal ve temiz olanıdır. İstersek daha uygun gözüksün ve aradığımızı hemen bulalım diye alt alt alta da sıralayabiliriz. Ama tavsiyem yan yana sıralanması ve gereksiz boşluklardan kaçınılmalıdır.
Alt alta sıralanmış bir ccs örneği.
Yukarıda tek satırda belirttiğimiz kodların alt alta sıralanmış görüntüsü. İstediğimiz şekilde yazabiliriz. İlk başlayanlar için böyle yazılması daha anlaşılır olacaktır. Sonraki konumuzda Css Açıklama Kullanımı konusuna değineceğiz.
Etiketler : Css, CSS Kod Yapısı, CSS Nasıl Kodlanır, CSS Nasıl Yazılır, CSS Nedir?, style.css
