Merhaba. Bu yazımda. Css seçiciler konusunu ayrıntılı olarak ele alacağım.
Css de anlattığımız kadarıyla, kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk. Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu. Fakat bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız?
Bunun için seçiciler kullanılmaktadır.2 tür seçici vardır;
1) Id Selector
2) Class Selector
Id selector kullanımında her id,bir sayfada sadece bir kez kullanıldığı için biz daha pratik olması amacıyla Class Selector kavramını anlatacağız.Böylece class’larımızı bir sayfada istediğimiz kadar kullanabileceğiz
CLASS SELECTOR KULLANIMI
Class selector kullanımı şu şekildedir.<head> etiketinin olduğu kısımda classlarımızı tanımlarız,her birine birer isim veririz ve içine, vereceğimiz stillerimizi yazarız
–>Class seçicisi,başına nokta (.) koyularak tanımlanır.Class seçicisine bir örnek vererek , örnek üzerinden açıklayalım;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <style type="text/css"> .deneme1 { text-align:left; color:green; background-color:aqua; } .deneme2 { text-align:left; color:blue; background-color:orange; } </style> </head> <body> <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2> <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4> </body> </html> |
Burada .deneme1 ve .deneme adlı 2 adet class tanımladık.Bunların başına nokta koyulduğunu unutmayalım…!
Bu sınıflarımız içine { } parantezleri arasına istediğimiz stilleri yazdık.Bu classlarımızı <head> etiketinde <style> etiketi arasına yazdığımızı ve <style> etiketini kapatmayı unutmayalım…!
–> Bu hazırladığımız classları hangi element üzerinde kullanmak istiyorsak o elementin <class> özelliğine yazıyoruz.Bu verdiğimiz örnekte biz h4 ve h2 elementleri üzerinde classlarımızı kullandık
|
1 |
<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2> |
Bu satırda class=” ” ile hangi classımızı kullanacaksak parantezler içine onu yazıyoruz.Biz bunun için deneme1 classını kullandık.Şimdi yukardaki kodumuzun tarayıcıda çıktısını görelim;
Selector konusunda daha geniş bir örnek yapalım.Farklı classlar kullanalım ve bunları farklı etiketler için uygulayalım;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <style type="text/css"> .deneme1 { text-align:left; color:green; border-style:inset; border-width:10px; border-color:grey; background-color:aqua; } .deneme2 { text-align:left; color:blue; background-color:orange; font-size:20px; text-decoration:underline; border-style:solid; border-width:5px; border-color:green; height:40px; } </style> </head> <body> <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2> <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4> </body> </html> |
Sayfamızın Çıktısını Görelim
Burada 2 tane class (sınıf) tanımladık.Rastgele stiller uyguladık.Örneğin arkaplan rengi,çerçeve stili,çerçeve kalınlığı,font büyüklüğü gibi özellikler verdik.Artık bu özelliklerimizi istediğimiz yerde istediğimiz etikete uygulayabiliriz. Uygulamak istediğimiz etikette class = ” “ yapısıyla bu parantez içine ,kullanacağımız sınıfı ekleyerek uygulayabiliriz.
