Css’e başlamak ve Css’in yapısı

Merhaba arkadaşlar,

Bundan önce yaptığım bu paylaşımda Css’e ufak bir giriş yapmıştım ve css’i adım adım öğreticeğimi söylemiştim.Bu rehber niteliğindeki paylaşım serime bugün itibariyle başlamış bulunmaktayım.Amacım adım adım css bilgilerini sizlere sunmak ve öğrenmek isteyenler için ayrıntılı ve örneklerle süslenmiş paylaşımlar yaparak faydalı olmak isteğimdir.

Bu yazımda css’in genel yapısı,bize sağladığı kolaylıklar ve kullanımı hakkında faydalı bilgiler verip,bundan sonraki paylaşımlar için bir bilgi birikimi , temel oluşturmak istiyorum.

* Css’e Başlamak

CSS ( Cascading Style Sheets ) : Bir web sitesinin içeriğini ve tasarımını ayırmak için geliştirilen bir sistemdir.
Html dilinde görsellerin özelleştirilmesi için geliştirilen taglarla birlikte büyük tasarımcılar için zorluk oranı çok arttı çünkü çok sayıda sayfanın bulunduğu bir websitesinde her sayfadaki başlığı aynı ölçüde düzenlemek için her sayfaya ayrı ayrı tag tanımlaması yapmamız gerekiyordu ve bu bize iş yükü ve zaman kaybı olarak geri dönüyordu ve bu sorunun çözümü için the World Wide Web Consortium (W3C) tarafından CSS geliştirildi ve kaybedilen zaman kazanılmakla beraber ,iş yükümüz neredeyse dibe çekilmiş oldu.

* Css’in Yapısı

Css’in genel yapısına göz attığımızda iki ana bölümden oluştuğunu görebiliriz.

1 – Seçici : Bütün html tagları birer seçicidir(örnek : p , h1 ) Seçiciyi belirledikten sonra bildirim bloğu üzerinden seçiciye özellikler atayabiliriz.

2 – Bildirim Blogu

i . özellik : Yukarıdaki grafikte gördüğünüz gibi color bir özellik grubudur,Burada yaptığımız h1 tagına color özelliğini kullanarak (css özelliğiyle)renk değeri atanmaktadır.

ii . değer : h1 tagına renk değeri olarak red(kırmızı) tanımlıyoruz ve h1 tagının yazı boyutunu 15 px büyüklüğünde belirliyoruz.

♥  Burada önemli olan seçici girdisi tanımlandıktan sonra bildirim bloğu {} (parantezler) ile tanımlanır ve aradaki bildirimler
; (noktalı virgül) ile ayrılır.Her bir özellik tanımlandıktan sonra : (iki nokta) ile bölünür , değer girilir ve sonunda ; (noktalı virgül) ile kapatılır.

••• Gruplama : Yukarıda anlattığım bölümlerde her zaman bir html tagına özellik atamayı gösterdim,fakat css ile birden fazla tag’a birden fazla özelliği tanımlayarak gruplama yapabilir ve farklı taglara farklı özellikler atayabiliriz,Bunuda en iyi şekilde görebilmeniz için aşağıdaki örneğe göz atabilirsiniz.

a,p,h1{ font-family:Arial; color:#FF0000; font-size:15px; }

Gördüğünüz gibi a , p ve h1 taglarına Arial font’unu tanımladıktan sonra rengini kırmızı ve rengini kırmızı olarak belirledik,Css bize bu şekilde kolaylıklar sağlayarak iş gücümüzü kolaylaştırmaktadır.

••• Seçiciler’de kendi içinde 2’ye ayrılır 

• Class : Class seçicileri farklı elementlere farklı özellikler belirlemek için kullanılır ve tanımlanırken . (nokta) kullanılır.Örnek vericek olursak bir paragraf yazıyoruz bunun bir kısmı Arial font şekliyle yazılacak,diğer bir paragraf Arial’le yazılacak ve kalın olacak,Son paragraf ise Arial ile yazılıp,kırmızı ve kalın olacak.Bunu tanımlarkende aşağıdaki şekilde css’imizi düzenliyoruz.

<p class="normal">Burası metnimizin ilk paragrafıdır ve font family olarak Arial tanımlıyoruz.</p>

<p class="bilgi">Bu bizim ikinci paragrafımızdır ve burada yazılan metnin Arial olup,yazı özelliği kalın olmasıdır.</p>

<p class="onemli">Bu bizim son paragrafımız olup,Buradaki yazının özelliği Arial,Kalın ve Kırmızı renkte olmasıdır.</p>

Şimdi paragraflar için gerekli tanımlamaları yapıyoruz,

.normal { font-family:Arial; }

.bilgi { font-family:Arial; font-weight:bold; }

.onemli { font-family:Arial; font-weight:bold; color:#FF0000; }

• Id : Id ise class yapısından farklı olarak tek sınıfa tanımlanır ve # ile tanımlanır.Mesela sitemizde başlıkların hepsi kırmızı renk ve açıklamalarımız mavi renk olsun istiyoruz,Bu durumda aşağıdaki gibi bir tanımlama yaparak id özelliğini kullanarak css tanımlamamızı yapmış oluyoruz.

#baslik { color:#ff0000; }

#metin { color:#05c4fe; } 

•• Class’mı Id’mi ?

Bu soruya şu şekilde cevap verebilirim,Id tagını sayfa içinde bir kere kullanırsak doğru şekilde kullanmış oluruz,fakat Class’ı istediğimiz sayfada istediğimiz kadar kullanırız,Çünkü id birden fazla kullanıldığında bazı durumlarda hata oluşturacaktır fakat class’ı istediğiniz kadar kullanın bu şekilde hatayla karşılaşmıyacaksınızdır.İkiside kullanımına göre değişiklik gösterir,Seçim size ve kurallara uyarak kullanmanıza kalmıştır.