Stil Sayfaları (CSS) 6 - Sözde Sınıf ve Eleman Seçiciler
4.1.5.7. Sözde (Pseudo) Sınıf Seçiciler
Sözde (Pseudo) sınıf seçiciler, aslında sınıf olmayan fakat elemanların özel durumlarını tanımlamak için kullanılan seçicilerdir. Sözde sınıflar bir eleman için farklı durumlarda farklı stiller uygulanmasını sağlar. Sözde sınıf seçici etiket isminden hemen sonra “:” (iki nokta) işareti yazılarak kullanılır.
color:orange;
}
Örnek kodda henüz tıklanmamış <a> etiketleri seçilir ve yazı renkleri turuncu olarak ayarlanır. Birçok sözde sınıf seçici bulunmaktadır (Tablo 4.6).
|
Sözde Sınıf
Seçici |
AÇIKLAMA |
KULLANIM
ŞEKLİ |
|
link |
Tıklanmamış link
özellikleri belirleyen seçici |
a:link{ color:red;}
|
|
visited |
Ziyaret edilmiş
link özellikleri belirleyen seçici |
a:visited{opacity:0.5;}
|
|
active |
Link’in veya başka
bir elemanın tıklanma anındaki özellikleri belirleyen seçici (Fare sol tuşu
basılı olma durumu) |
img:active{ font-size:16px;
color:blue;} |
|
hover |
Link’in veya başka
bir elemanın fare ile üzerine gelindiğindeki özellikleri belirleyen seçici |
div:hover{ width:200px;
height:200px;} |
|
focus |
Odaklanılan elemanın
özelliklerini belirleyen seçici (Genellikle input elemanlarında kullanılır.) |
İnput:focus{ background-color:lighthgray}
|
|
first-child |
Bir elemanın
kapsadığı ilk alt elemanın özelliklerini belirleyen seçici |
p:first-child{ background-color:orange;}
|
|
last-child |
Bir elemanın
kapsadığı sonuncu alt elemanın özelliklerini belirleyen seçici |
p:last-child{ background-color:skyblue;}
|
Checked, disabled, enabled, empty, target ve daha birçok sözde sınıf seçici bulunmaktadır.
Uygulama
Sözde sınıf seçiciler ve çocuk seçiciler kullanarak HTML elemanlarına stil verme işlemini Görsel 4.15’te görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.15: Sözde sınıf seçiciler |
1. Adım: HTML dosyasının <body> etiketi içine aşağıdaki kodu yazınız.
<li><a href="#">Etiket </a></li>
<li><a href="#">Özellik</a></li>
<li><a href="#">Değer</a></li>
<li><a href="#">Fonksiyon</a></li>
</ul>
2. Adım: Sayfa arka plan rengini indigo yapınız.
3. Adım: Linklerin henüz tıklanmamışken yazı renklerini turuncu ve yazı boyutlarını 22 piksel yapınız.
4. Adım: Linklerin tıklandıktan sonraki yazı renklerini gri yapınız.
5. Adım: Fare ile linklerin üzerine gelindiğinde arka plan rengini beyaz yapınız.
6. Adım: Linklerin üzerine fare ile basılı tutulduğunda yazı boyutunu 30 piksel yapınız.
7. Adım: Web sayfasının linklerin tıklanıp tıklanmama durumlarına göre farklı görünümleri Görsel 4.15’te görülmektedir. Tüm adımları takip ederek web sayfasını tasarlayınız.
|
CSS |
|
body{
background-color: indigo; } a:link
{color:orange; font-size:22px;} a:visited{color:gray;} a:hover{background-color:white;
cursor:hand; } a:active{font-size:
30px;} |
Sıra Sizde
Aşağıdaki kodlara göre <input> nesneleri içine bilgi girişi yapıldığında neler olacağını yazınız.
|
HTML |
CSS |
|
<body> <form>
<input
type="text" id="mail">
<input
type="password" id="sifre">
</form>
</body>
|
#mail:focus{ background-color:
tomato;
}
#sifre:focus{
background-color:
tomato;
}
|
4.1.5.8. Sözde Eleman Seçiciler
Elemanların belli kısımlarını seçmek için kullanılan seçicilerdir. Sözde elemanlar, var olan bir elemanı alt kısımlara böler. Bölünen kısım tam anlamıyla bir eleman değildir, sadece elemanın bir bölümüdür. Sözde eleman seçici etiket isminden hemen sonra “::” (iki tane iki nokta üst üste işareti) yazılarak kullanılır.
font-weight: bold;
}
Yukarıdaki örnek kodda <p> etiketlerinin ekranda görülen sadece ilk satırı seçilir ve yazıları kalın olarak ayarlanır. Birçok sözde eleman seçici bulunmaktadır (Tablo 4.7).
|
Sözde
Eleman Seçici |
Açıklama |
Kullanım
Şekli |
|
first-line |
Elemanın ilk
satırının özelliklerini belirleyen seçicidir. |
div::first-line{color:white}
|
|
first-letter |
Elemanın ilk
harfinin özelliklerini belirleyen seçicidir. |
div::first-letter{color:red}
|
|
before |
Elemanın öncesine
içerik ve içeriğe ait çeşitli özellikler eklemek için kullanılan seçicidir. |
p::before{content:
‘içerik’; color:red; } |
|
after |
Elemanın sonrasına
içerik ve içeriğe ait çeşitli özellikler eklemek için kullanılan seçicidir. |
p::after{ content: ‘içerik’;
color:blue; } |
|
selection |
Elemanın seçilen
bölümlerine özellikler eklemek için kullanılan seçicidir. |
div::selection{color:red;}
|
Uygulama
Sözde eleman seçiciler kullanarak HTML elemanlarına stil verme işlemini Görsel 4.16’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.
 |
| Görsel 4.16: Sözde eleman seçiciler |
1. Adım: HTML dosyasının <body> etiketi içine aşağıdaki kodu yazınız.
<p>Makine dili “1” ve “0” lardan oluşan kod blokları ile yazılır. Makine dilinde kod yazılması ve yazılan kodun anlaşılması oldukça zordur.</p>
<p>”0” sayısı ilk olarak Hârezmî tarafından tanımlanmıştır.</p>
</div>
2. Adım: <div> etiketinin stil özelliklerini; arka plan rengini indigo, genişlik 250 piksel, yazı rengi beyaz, kenarları 5 piksel, yuvarlanmış olarak ayarlayınız.
3. Adım: Sayfadaki <p> etiketlerinin ilk harfinin stil özelliklerini; yazı boyutu 20 piksel, yazıları kalın ve sol çerçeve dışı boşluğu 10 piksel olarak ayarlayınız.
4. Adım: Sayfadaki <p> etiketlerinin ilk satırının stil özelliklerini; arka plan rengi turuncu ve yazı rengi siyah olarak ayarlayınız.
5. Adım: Tüm adımları takip ederek Görsel 4.16’daki görüneme sahip bir web sayfasını tasarlayınız.
|
CSS |
|
div{ width: 250px;
background-color:indigo; color:white;
border-radius: 5px;
}
p::first-letter{font-size:20px;
font-weight: bold; margin-left:10px; }
p::first-line{
background-color: orange; color:black; }
|
Sıra Sizde
Aşağıdaki kodlar çalıştığında sayfada nasıl bir görüntü oluşacağını arkadaşlarınızla paylaşınız.
|
HTML |
CSS |
|
<body> <h5
id="icerik_ekleme">
<---Before-After--->
</h5>
</body>
|
#icerik_ekleme::before{
content:'(önceki)';
background-color:red;
color:White;}
#icerik_ekleme::after{
content:"(sonraki)";
background-color:blue;
color:White;}
|
Hiç yorum yok