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!
 
404 Not Found

Server Error

404

Page Not Found

This page either doesn't exist, or it moved somewhere else.


That's what you can do