CSS seçicileri, HTML ögelerini isimlerine ve etiketlerine göre seçmek için kullanılır.
Css dilinde seçiciler :
olmak üzere üç tanedir.
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.
<style type="text/css">
.onemli{
color:#F00;
font-weight:bold;
}
</style>
<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>
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.
<style type="text/css">
#kirmizi{color:red}
</style>
<style type="text/css">
#mavi{color:blue}
</style>
<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>
Etiket (tag) seçici aynı türden tüm html etiketlerine uygulamak için kullanılır.
Tüm h1 etiketli başlıkları kırmızı yapmak için kullanılır.
<style type="text/css">
h1{color:red;}
</style>
Tüm p etiketli paragrafları mavi renk yapmak için kullanılır.
<style type="text/css">
p{color:blue}
</style>
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>
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? |