Stil Sayfaları (CSS) 5 - Çoklu, Çocuk ve Torun Seçiciler
4.1.5.4. Çoklu (Multiple) Seçiciler
Çoklu (Multiple) seçiciler, birden fazla seçiciye aynı stil özelliklerini uygulamak için kullanılan yöntemdir. Seçiciler arasında “,” (virgül) işareti kullanılır.
color:gray;
}
Yukarıdaki örnek kodda sayfadaki class özelliği içerik olan elemanlar ve <p> etiketine sahip tüm elemanlar seçilir ve yazı renkleri gri yapılır.
Uygulama
Çoklu seçiciler kullanarak HTML elemanlarına stil verme işlemini Görsel 4.12’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.12: Çoklu seçiciler |
1. Adım: Stil.css adında bir haricî CSS dosyası ve index.html adında bir HTML dosyası oluşturunuz ve Stil.css dosyasını index.HTML dosyasına bağlayınız.
2. Adım: index.html dosyasının <body> etiketi içine aşağıdaki kodu yazınız.
<b>Elektronik cihazlar;</b>
<ul>
<li>Bilgisayar</li>
<li>Cep telefonu</li>
<li>Tablet</li>
<li>Elektronik ev aletleri vb.</li>
</ul>
3. Adım: Web sayfasının arka plan rengini mor yapınız.
4. Adım: <p>, <b>, <ul> etiketlerinin ortak stil özellikleri; yazı rengi beyaz, yazı boyutu16 piksel, genişlikleri 300 piksel olacak şekilde çoklu seçiciler kullanarak ayarlayınız.
|
CSS |
|
body{ background-color:purple; } p,b,ul{
color:white; font-size:16px; width: 300px; } |
Sıra Sizde
Oluşturduğunuz web sayfasına beş farklı resim ekleyiniz. İlk eklenen resim etiketine ID seçici değeri, sonraki eklenen üç resim etiketine class seçici değerleri veriniz.
Son eklenen resim etiketine herhangi bir seçici değeri vermeyiniz. Resimlerin ortak stil özelliklerini; genişlik 100 piksel, yükseklik 100 piksel, kenarları 5 piksel yuvarlanmış olacak şekilde çoklu seçiciler kullanarak ayarlayınız
4.1.5.5. Çocuk (Child) Seçiciler
Çocuk (Child) seçiciler, iç içe eklenmiş elemanlar arasından seçim yapmak için kullanılır. Belirtilen elemanın bir alt seviyesinde bulunan tüm elemanlar (çocuk) arasından eşleşenleri seçer.
font-size:20px;
}
Yukarıdaki örnek kodda <p> etiketinin kapsadığı ilk alt elemanlar arasındaki tüm <b> etiketleri seçilir ve yazı boyutu 20 piksel olarak ayarlanır.
Uygulama
Çocuk seçiciler kullanarak HTML elemanlarına stil verme işlemini Görsel 4.13’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.13: Çocuk seçiciler |
1. Adım: HTML dosyasının <body> etiketi içine aşağıdaki kodu yazınız.
<b>KULLANICI PROFİLİ</b>
<hr>
<img src="profilBayan.png">
<b>Zeynep</b>
<p>
<b>HTML, CSS kodlayabiliyor.</b>
</p>
</div>
2. Adım: <div> etiketinin stil özelliklerini; arka plan rengi darkcyan, çerçeve kalınlığı 2 piksel, çerçeve dokusu solid, genişliği 400 piksel olacak şekilde etiket seçici kullanarak ayarlayınız.
3. Adım: <img> etiketinin stil özelliklerini, genişlik ve yükseklik değerleri 100 piksel
4. Adım: İçinde “KULLANICI PROFİLİ” ve “Zeynep” yazılarının olduğu <b> etiketlerinin yazı renklerini çocuk seçiciler kullanarak beyaz olarak Görsel 4.13’te görüldüğü gibi ayarlayınız.
|
CSS |
|
div{ background-color:darkcyan; border:2px solid; width:400px ; } div>img{ width:
100px; height:100px; }
div>b{
color:white; }
|
Sıra Sizde
Aşağıdaki kodlar çalıştığında “Başlık-1” ve “Başlık-2” yazılarındaki stil değişimlerinin neler olacağını yazınız.
|
HTML |
CSS |
|
<div>
<h3>Başlık-1</h3>
<span>
<h3>Başlık-2</h3>
</span>
</div>
|
div>h3{
color:purple;
background-color:
orange;
}
|
4.1.5.6. Torun (Descendant) Seçiciler
Torun (Descendant) seçiciler, çocuk seçicilerde olduğu gibi iç içe eklenmiş elemanlar arasından seçim yapmak için kullanılır. Bir elemanın kapsadığı tüm alt elemanlarda (çocuk, torun) eşleşenleri seçer. Çocuk seçici sadece bir alt elemandaki eşleşmeleri seçerken torun seçici, tüm alt elamanlardaki eşleşmeleri seçer.
font-size:20px;
}
Yukarıdaki örnek kodda <p> etiketinin kapsadığı tüm alt elemanlardaki <b> etiketleri seçilir ve yazı boyutu 20 piksel olarak ayarlanır.
Uygulama
Torun seçiciler ve çocuk seçiciler kullanarak HTML elemanlarına stil verme işlemini Görsel 4.14’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.14: Torun seçiciler |
1. Adım: HTML dosyasının <body> etiketi içine aşağıdaki kodu yazınız.
<b>KULLANICI PROFİLİ</b>
<hr>
<img src="profilBay.png">
<b>Mehmet Ali</b>
<p>
<b>Python kodlayabiliyor.</b>
</p>
</div>
2. Adım: <div> etiketinin stil özelliklerini; arka plan rengi seagreen, çerçeve kalınlığı 2 piksel, çerçeve dokusu solid, genişliği 400 piksel olacak şekilde etiket seçicikullanarak ayarlayınız.
3. Adım: <img> etiketinin stil özelliklerini genişlik ve yükseklik değerleri 100 piksel olacak şekilde çocuk seçiciler kullanarak ayarlayınız.
4. Adım: Tüm <b> etiketlerinin yazı renklerini torun seçiciler kullanarak beyaz olarak Görsel 4.14’de görüldüğü gibi ayarlayınız.
|
CSS |
|
div{
background-color:seagreen; border:2px solid; width:400px ; } div>img{ width:
100px; height:100px; } div b{ color:white;
} |
Sıra Sizde
Aşağıdaki kodlar çalıştığında “Başlık-1” ve “Başlık-2” yazılarındaki stil değişimlerinin neler olacağını yazınız.
|
HTML |
CSS |
|
<div
class="cerceve">
<h3>Başlık-1</h3>
<span>
<h3>Başlık-2</h3>
</span>
</div>
|
.cerceve h3{
color:purple;
background-color:
orange;
}
|
Hiç yorum yok