Css’te seçiciler en çok kullanılan
öğelerdendir. Örneğin <h1>
etiketine Css yardımıyla belli bir şablon yüklediniz. Ama
sayfanızda kullanacağınız <h1>
etiketlerinin tümünün aynı şekilde olmasını istemiyorsunuz. Bu
durumda bize seçiciler yardımcı olur.
İki çeşit seçici göreceğiz. Bunlar :
- Id Selector (Id seçicisi)
- Class Selector (Sınıf Seçicisi)
4.1 Class Selector (Sınıf Seçicisi)
Bu seçiciyi sayfanızdaki
<h1> gibi
etiketlerin tümünün aynı olmasını istemediğiniz durumlarda
kullanırız. Böylelikle genel bazı özellikleri koruyarak farklı
özellikleri özelleştirebilirsiniz. Sınıf seçicisinin iki türü
vardır. İlk önce birinci şeklini görelim. Hemen bir örnekle bu
seçiciyi tanıyalım.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-
h1.mavi {color:blue}
h1.kirmizi {color:red}
-->
</style>
</head>
<body>
<h1 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h1 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>
Burada sınıf seçicisini sadece
<h1> için
tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf
seçicisi tanımlamaktır. Bunu da bir örnekle görelim.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-
.mavi {color:blue}
.kirmizi {color:red}
-->
</style>
</head>
<body>
<h3 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h4 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>
4.2 Id Selector (Id Seçicisi)
Id Selector’lerini tanımlayıcı adlarının
önündeki # işaretinden tanırız. Html belgesinde kendi tanımlayıcı
adlarına gönderme yaparak herhangi bir Html etiketine stil
vermekte kullanılırlar. Bu etiketler span’dan tutunda
paragraf(p)’a kadar olabilir. Bir örnekle açıklayalım.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- Eski tür tarayıcılardan kodumuzu saklayalım -->
#mavi
{
background:blue;
color:white;
}
#yesil
{
background:green;
color:white;
|