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. " /> Programlama | Programlama Dilleri | C Programlama Dili |C++ - Sözde Elemanlar ve Sözde Sınıflar

Programlama | Programlama Dilleri | C Programlama Dili |C++

Anasayfa Programlama Css Sözde Elemanlar ve Sözde Sınıflar


Sözde Elemanlar ve Sözde Sınıflar

AÇIKLAMA
 
Burada 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. 
 
Sayfa Kodu:

  1.  
  2.  
  3. <html>
  4.  
  5. <head><title>Sözde elemanlar ve Sözde sınıflar</title>
  6.  
  7. <style type="text/css">
  8.  
  9. h3:before {
  10.  
  11. <span style="white-space: pre" class="Apple-tab-span"> </span>content:"Konu:";
  12.  
  13. }
  14.  
  15. h3:after{
  16.  
  17. <span style="white-space: pre" class="Apple-tab-span"> </span>content:"(Sözde elemanlar)";
  18.  
  19. <span style="white-space: pre" class="Apple-tab-span"> </span>color:green;
  20.  
  21. }
  22.  
  23. p.tanıt:first-letter{
  24.  
  25. <span style="white-space: pre" class="Apple-tab-span"> </span>color:gray;
  26.  
  27. <span style="white-space: pre" class="Apple-tab-span"> </span>font-size:56px;
  28.  
  29. <span style="white-space: pre" class="Apple-tab-span"> </span>font-style:italic;
  30.  
  31. }
  32.  
  33. p.tanıt:first-line{
  34.  
  35. <span style="white-space: pre" class="Apple-tab-span"> </span>font-weight:bold;
  36.  
  37. <span style="white-space: pre" class="Apple-tab-span"> </span>color:olive;
  38.  
  39. }
  40.  
  41. /******Sözde sınıf örneği******************/
  42.  
  43. a:link{
  44.  
  45. <span style="white-space: pre" class="Apple-tab-span"> </span>text-decoration:none;
  46.  
  47. <span style="white-space: pre" class="Apple-tab-span"> </span>color:gray;
  48.  
  49. }
  50.  
  51. a:visited {
  52.  
  53. <span style="white-space: pre" class="Apple-tab-span"> </span>color:maroon;
  54.  
  55. }
  56.  
  57. a:hover{
  58.  
  59. <span style="white-space: pre" class="Apple-tab-span"> </span>color:purple;
  60.  
  61. }
  62.  
  63. a:active {
  64.  
  65. <span style="white-space: pre" class="Apple-tab-span"> </span>color:yellow;
  66.  
  67. }
  68.  
  69. /******Sözde sınıf örneği******************/
  70.  
  71. </style></head><body>
  72.  
  73. <h3>Pseudo - Elements</h3>
  74.  
  75. <p class="tanıt">HTML elemanı değillerdir fakat <br>
  76.  
  77. bir HTML elemanı gibi davranabilirler.</p>
  78.  
  79. <!-- Sözde sınıf örneği -->
  80.  
  81. <a href="sozde.html">Mevcut sayfa</a>
  82.  
  83. <a href="http://www.yahoo.com/">Yahoo</a>
  84.  
  85. <!-- Sözde sınıf örneği -->
  86.  
  87. </body></html>
  88.  
  89.  
  90.  
  91.  

Yorumlar (0)
Sadece kayıtlı kullanıcılar yorum yazabilir!