Stil Sayfaları (CSS) 4 - Kimlik (Id) ve Sınıf Seçiciler
4.1.5.2. Kimlik (ID) Seçiciler
#resim{
width:150px;
height:200px;
}
Yukarıdaki örnek kodda ID özelliği resim olan nesne seçilir ve genişliği 150 piksel, yüksekliği 200 piksel yapılır.
Uygulama
Kimlik (ID) seçici kullanarak HTML elemanlarına stil verme işlemlerini Görsel 4.8’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.8: ID seçiciler |
1. Adım: Web sayfasının arka plan rengini turuncu yapınız.
2. Adım: ID özelliğinin değeri “resim” olan bir <img> etiketi ekleyiniz ve <img> etiketine resim bağlayınız.
3. Adım: ID özelliğinin değeri “baslik” olan bir <h3> etiketi ekleyiniz ve içine “Manzara” yazınız.
4. Adım: <img> etiketinin stil özelliklerini; genişlik 220 piksel, yükseklik 130 piksel, kenarları 20 piksel yuvarlanmış olacak şekilde ayarlayınız.
5. Adım: <h3> etiketinin stil özelliğini, soldan çerçeve dışı boşluğu 65 piksel olacak şekilde ayarlayınız.
|
HTML |
CSS |
|
<body> <img src="manzara.jpg" id="resim"> <h3 id="baslik">Manzara</h3> </body> |
body{ background-color:orange; } #resim{ width:220px; height:130px; border-radius: 20px; }
#baslik{ margin-left:65px; } |
Uygulama
ID seçici kullanarak HTML elemanlarına stil verme işlemini Görsel 4.9’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.9: CSS harfleri |
1. Adım: Web sayfasına 3 adet <div> etiketi ekleyiniz.
2. Adım: Her <div> etiketinin içine <b> etiketi ekleyiniz.
3. Adım: <b> etiketlerinin içine sırasıyla C, S, S harflerini yazınız.
4. Adım: <div> etiketlerinin ortak stil özelliklerini; genişlik ve yükseklik 35 piksel, yazı boyutu 30 piksel, yazıları ortalanmış olarak ayarlayınız.
5. Adım: İlk kutunun arka plan rengini “tomato”, ikinci kutunun arka plan renginin “teal”, son kutunun arka plan rengini “purple” olarak ayarlayınız.
|
HTML |
CSS |
|
<body> <div id="kutu1"><b>C</b></div> <div
id="kutu2"><b>S</b></div> <div id="kutu3"><b>S</b></div></body> |
div{ width:35px; height:35px; font-size:30px; text-align: center; } #kutu1{ background-color: tomato; } #kutu2{ background-color: teal; } #kutu3{ background-color: purple; } |
Sıra Sizde
Kendi isminizin harflerini Uygulama 6’daki gibi tüm kutular farklı renkte olacak şekilde ID seçiciler kullanarak bir web sayfası tasarlayınız.
4.1.5.3. Sınıf (Class) Seçiciler
Sınıf (Class), sayfadaki elemanlar arasından class özelliğinin değeri ile eşleşen tüm elemanları seçer. Birden fazla elemanın class değeri aynı olabilir. Class seçici “.” (nokta) işareti ile kullanılır.
font-size:10px;
color:blue;
}
Yukarıdaki örnek kodda sayfadaki class özelliği “içerik” olan tüm elemanlar seçilir ve yazı boyutu 10 piksel, yazı rengi mavi olarak ayarlanır.
Uygulama
Sınıf (Class) seçici kullanarak HTML elemanlarına stil verme işlemini Görsel 4.10’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.10: Class seçiciler |
1. Adım: Web sayfasına dört adet resim ekleyiniz.
2. Adım: Tüm resimlerin class özelliklerinin değerini “galeri” yapınız.
3. Adım: Web sayfasının arka plan rengini “lightcyan” yapınız.
4. Adım: Tüm resimlerin stil özelliklerini; genişlik 160 piksel, yükseklik 90 piksel, çerçeve rengi 2 piksel, çerçeve tipi solid, çerçeve rengi koyu turuncu, çerçeve kenarları 10 piksel yuvarlanmış olarak ayarlayınız.
|
HTML |
CSS |
|
<body> <img
src="uzay.jpg" class="galeri"><img
src="kumsal.jpg" class="galeri"><img
src="gunBatimi.jpg" class="galeri"> <img
src="yildizlar.jpg" class="galeri"></body> |
body{background-color:lightcyan;}
.galeri{ width: 160px; height: 90px; border-color: 2px; border-style:
solid; border-color:darkorange; border-radius:
10px; } |
Uygulama
Sınıf (Class) seçici ve Kimlik (ID) seçici kullanarak HTML elemanlarına stil verme işlemini Görsel 4.11’de görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.11: Javascript harfleri |
1. Adım: Web sayfasının arka plan rengini turuncu yapınız.
2. Adım: Web sayfasına yedi adet <span> etiketi ekleyiniz.
3. Adım: Her <span> etiketinin içine <b> etiketi ekleyiniz.
4. Adım: <b> etiketlerinin içine sırasıyla J, S, C, R, I, P, T harflerini yazınız.
5. Adım: <span> etiketlerinin ortak stil özelliğini yazı boyutu 30 piksel olarak sınıf seçiciler kullanarak ayarlayınız.
6. Adım: Diğer <span> etiketlerinden farklı olarak sadece “J” harfinin bulunduğu <span> etiketinin stil özelliklerini yazı boyutu 40 piksel ve yazı rengi beyaz olacak şekilde ID seçici kullanarak ayarlayınız.
|
HTML |
CSS |
|
<body> <span
class="harf" id="ozelHarf"> <b>J</b> </span> <span class="harf"><b>S</b></span> <span
class="harf"><b>C</b></span><span
class="harf"><b>R</b></span><span
class="harf"><b>I</b></span><span
class="harf"><b>P</b></span><span
class="harf"><b>T</b></span></body> |
body{background-color:orange;} .harf{ font-size:30px; } #ozelHarf{ font-size:40px; color:white; } |
Sıra Sizde
Kendi adınızın sadece baş harfini ve soyadınızın tüm harflerini içeren uygulama 8’deki gibi görünüme sahip bir web sayfasını class seçiciler kullanarak tasarlayınız.
Hiç yorum yok