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? |