Css-Dersleri--4---Seciciler-Selectors- | Kod Bankası

Anasayfa > Kod Bankası > Css Dersleri 4 - Seçiciler (Selectors)

Kod Bankası

Css Dersleri 4 - Seçiciler (Selectors)

24/07/2008 18:05 Yazar

ResetAt.Com Hitler

682

4. 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)

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

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

Source: ResetAt.Com - Webmaster Kaynakları