CSS De Seçiciler (SELECTORS)
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.
Şimdilik üç çeşit seçici göreceğiz. Bunlar :
1. Class Selector (Sınıf Seçicisi)
2. Id Selector (Id seçicisi)
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 farkh ozellikleri ö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.
[syntax="html"]<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>[/syntax]
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.
id selector (ıd 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.
Şimdilik üç çeşit seçici göreceğiz. Bunlar :
1. Class Selector (Sınıf Seçicisi)
2. Id Selector (Id seçicisi)
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 farkh ozellikleri ö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.
[syntax="html"]<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>[/syntax]
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.
- Kod: Tümünü seç
<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>
id selector (ıd 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.
- Kod: Tümünü seç
<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;
</style>
</head>
<body>
<span id=mavi>Bu yazının arkafon rengi mavi font rengi beyaz</span><br><br>
<span id=yesil>Bu yazının arkafon rengi yeşil font rengi beyaz</span>
</body>
</html>
