Css Seçiciler

CSS seçicileri, HTML ögelerini isimlerine ve etiketlerine göre seçmek için kullanılır.

Css dilinde seçiciler :

  • Class (Sınıf)
  • İd
  • Tag (Etiket) 

olmak üzere üç tanedir.

Class (Sınıf) Seçici

Css Class(Sınıf) seçicileri birden fazla html ögesine uygulanabilir ve birden fazla kullanılabilir. 

Sınıf class seçicisini kullanmak için . (nokta) işareti kullanılır.

Class Seçici Kullanımı

<style type="text/css">
.onemli{
color:#F00;
font-weight:bold;
}
</style>

Kodu Çalıştır

Css Sınıf Örneği:

<html>

<head>
<title> Css class kullanımı </title>

<style type="text/css">

.kirmizi{color:red}
.mor{color:purple}
.mavi{color:blue}

</style>

</head>

<body>


<h1 class="kirmizi"> Başlık 1 </h1>
<h2 class="mor"> Başlık 2 </h2>
<h3 class="mavi"> Başlık 3 </h3>


</body>

</html>

Kodu Çalıştır

İd Seçici

Css id seçici belirli bir html ögesini seçmek için kullanılır. İd seçicisi yalnız bir ögeyi seçmek için ve bir kez kullanılır.

İd seçicisi kullanmak için # işareti kullanılır.

İd Seçici Kullanımı:

<style type="text/css">

#kirmizi{color:red}

</style>

Kodu Çalıştır

Css İd Örneği:

<style type="text/css">

#mavi{color:blue}

</style>

Kodu Çalıştır

Css İd Örneği:

<html>

<head>
<title> İd kullanımı </title>

<style type="text/css">
#baslik{ text-align:center; color:red}
</style>

</head>

<body>

<h1 id="baslik">İSTİKLAL MARŞI</h1>

</body>

</html>

Kodu Çalıştır

Tag (Etiket) Seçici

Etiket (tag) seçici aynı türden tüm html etiketlerine uygulamak için kullanılır. 

Tag (Etiket) Seçici Kullanımı:

Tüm h1 etiketli başlıkları kırmızı yapmak için kullanılır.

<style type="text/css">

h1{color:red;}

</style>

Kodu Çalıştır

Tüm p etiketli paragrafları mavi renk yapmak için kullanılır.

<style type="text/css">

p{color:blue}

</style>

Kodu Çalıştır

Tüm h1 etiketli başlıkları kırmızı renk yapıp ortaya almak ve paragrafları mavi renk yapmak için kullanılır.

<html>

<head>

<style type="text/css">

h1{color:red; text-align:center}

p{color:blue}

</style>

</head>

<body>

<h1> Başlık1 </h1>

<p> Paragraf yazısı </p>

<p> Paragraf yazısı 1 </p>

<p> Paragraf yazısı 2</p>

<p> Paragraf yazısı 3</p>


<h1> Başlık2 </h1>

<p> Paragraf yazısı </p>


<p> Paragraf yazısı 1 </p>

<p> Paragraf yazısı 2</p>

<p> Paragraf yazısı 3</p>

</body>

</html>

Kodu Çalıştır

Css Seçiciler isimli dersimiz bitmiştir. Bu dersimizde Css seçiciler nedir,kaç çeşit seçici vardır, seçici kullanımı, sınıf (class), id, etiket (tag) seçici kullanımı nasıldır, nerelerde kullanılır ve özellikleri hakkında bilgi verdik.

                                                     

Önceki Ders: Css Yapısı Sonraki Ders: Css Nasıl Kullanılır?