blue
Forum Üyesi
- Katılım
- 8 May 2021
- Mesajlar
- 215
- Tepkime puanı
- 0
- Puanları
- 0
- Takım
- Ankaragücü
CSS'de Seçiciler çok önemli bir konudur ve dikkatle takip etmenizi öneririz. CSS seçiciler, stil vermek istediğiniz HTML etiketlerini "bulmak" veya başka bir değiş ile "seçmek" için kullanılır. CSS'de Seçici türlerini 5 gruba ayırabiliriz :
CSS Etikete Göre Seçme
CSS'de HTML etiketine göre seçici tanımlamak için, etiketin ismini kullanmamız yeterlidir.
HTML Code:
Bu örnekte, tüm "p" etiketleri içerisindeki yazıların renkleri mavi ve ortalanmış olacaktır.
CSS ID'ye Göre Seçme
CSS'de HTML etiketlerinin parametresi olan "id" ye göre seçici tanımlanaiblir.CSS ID seçici, belirli bir etiketi seçmek için bir HTML etiketinin id parametresini kullanır.
HTML derslerinden hatırlayacağınız gibi, bir etiketin kimliği bir sayfa içinde benzersizdir, bu nedenle ID seçici, benzersiz bir öğe seçmek için kullanılır!
Belirli bir ID parametresine sahip etiketi seçmek için,kare (#) işareti kullanılır ve ardından etiketin ID değeri yazılır.
HTML Code:
Not : HTML'de ID değerleri numara ile başlayamaz.
CSS Class'a Göre Seçme
CSS'de HTML etiketlerinin parametresi olan "class"a göre seçici tanımlanaiblir.CSS Class seçici, belirli bir etiketi seçmek için bir HTML etiketinin class parametresini kullanır.
Belirli bir sınıfa sahip etikterleri seçmek için, bir nokta (.) işareti ve ardından sınıf adını yazılır.
HTML Code:
CSS ile seçtiğimiz sınıfın sadece belirli etiketlerde çalışmasını belirleyebiliriz.
HTML Code:
Örnekte görüldüğü üzere "ortala" sınıfı, sadece p etiketi olup class değeri "ortalama" olanlarda çalışacaktır.
CSS Evrensel Seçici
CSS'de Evrensel seçici (*) sayfadaki tüm HTML etiketlerini seçer. Seçici ifadesi olarak yıldız (*) kullanılır. Evrensel denmesinin sebebide tüm etiketleri seçmesindendir.
HTML Code:
Örnekte HTML kodları içerisindeki tüm etiketlerin yazı rengi kırmızı ve ortalanmış olacaktır.
CSS Grup Seçici
CSS Grup Seçici, aynı stil tanımlarına sahip tüm HTML etiketlerini seçer. Birden fazla etikete aynı stili vermek için kullanılır ve etiketler arası virgül ile ayrılır.
HTML Code:
Örnekte görüldüğü gibi, h1 , h2 ve p etiketlerini toplu seçerek stillerini tanımladık.
- Basit Seçiciler (Simple Selectors) : id , class , etiketler.
- Combinator Seçiciler : elementler arasındaki ilişkiye göre.
- Sözde Sınıf Seçiciler (Pseudo-class Selectors) : belirli bir duruma göre
- Sözde Elemen Seçiciler (Pseudo-elements Selectors) : bir etiketin belirli bir bölümünü seçmek,
- Öznitelik Seçiciler (Attribute Selectors) : etiketlerin parametrelerine göre.
CSS Etikete Göre Seçme
CSS'de HTML etiketine göre seçici tanımlamak için, etiketin ismini kullanmamız yeterlidir.
HTML Code:
Kod:
p {
text-align: center;
color: blue;
}Bu örnekte, tüm "p" etiketleri içerisindeki yazıların renkleri mavi ve ortalanmış olacaktır.
CSS ID'ye Göre Seçme
CSS'de HTML etiketlerinin parametresi olan "id" ye göre seçici tanımlanaiblir.CSS ID seçici, belirli bir etiketi seçmek için bir HTML etiketinin id parametresini kullanır.
HTML derslerinden hatırlayacağınız gibi, bir etiketin kimliği bir sayfa içinde benzersizdir, bu nedenle ID seçici, benzersiz bir öğe seçmek için kullanılır!
Belirli bir ID parametresine sahip etiketi seçmek için,kare (#) işareti kullanılır ve ardından etiketin ID değeri yazılır.
HTML Code:
Kod:
#ircforumu {
text-align: center;
color: blue;
}Not : HTML'de ID değerleri numara ile başlayamaz.
CSS Class'a Göre Seçme
CSS'de HTML etiketlerinin parametresi olan "class"a göre seçici tanımlanaiblir.CSS Class seçici, belirli bir etiketi seçmek için bir HTML etiketinin class parametresini kullanır.
Belirli bir sınıfa sahip etikterleri seçmek için, bir nokta (.) işareti ve ardından sınıf adını yazılır.
HTML Code:
Kod:
.ortala {
text-align: center;
}CSS ile seçtiğimiz sınıfın sadece belirli etiketlerde çalışmasını belirleyebiliriz.
HTML Code:
Kod:
p.ortala {
text-align: center;
}Örnekte görüldüğü üzere "ortala" sınıfı, sadece p etiketi olup class değeri "ortalama" olanlarda çalışacaktır.
CSS Evrensel Seçici
CSS'de Evrensel seçici (*) sayfadaki tüm HTML etiketlerini seçer. Seçici ifadesi olarak yıldız (*) kullanılır. Evrensel denmesinin sebebide tüm etiketleri seçmesindendir.
HTML Code:
Kod:
* {
text-align: center;
color: red;
}Örnekte HTML kodları içerisindeki tüm etiketlerin yazı rengi kırmızı ve ortalanmış olacaktır.
CSS Grup Seçici
CSS Grup Seçici, aynı stil tanımlarına sahip tüm HTML etiketlerini seçer. Birden fazla etikete aynı stili vermek için kullanılır ve etiketler arası virgül ile ayrılır.
HTML Code:
Kod:
h1, h2, p {
text-align: center;
color: blue;
}Örnekte görüldüğü gibi, h1 , h2 ve p etiketlerini toplu seçerek stillerini tanımladık.
