Beytullah Toprak
CSS Temel - CSS Seçicileri (Selectors)

CSS Temel - CSS Seçicileri (Selectors)


Bir CSS seçici, bir HTML belgesindeki öğelerle eşleşen bir kalıptır. İlişkili stil kuralları, seçici kalıbına uyan öğelere uygulanır.

Seçici Nedir?

Seçiciler, bir web sayfasındaki öğeleri stilize etmeleri için seçmek için kullanıldığı için CSS'nin en önemli yönlerinden biridir. Seçicileri çeşitli şekillerde tanımlayabilirsiniz.

Evrensel Seçici (Universal Selector)

*Yıldız veya yıldız sembolü olarak yazılmış evrensel seçici, sayfadaki her bir öğeyle eşleşir. Hedef elemanda başka koşullar varsa, evrensel seçici ihmal edilebilir. Bu seçici genellikle hızlı sınama amacıyla varsayılan kenar boşluklarını ve dolguları elemanlardan çıkarmak için kullanılır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS Seçiciler Örnek</title>
  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
  </style>
</head>
<body>
  <h1>Bu Bir Başlık</h1>
  <p>Bu bir paragraf.</p>
</body>
</html>

*Seçici içindeki stil kuralları , bir belgedeki her öğeye uygulanacaktır.

Not: Evrensel seçicinin * üretim ortamında kullanılması önerilmez , çünkü bu seçici, tarayıcılara çok fazla gereksiz baskı uygulayan sayfadaki her öğeyle eşleşir.

Eleman Tipi Seçici (Element Type Selector)

Bir öğe türü seçicisi, belge içerisindeki öğenin her örneğini karşılık gelen öğe türü adıyla eşleştirir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS Element Örnek</title>
  <style type="text/css">
    h1 {
      color: red;
    }
    p {
        color: blue;
    }
  </style>
</head>
<body>
  <h1>Bu Bir Başlık</h1>
  <p>Bu bir paragraf.</p>
</body>
</html>

p Seçici içindeki stil kuralları <p>, belgedeki her öğeye uygulanır ve belge içerisindeki konumlarına bakılmaksızın mavi renklendirilir.

Kimlik Seçicileri (Id Selectors)

İd seçicitek veya benzersiz bir öğenin stil kurallarını tanımlamak için kullanılır .

Id seçici#hemen ardından id'ye bir değer isim verilir. örnek: #deger_Adi

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS id Örneği</title>
  <style type="text/css">    
    #hata {
        color: #ff0000;
    }
  </style>
</head>
<body>
  <p id="hata">Bu bir uyarı!</p>
</body>
</html>

Bu stil kuralı, id niteliği ayarlanmış olan bir öğenin metnini kırmızı olarak oluşturur.

Sınıf Seçicileri (Class Selectors)

Sınıf seçicileri, class özniteliği olan herhangi bir HTML öğesini seçmek için kullanılabilir . Bu sınıfa sahip tüm elemanlar, tanımlanmış kurala göre biçimlendirilecektir.

Sınıf seçici, hemen sınıf değerinin takip ettiği bir nokta işareti (.) ile tanımlanır .

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS class Örneği</title>
  <style type="text/css">    
    .blue {
        color: #0000ff;
    }
  </style>
</head>
<body>
  <h1 class="blue">Bu Bir Başlık</h1>
  <p class="blue">Bu bir paragraftır</p>
  <p>Bir başka paragraf.</p>
</body>
</html>

Yukarıdaki stil kuralları, metinde class özniteliği ayarlanmış olan her öğenin metnini mavi renkte gösterir.

Soydan Seçiciler (Descendant Selectors)

Başka bir öğenin soyundan olan bir öğeyi seçmeniz gerektiğinde bu seçicileri kullanabilirsiniz. Örneğin, tüm bağlantı öğelerini hedeflemek yerine, yalnızca sıralanmamış bir listede bulunan bağlantı noktalarını hedeflemek istiyorsanız.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS Descendant Örneği</title>
<style type="text/css">
	h1 em {
		color: green;
	}
    ul.menu {
        padding: 0;
        list-style: none;
	}
    ul.menu li{
        display: inline;
	}
	ul.menu li a {
		margin: 10px;
		text-decoration: none;
	}
</style>
</head>
<body>
	<h1>Bu Bir <em>Başlık</em></h1>
	<ul class="menu">
		<li><a href="#">Ana Sayfa</a></li>
		<li><a href="#">Hakkımızda</a></li>		
		<li><a href="#">Servisler</a></li>
		<li><a href="#">İletişim</a></li>
	</ul>
</body>
</html>

Seçicinin içindeki stil kuralları ul.menu li a, yalnızca sınıfa sahip olan sıralanmamış bir listede<a> yer alan bağlantı elemanlarına, yani sınıfa sahip olan ve belgenin içindeki diğer bağlantılar üzerinde etkisi olmayanlara uygulanır .

Gruplama Seçicileri (Grouping Selectors)

Genellikle bir stil sayfasındaki birkaç seçici, aynı stil kuralları bildirimlerini paylaşır. Stil sayfanızdaki kodu en aza indirmek için bunları virgülle ayrılmış bir listede gruplandırabilirsiniz. Aynı stil kurallarını (tekrar  tekrar) etmenizi önler.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS Grouping Örneği</title>
<style type="text/css">
	h1 {
		font-size: 36px;
		font-weight: normal;
	}
	h2 {
		font-size: 28px;
		font-weight: normal;
	}
	h3 {
		font-size: 22px;
		font-weight: normal;
	}
</style>
</head>
<body>
	<h1>Birinci Başlık</h1>
	<h2>İkinci Başlık</h2>
	<h3>Üçüncü Başlık</h3>
</body>
</html>

Yukarıdaki örnekte de görebileceğiniz gibi, aynı stil kuralı font-weight: normal;seçicileri tarafından paylaşılmaktadır.


Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap