Temel CSS Kavramları – CSS Seçicileri

Cascading Style Sheets (CSS), web sayfalarının görünümünü ve stilini belirlemek için kullanılan bir stil dilidir. CSS kullanılarak, web sayfaları için farklı stiller ve görünümler oluşturulabilir. CSS seçicileri, HTML öğelerini seçerek, bu öğelerin stil özelliklerini belirlemek için kullanılır. Bu makalede, CSS seçicilerinin temel kavramları ve kullanımları ele alınacaktır.

Temel CSS Seçicileri

Element Seçicileri

Element seçicileri, HTML etiketleriyle eşleşen CSS seçicileridir. Örneğin, bir “p” etiketi seçmek için “p” yazılır:

p {
  color: blue;
}

Yukarıdaki örnekte, tüm “p” etiketleri mavi renkte görüntülenecektir.

ID Seçicileri

ID seçicileri, HTML etiketlerine bir kimlik (ID) özniteliği atanmış öğeleri seçmek için kullanılır. ID seçicileri “#” işareti ile başlar. Örneğin, “mydiv” adlı bir div etiketini seçmek için “#mydiv” yazılır:

#mydiv {
  background-color: yellow;
}

Yukarıdaki örnekte, “mydiv” ID’sine sahip div etiketi sarı arka plan rengiyle görüntülenecektir.

Class Seçicileri

Class seçicileri, HTML etiketlerine bir sınıf (class) özniteliği atanmış öğeleri seçmek için kullanılır. Sınıf seçicileri “.” işareti ile başlar. Örneğin, “myclass” adlı bir sınıfı seçmek için “.myclass” yazılır:

.myclass {
  font-weight: bold;
}

Yukarıdaki örnekte, “myclass” sınıfına sahip tüm öğeler kalın yazı tipiyle görüntülenecektir.

Universal Seçici

Universal seçici, tüm HTML öğelerini seçmek için kullanılır. Asterisk (*) işareti ile gösterilir. Örneğin:

* {
  margin: 0;
  padding: 0;
}

Yukarıdaki örnekte, tüm HTML öğeleri kenar boşlukları olmadan görüntülenecektir.

CSS Seçici Kombinasyonları

CSS seçicileri bir araya getirilerek, daha özelleştirilmiş seçiciler oluşturulabilir. İşte bazı örnekler:

Gruplama Seçicileri

Virgülle ayrılmış bir dizi seçici, birden fazla öğeyi seçmek için kullanılabilir. Örneğin:

h1, h2, h3 {
  color: red;
}

Yukarıdaki örnekte, “h1”, “h2” ve “h3” etiketleri kırmızı renkte görüntülenecektir.

İç İçe Seçiciler

İç içe seçiciler, bir öğenin içindeki öğeleri seçmek için kullanılır. Bunlar, bir öğenin alt öğelerinin türünü seçerek seçicileri birleştirirler. Örneğin:

ul li {
  color: green;
}

Yukarıdaki örnekte, “ul” etiketi içindeki tüm “li” etiketleri yeşil renkte görüntülenecektir.

Çocuk Seçicileri

Çocuk seçicileri, belirli bir ebeveyn öğenin doğrudan alt öğelerini seçmek için kullanılır. “Ebeveyn > çocuk” sözdizimi kullanılır. Örneğin:

div > p {
  font-size: 18px;
}

Yukarıdaki örnekte, bir div öğesi içinde doğrudan bulunan tüm “p” öğeleri 18 piksel yazı boyutuyla görüntülenecektir.

Kardeş Seçicileri

Kardeş seçicileri, öğelerin eşit öğelerini seçmek için kullanılır. Kardeş seçicileri, “+” işareti ile gösterilir. Örneğin:

h1 + p {
  color: blue;
}

Yukarıdaki örnekte, bir “h1” öğesinden sonra gelen ilk “p” öğesi mavi renkte görüntülenecektir.

Sonuç

CSS seçicileri, HTML öğelerinin stil özelliklerini belirlemek için kullanılan önemli bir araçtır. Bu makalede, temel CSS seçicileri ve seçici kombinasyonları ele alınmıştır. Web tasarımında, CSS seçicileri, web sayfalarının güzel görünmesi için önemli bir rol oynamaktadır.

Please follow and like us:

Bir yanıt yazın