Torun Seçiciler Css – Web Tasarım Ve Programlama Ders 5
Torun Seçiciler Css – Web Tasarım Ve Programlama Ders 5
Torun Seçiciler: HErhangi bir etiketin altında bulunan etikete özellikler vereceğimiz zaman torun seçiciler kullanılır.Mesela h1 etiketimiz içinde bulunan bütün yazıların değilde sadece strong içinde yazılanları mavi renkte yazmamız gerekiyor.Bu gibi durumlarda torun seçiciler devreye girer.
h1 strong{color:blue} h1’in içinde bulunan strong etiketi içindeki yazıların rengini sarı yap.
Örnek:
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
h1 strong{text-decoration:underline}
h2 em{color:yellow}
p strong{text-decoration:overline} 'Daha fazla bilgi için : <a href="http://www.gorselprogramlama.com">www.gorselprogramlama.com</a>
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> <body> <h1>gorsel<strong>program</strong>lama.com</h1> <h2>gorsel<em>program</em>lama.com</h2> <p>gorsel<strong>program</strong>lama.com</p> </body> </html>
index.html dosyasını çalıştıralım
Yukarıdaki kodları açıklamaya çalışalım.Önce css dosyasından başlayalım.
h1 strong{text-decoration:underline} : h1’in içinde bulunan strong etiketi içindeki yazıların altını çiz.
h2 em{color:yellow} : h1’in içinde bulunan em etiketi içindeki yazıların rengini sarı yap.
p strong{text-decoration:overline} : p’nin içinde bulunan strong etiketi içindeki yazıların üstünü çiz.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz.Mesela birinci gorselprogramlama.com yazısındaki program yazısını h1’in içindeki strong etiketi arasında yazdığımız için yazının alti çizili olacaktır.
Torun seçicileri sınıflarada uygulayabiliriz.Pekiştirmek amaçlı bir örnek yapalım.
Örnek:
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
.kirmizi b{color:red}
.mavi em{color:blue}
.uzericizili b{text-decoration:line-through}
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> <body> <p class="kirmizi">gorsel<b>program</b>lama.com</p> <p class="mavi">gorsel<em>program</em>lama.com</p> <p class="uzericizili">gorsel<b>program</b>lama.com</p> <p class="mavi uzericizili">gorsel<b>pro<em>gra</em>m</b>lama.com</p> <p class="kirmizi uzericizili">gorsel<b>program</b>lama.com</p> </body> </html>
Daha fazla bilgi için : www.gorselprogramlama.com
index.html dosyasını çalıştıralım
Yukarıdaki kodları açıklamaya çalışalım.Önce css dosyasından başlayalım.
.kirmizi b{color:red} : kirmizi sınıfı içinde bulunan b etiketi içindeki yazıların rengini kırmzı yap.
.mavi em{color:blue} : mavi sınıfı içinde bulunan em etiketi içindeki yazıların rengini mavi yap.
.uzericizili b{text-decoration:line-through} : uzericizili sınıfı içinde bulunan b etiketi içindeki yazıların üzerini çiz.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz.Mesela birinci gorselprogramlama.com yazısındaki program yazısını kirmizi sınıfı içinde bulunan b etiketi arasında yazdığımız için yazının rengi kırmızı olacaktır.Sınıfların özelliğinden faydalanarak ikiden fazla sınfı bir arada kullanabiliriz.Mesela dördüncü gorselprogramlama.com yazısında p class=”kirmizi uzericizili” kodu ile kirmizi ve uzericizili sınıfını bir arada kullanmış oluruz.
Örnek:
Aşağıdaki kodları notpad’de yazıp a.css olarak kaydediyoruz.
h1 em,h2 strong{color:blue}
p strong, h3 em{color:yellow}
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> <body> <h1>gorsel<em>program</em>lama.com</h1> <h2>gorsel<strong>program</strong>lama.com</h2> <p>gorsel<strong>program</strong>lama.com</h1> <h3>gorsel<em>program</em>lama.com</h3> </body> </html>
index.html dosyasını çalıştıralım
Yukarıdaki kodları açıklamaya çalışalım.Önce css dosyasından başlayalım.
h1 em,h2 strong{color:blue} : h1’in içinde bulunan em etiketi ile h2’nin içinde bulunan strong etiketi içindeki yazıların rengini mavi yap.
p strong, h3 em{color:yellow} : p’nin içinde bulunan strong etiketi ile h2’nin içinde bulunan em etiketi içindeki yazıların rengini sarı yap.
index dosyamıza baktığımızda css dosyasında belirtilen yerdeki yazıların özelliklerinin değiştiğini görürüz.Mesela birinci gorselprogramlama.com yazısındaki program yazısını h1’in içindeki em etiketi arasında yazdığımız için yazının rengi mavi olacaktır.
Daha fazla bilgi için : www.gorselprogramlama.com
