Class Seçiciler (Sınıf Seçiciler) Css Ders 3
Class Seçiciler (Sınıf Seçiciler) Css Ders 3
Class Seçiciler (Sınıf Seçiciler) : İstediğiniz herhangi bir html etiketine belirli özellikler vererek çağırabilirsiniz.Css ile ilgili örnekleri daha önce anlattağımız harici css yöntemi ile oluşturacağız. Harici css hakkında bilgi almak için tıklayınız.
Sınıfları iki farklı şekilde tanımlıyoruz.
1- Etiket kullanmadan tanımlayabiliriz.Oluşturduğumuz sınıfı daha sonra html dosyamızda etiket içinde çağırabiliriz. Önce nokta yazıyoruz.Daha sonra sınıfımıza bir isim veriyoruz.
Ör: .italik
2-Belli bir etiket içerisine özellik ekleyip sınıf olarak tanımlayabiliriz. etiket ismini yazıp nokta koyuyoruz.Daha sonra sınıfımıza bir isim veriyoruz.
Ör: p.sagadaya
Örnek:
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
.alticizili{text-decoration:underline}
.italik{font-style:italic}
.mavi{color:blue}
.yesil{color:green}
Aşağıdaki kodları notpad’de yazıp index.html olarak kaydediyoruz
<html> <head><title>www.gorselprogramlama.com</title> <style type="text/css"> @import "a.css"; </style></head> <h1 class="alticizili">gorselprogramlama.com</h1> <h1 class="italik">gorselprogramlama.com</h1> <h1 class="mavi">gorselprogramlama.com</h1> <h1 class="yesil">gorselprogramlama.com</h1> <h1 class="alticizili italik">gorselprogramlama.com</h1> <h1 class="alticizili italik mavi">gorselprogramlama.com</h1> </html>
index.html dosyasını çalıştıralım
Yukarıdaki kodları açıklamaya çalışalım.
Sınıfları çağırırıken etiket içerisinde class yazıp eşittir diyoruz ve çift tırnak içinde sınıfımızın ismini yazıyoruz.Sınıfları tek kullanabiliriz.Bunun yanında araya boşluk koymak süretiyle istediğimiz kadar sınıfı bir arada kullanabiliriz.
css dosyası kodlarını açıklayalım.
.alticizili{text-decoration:underline} : alticizili sınıfı içindeki yazıların altını çiz.
.italik{font-style:italic} : italik sınıfı içindeki yazıların stilini italik yap.
.mavi{color:blue} : mavi sınıfı içindeki yazıların rengini mavi yap.
.yesil{color:green} : yesil sınıfı içindeki yazıların rengini yeşil yap.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz. Birinci gorselprogramlama.com yazısında alticizili sınıfını çağırıyoruz.Çalıştırılmış haline dikkat ederseniz altı çizili bir şekilde yansır.Diğer yazıların uygulanışıda çağrılan sınıfa göre değişiyor.
Örnek :
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
p.alticizili{text-decoration:underline}
p.italik{font-style:italic}
p.mavi{color:blue}
p.yesil{color:green}
Aşağıdaki kodları notpad’de yazıp index.html olarak kaydediyoruz
<html> <head><title>www.gorselprogramlama.com</title> <style type="text/css"> @import "a.css"; </style></head> <p class="alticizili">gorselprogramlama.com</p> <p class="italik">gorselprogramlama.com</p> <p class="mavi">gorselprogramlama.com</p> <p class="yesil">gorselprogramlama.com</p> </html>
index.html dosyasını çalıştıralım
Yukarıdaki örnekte görüldüğü gibi bir etikete özellik veriyoruz.Daha sonra istediğimiz yerde çağırıyoruz.Kullanım 1. örnek ile aynıdır.(etiket_adı)
Kodları açıklamaya çalışalım.Önce css dosyasından başlayalım.
p.alticizili{text-decoration:underline} : p etiketinin alticizili sınıfı içindeki yazıların altını çiz.
p.italik{font-style:italic} : p etiketinin italik sınıfı içindeki yazıların stilini italik yap.
p.mavi{color:blue} : p etiketinin mavi sınıfı içindeki yazıların rengini mavi yap.
p.yesil{color:green} : p etiketinin yesil sınıfı içindeki yazıların rengini yeşil yap.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz. Birinci gorselprogramlama.com yazısın p etiketi çindeki alticizili sınıfını çağırıyoruz.Çalıştırılmış haline dikkat ederseniz altı çizili bir şekilde yansır.Diğer yazıların uygulanışıda çağrılan sınıfa göre değişiyor.
Css dosyasını index dosyamıza çağırma işlemi hakkında bilgi almak için tıklayınız.
çok teşekkürler..elinize sağlık