Sınıf Seçicisi(Class Selector)
Aynı HTML elemanına farklı özellikler atamak için Sınıf Seçicisini kullanırız.
![[Resim: secicijj6.jpg]](http://img386.imageshack.us/img386/9733/secicijj6.jpg)
Şekil ; Sınıf seçicilerin yapısı
Bir örnek verecek olursak; hazırlayacagımız dokümanda iki adet paragraf
tanımlaması yapacagımızı planlıyoruz. Bunlardan biri saga dayalı, digeri
ise ortalı olmasını istiyoruz.
[B]Örnek:[/B]
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
p.sagadaya {
text-align: right;
}
p.ortala {
text-align: center;
}
</style>
</head>
<body>
<p class="sagadaya">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nunc posuere odio at mi. Sed vel massa vitae massa eleifend pulvinar.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Quisque gravida odio ut nulla. Mauris tincidunt adipiscing
3. Seçiciler 26
tellus. Nullam porta, nunc in suscipit ultrices, erat odio vehicula ligula, ut
pellentesque velit sapien in dolor. Vestibulum convallis sapien eget dolor.
Duis eget massa et nisi blandit sagittis. Curabitur pretium erat volutpat
lacus. Phasellus consequat. Nulla bibendum laoreet libero. </p>
<p class="ortala">Curabitur luctus pellentesque lacus. Proin nisl lorem,
vestibulum a, varius auctor, condimentum non, arcu. Sed at purus. Nullam
volutpat libero ac enim. Vestibulum luctus neque ut eros. Proin vulputate.
Mauris id lectus. Nunc ut diam ut tellus lacinia pulvinar. Maecenas
commodo nisi vitae arcu. Vivamus ac metus sodales lorem sollicitudin
fringilla. Phasellus sodales. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</body>
</html>[/html]
![[Resim: seciciornek1qw5.jpg]](http://img221.imageshack.us/img221/7633/seciciornek1qw5.jpg)
Birde önemli bir tanımlama yapacagınızı düsünün, ancak sadece bir HTML elemanına degil istediginiz sayıda HTML elemanında bunu kullanmak istersek;
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8" />
3. Seçiciler 27
<title>CSS'in yapısı</title>
<style type="text/css">
.ortala {
text-align: center;
}
</style>
</head>
<body>
<h1 class="ortala"> Burada bir seyler yazar </h1>
<p class="ortala">Burada da baska bir seyler yazar</p> </body>
</html>
[/html]
![[Resim: seciciornek21zz6.jpg]](http://img385.imageshack.us/img385/3794/seciciornek21zz6.jpg)
Bu tanımlamayı yaptıktan sonra istedigimiz her HTML elemanına bu sınıfı uygulayabiliriz.
Çoklu sınıflar , birden fazla sınıfı bir HTML elemanına uygulamak için kullanılır.
[B]Örnek;[/B]
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
3. Seçiciler 28
/>
<title>CSS'in yapısı</title>
<style type="text/css">
.onemli {
font-weight : bold;
}
.uyari {
font-style: italic;
}
.onemli .uyari{
background-color: silver;
}
</style>
</head>
<body>
<p class="onemli">Dikkat:</p>
<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının
yaklasık % 90'ı insanların hataları sonucu meydana gelmektedir.</p>
</body>
</html>[/html]
![[Resim: seeee1hu6.jpg]](http://img147.imageshack.us/img147/2930/seeee1hu6.jpg)
Yukarıdaki örnekte görüldügü gibi bir uyari sınıfımız birde onemli sınıfımız mevcut. Bazı metinlerin önemli uyarı olacagı düsüncesi ile böyle bir atama yapılabilir.
onemli metinler için kalın, uyari için yazının seklini egik olarak belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS seçicisinde “.onemli .uyari” seklinde yazıyoruz.
