Stil Sayfaları (CSS) 3 - Seçiciler (Selectors) - Etiket Seçiciler
4.1.5. Seçiciler (Selectors)
Sayfa içi veya sayfa dışı CSS ekleme yöntemlerinde stil özellikleri değiştirilmek istenilen elemanların seçiciler (selectors) kullanılarak belirtilmesi gerekmektedir. Seçiciler, eşleşen HTML elemanlarını bulur ve stil değiştirme işlemini yapar. Birçok seçici vardır. Bunlardan en çok kullanılanlar Tablo 4.5’te gösterilmektedir.
Tablo 4.5: Seçiciler
Tablo Eklenecek
Not
Yukarıdaki tabloda A ve B harfleri herhangi bir etiket, kimlik veya sınıf ismini temsil etmektedir. Seçiciler konusunun daha iyi anlaşılabilmesi için HTML sayfalarının hiyerarşik yapısının nasıl olduğunun bilinmesi gerekir.
<head>
<meta charset="utf-8">
<title>Html yapısı</title>
<style>
/* CSS kodları */
</style>
</head>
<body>
<img src="kodlama.jpg">
<h5>
<b>
<ul>
<li>Nesne Tabanlı Programlama</li>
<li>WEB TABANLI UYGULAMA GELİŞTİRME</li>
</ul>
</b> </h5>
<a href="index.html"><b>Anasayfa</b></a>
</body>
</html>
Yukarıdaki örnek HTML kodlarının şematik görünümü Şema 4.2’deki gibidir. HTML hiyerarşik yapısına eklenen veya çıkarılan her HTML kodu, bu şemada bir değişiklik meydana getirir
 |
| Şema 4.2: Html hiyerarşik yapısı |
Hiyerarşik yapının en üst noktasında <html> etiketi bulunmaktadır. Sayfada görüntülenecek elemanlar <body> etiketi altında bulunmaktadır. Yeni bir eleman eklendiğinde body etiketi altında yeni bir dal oluşacaktır. Şema 4.2’de görülen <img>, <h5> ve <a> etiketleri <body> etiketi tarafından kapsanır fakat kendi aralarında aynı seviyedeki elemanlardır. <li> etiketleri de kendi aralarında aynı seviyedir fakat sırasıyla <ul>, <b>,<h5>,<body> ve en üstte <html> etiketi tarafından kapsanmaktadır.
Sıra Sizde
Aşağıdaki HTML kodlarının şematik görünümünü çiziniz. Kendi çiziminizi arkadaşlarınızın çizimleriyle karşılaştırınız.
<head>
<meta charset="utf-8">
<title>Duyarlı Web Sitesi</title>
<style>
/* CSS kodları */
</style>
</head>
<body>
<div><h3>Responsive(Duyarlı) Web Sitesi Çalışma Ortamları</h3></div>
<div>
<table>
<tr>
<td><b>Telefon</b></td>
<td><b>Tablet</b></td>
</tr>
<tr>
<td><b>Bilgisayar</b></td>
<td><b>Televizyon</b></td>
</tr>
</table>
</div>
</body>
</html>
4.1.5.1. Etiket Seçiciler
Etiket seçiciler, belirtilen etiket ismiyle eşleşen sayfadaki tüm elemanların stilini değiştirmek için kullanılır.
color:orange;
font-size:12px;
}
Yukarıdaki örnek kodda sayfadaki tüm <p> etiketleri seçilir ve hepsinin yazı rengi turuncu, yazı boyutu 12 piksel yapılır.
Uygulama
Etiket seçici kullanarak HTML elemanlarına stil verme işlemlerini Görsel 4.6’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.6: Etiket seçiciler |
1. Adım: Web sayfasının arka plan rengini “skyblue” yapınız.
2. Adım: Sayfaya bir adet sıralı liste ve iki adet resim elemanı ekleyiniz.
3. Adım: Sıralı listenin maddelerine sırasıyla “HTML, CSS, JAVASCRIPT, ASP.NET CORE” yazınız.
4. Adım: Sıralı liste maddelerinin stil özelliklerini; yazı rengi siyah, yazı boyutu 16 piksel, yazıların altı çizili olacak şekilde ayarlayınız.
5. Adım: Resimlerin genişliğini 220 piksel ve yüksekliğini 130 piksel olarak ayarlayınız.
|
HTML
|
CSS
|
|
<body>
<ol type="1"> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> <li>ASP .NET CORE</li> </ol> <img src="resim1.jpg"> <img src="resim2.jpg"> </body> |
body{
background-color:skyblue; } li{ color:black; font-size: 16px; text-decoration: underline; } img{ width:220px; height:130px; } |
Uygulama
Etiket seçici kullanarak HTML elemanlarına stil verme işlemlerini Görsel 4.7’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.7: HTML harfleri |
1. Adım: Web sayfasının arka plan rengini skyblue yapınız.
2. Adım: Sayfaya dört adet <div> etiketi ekleyiniz.
3. Adım: Her <div> etiketinin içine <b> etiketi ekleyiniz.
4. Adım: <b> etiketlerinin içine sırasıyla H, T, M, L harflerini yazınız.
5. Adım: <div> etiketlerinin stil özelliklerini; arka plan rengi turuncu, şekli kare, yazıları ortalanmış, çerçeve kenarlık kalınlığı 2 piksel, çerçeve kenarlık dokusu solid, çerçeve kenarlık rengi gri olacak şekilde ayarlayınız.
6. Adım: Stil özelliklerini ayarlarken etiket seçici kullanınız ve web sayfasını Görsel 4.7’de görüldüğü gibi tasarlayınız.
|
HTML
|
CSS
|
|
<body> <div> <b>H</b> </div> <div> <b>T</b> </div> <div> <b>M</b> </div> <div> <b>L</b> </div> </body> |
body{
background-color:skyblue; } div{ border:2px gray; width: 20px; height: 20px; background-color: orange; text-align: center; } |
Sıra Sizde
Bir adet haricî CSS sayfası ve iki adet HTML sayfası oluşturunuz. HTML sayfalarına haricî CSS sayfasını bağlayınız. HTML sayfalarının tasarımlarını kendiniz belirleyiniz (doğa, spor, sanat, ticaret vb.) ve belirlediğiniz tasarıma uygun şekilde elemanlar ekleyiniz. HTML sayfalarındaki tüm elemanların stil özelliklerini etiket seçici kullanarak ayarlayınız.
Hiç yorum yok