CSS Yapısı ve CSS Seçileri – Tasarım Kodlama
CSS

CSS Yapısı ve CSS Seçileri

Bu derste  CSS yazım kuralı ve CSS seçicilerinin kullanımlarını ve kullanım amaçlarını öğreneceksiniz. CSS Seçicileri, stil oluşturmak istediğiniz HTML öğesine işaret eder. Aşağıda bir CSS bildiriminin yapısını görüyorsunuz.

Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

CSS biçimledirmesi  özellik : değer  şeklinde yazılır.

Bir CSS bildirimi her zaman bir noktalı virgülle sonlanır ve bildirim blokları küme parantezleri ile çevrelenir.

Aşağıdaki örnekte tüm paragraf ögelerinin yazı renginin kırmızı olması sağlanmıştır.

CSS Seçiciler

CSS seçicileri (selector), öğe adlarına, kimliğine, sınıfına, niteliğine ve daha fazlasına göre HTML öğelerini bulmak veya seçmek için kullanılır. Seçme işlemi 3 farklı şekilde yapılabilir. Bunlar Etiket Seçici, ID Seçici ve Class seçicilerdir.

CSS Etiket Seçici

Etiket seçici, tüm etiket adına dayalı ögeleri seçer. Örnek olarak sayfamızda bulunan tüm <p> etiketlerinin yani paragrafların renginin kırmızı olmasını istersek;

CSS ID (Kimlik) Seçiciler

ID seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id özelliğini kullanır.

Bir öğenin kimliği bir sayfa içinde benzersiz olmalıdır, bu nedenle kimlik seçici bir benzersiz öğe seçmek için kullanılır!

Belirli bir kimliğe sahip bir eleman seçmek için, “#” karakteri ve ardından öğenin kimliği yazılır.

Örnek: Aşağıda id‘ si “paragraf1” olan ögenin yazı rengi ve yazı hizalaması yapılmıştır.

Not: Bir kimlik adı sayı ile başlayamaz! 

CSS Class (Sınıf) Seçici

Sınıf seçici, belirli bir sınıf özelliğine sahip öğeleri seçer. “id seçici“den faklı olarak birden fazla öğeye uygulanabilir.

Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) Karakteri ve ardından sınıfın adını yazın.

Aşağıdaki örnekte, class = ‘ortala’ olan tüm HTML öğeleri kırmızı ve orta hizalanmış olacaktır:

 

Ayrıca, yalnızca belirli HTML öğelerinin bir sınıf tarafından etkilenmesi gerektiğini de belirtebilirsiniz.  Örnek olarak yukarıdaki örnekte sadece sınıfı ortala olan öğelerden sadece paragraf olanları ortalayalım.

p.ortala {…}

 

Html elemanlarına birden fazla sınıf özelliği uygulanabilir. Aşağıdaki örneği incelediğinizde en sondaki paragrafın ortala ve buyuk isimli sınıfa dahil olduğunu göreceksiniz.

 

Yukarıdaki örnekte h1 etiketinde bulunan başlık ortala sınıfına dahil olduğu halde herhangi bir biçimlendirme olmamıştır. Bunun sebebi css özelliğinin p.ortala şeklinde yazılmasıdır. Bu şekilde sadece sınıf adı ortala olan <p> etiketlerinin biçimlendirmeden etkilenmesi sağlanmıştır.

Not: Class isimleri rakam ile başlayamaz.

Seçicileri Gruplandırma

Aşağıdaki gibi aynı stil tanımlarına sahip öğeleriniz varsa;

Kodu küçültmek için seçicileri gruplamak daha iyi olacaktır.

Seçici gruplamak için, her seçiciyi virgülle ayırın.

Aşağıdaki örnekte seçicileri nasıl gruplayabileceğinizi göreceksiniz.

Yukarıda <h1>, <h2> ve <p> etiketlerine ortalanmış ve kırmızı renk özelliği verilmiştir.

Kullanımı:

Yukarıdaki sayfayı çalıştırdığınızda tüm öğelerin ortalanmış ve kırmızı renkte olduğunu göreceksiniz.

2 Yorum

Yorum bırak