CSS Seçicileri | Bilişim Konuları

CSS Seçicileri

Css seçicileri kullanıldıkları yerde kendilerini göstererek taşıdıkları özellikleri bulundukları yere uygularlar.

Öğe (ID) Seçici:

Uygulandıkları HTML nesnelerine etki ederler. Aşağıdaki örnekte <p> nesnesine uygulanarak onun özelliklerini değiştirmiştir. Örnekte paragraf sayfaya ortalanmış ve rengi kırmızı olarak ayarlanmıştır. <p> etiketine uygulandığı için sayfada kullanılan tüm <p> etiketlerine etki edecektir.

cssid1Kimlik Seçici:

Bu seçici ceşidinde css özelliklerini bir html etiketine değil de özel bir kimlik olarak tanımladık. O nedenle sayfadaki her yerde değil sadece kendisini kimlik olarak çağırılan yerde özelliklerini göstermektedir.

Aşağıdaki örnekte <p> etiketini tek başına yazdığımızda sadece <p> etiketinin özelliklerini ekrana yansıtmaktadır. Ancak <p> etiketine bir kimlik ile css eklediğimizde artık o kimlik özellikleri <p> etiketine etki ederek özelliklerini değiştirmektedir.

cssid2

Sınıf Seçici (Tüm ögeler için):

Bu tür seçiciler sınıf olarak tanımlanmaktadır. Birden fazla yerde kullanılmaktadırlar. Kullanıldıkları her yerde özelliklerini yansıtırlar. Birden fazla HTML etiketinde kullanılabilirler.

Aşağıdaki örnekte sınıf seçici hem bir <p> etiketine hemde <hx> başlık etiketine uygulanmış ve kendi özelliklerini yansıtmıştır.

cssid3

Sınıf Seçici (Yalnızca <p> ögeler için):

Bu sınıf seçici yalnızca bir HTML etiketi için tanımlanmaktadır. Tanımlandığı HTML etiketi dışındaki etiketlere etki etmemektedir. Aşağıdaki örnekte <h1> etiketine css uygulanmamıştır. Sınıf olarak tanımlandığı halde <p> etiketine tanımlandığı için taşıdığı özellikler sadece <p> etiketine etki etmiştir.

cssid4

Aynı Anda İki Sınıfı Kullanan HTML Nesnesi:

Bazı durumlarda bir HTML etiketi için birden fazla sınıf tanımlanabilir ve bu sınıfları aynı anda kullanmaları istenebilir. Aşağıdaki örnekte <p> etiketi hem center hemde large isminde sınıflar tanımlanmıştır. Bu sınıflar yalnızca biri ve ikisi aynı anda kullanılmıştır. Nasıl sonuç oluştuğu ekran görüntüsünde anlaşılmaktadır.

cssid5

Evrensel Seçici:

Bu seçici çeşidi * simgesi ile tanımlanmaktadır. Evrensel olduğu için bir sayfada bir kere tanımlandığında o sayfada bulunan bütün HTML etiketlerine etki eder ve kendi özelliklerini sayfaya yansıtır. Aşağıdaki örnekte tüm yazılar sayfaya ortalı ve rengi mavi hale getirilmiştir. Bunun için evrensel seçici olan * kullanılmıştır.

cssid6

Gruplandırma Seçicileri:

Bu tür seçici tanımlama da aynı anda birden fazla HTML etiketi için sınıf tanımlanabilir. Tek seferde tanımlanan özellik daha sonra istenilen yerde teker teker kullanılabilir. Böylece yerden ve zamandan tasarruf edilebilir. Aşağıdaki örnekte <h1>, <h2> ve <p> etiketlerine aynı şekilde gruplama yaparak sınıf tanımlanmıştır.

cssid7

Yorum Yap