| Swat | 06 Temmuz 2014 18:24 |
Sözde Elemanlar ve Sözde Sınıflar
urada yapılan sayfada css elemanları kullanarak html sayfa oluşturulmuştur. Buradaki css yapıları html elemanı olmamalarına rağmen bir html elemanı gibi davranabilirler.
h3: before yapısı html kodundaki h3 tagını kullanan ifadeden önce sayfa içeriğine "Konu" yazılacağını gösterir. h3 tagı içerisindeki ifade yazıldıktan sonra h3: after yapısı ise h3 tagı içerisindeki yazıdan sonra "Sözde elemanlar" sayfaya yazılacağını belirtir.
h3: before Konu: h3 içindeki ifade Pseudo - Elements h3: after (Sözde elemanlar)
oluşturalan içerik -> Konu:Pseudo - Elements(Sözde elemanlar)
p.tanıt:first-letter -> aldığı ifadenin ilk harfini 56 piksele çıkarırken harfide italik ve gri şekilde yazar.
p.tanıt:first-line -> aldığı ifadenin ilk satırını kalın ve zeytin yeşili renkte yazdırır.
a:link -> içerisindeki koda bakıldığında linki gri yazdırdığı görülür.
a:visited -> ziyaret edilen linkin rengini bordo yapar.
a:hover -> linkin üzerine geldiğinizde linki lacivert yapar.
a:active -> link tıklandığı anda sarı rengini alır. Alıntı:
<html>
<head><title>Sözde elemanlar ve Sözde sınıflar</title>
<style type="text/css">
h3:before {
<span style="white-space: pre" class="Apple-tab-span"> </span>content:"Konu:";
}
h3:after{
<span style="white-space: pre" class="Apple-tab-span"> </span>content:"(Sözde elemanlar)";
<span style="white-space: pre" class="Apple-tab-span"> </span>color:green;
}
p.tanıt:first-letter{
<span style="white-space: pre" class="Apple-tab-span"> </span>color:gray;
<span style="white-space: pre" class="Apple-tab-span"> </span>font-size:56px;
<span style="white-space: pre" class="Apple-tab-span"> </span>font-style:italic;
}
p.tanıt:first-line{
<span style="white-space: pre" class="Apple-tab-span"> </span>font-weight:bold;
<span style="white-space: pre" class="Apple-tab-span"> </span>color:olive;
}
/******Sözde sınıf örneği******************/
a:link{
<span style="white-space: pre" class="Apple-tab-span"> </span>text-decoration:none;
<span style="white-space: pre" class="Apple-tab-span"> </span>color:gray;
}
a:visited {
<span style="white-space: pre" class="Apple-tab-span"> </span>color:maroon;
}
a:hover{
<span style="white-space: pre" class="Apple-tab-span"> </span>color:purple;
}
a:active {
<span style="white-space: pre" class="Apple-tab-span"> </span>color:yellow;
}
/******Sözde sınıf örneği******************/
</style></head><body>
<h3>Pseudo - Elements</h3>
<p class="tanıt">HTML elemanı değillerdir fakat <br>
bir HTML elemanı gibi davranabilirler.</p>
<!-- Sözde sınıf örneği -->
<a href="sozde.html">Mevcut sayfa</a>
<a href="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
Sözde sınıf örneği -->
</body></html>
| | 