Webmaster Forumu - Webmaster Zone

Geri git   Webmaster Forumu - Webmaster Zone > Webmaster Zone > Programlama Dilleri > HTML CSS DHTML
Şifrenizimi Unuttunuz? Bize Katılın!

Cevapla
Görüntüleme: 462 - Cevaplar: 0  
LinkBack Seçenekler Stil
  #1 (permalink)  
Alt 11-05-2008, 21:26:19
OmAr OmAr isimli üyemiz çevrimdışıdır. (Offline)
Webmaster
No Status
 
Üyelik tarihi: 31/5/2008
Nerden: Konya
Mesajlar: 31
iTrader: (0)
Tecrübe Puanı: 14
Puanları: 20
OmAr üyemiz henüz acemi
OmAr - MSN üzeri Mesaj gönder
Standart CSS Link Özellikleri

link özellikleri yani pseudo-class ve pseudo-element özellikleri sadece link lerde kullanılmaz yani bir çok elementte kullanılabilir bu kodların tanımları şunlardır

:link
:visited
:hover
:active
:focus
:first-child
:lang
pseudo-element
:first-letter
:first-line
:before
:after


:link, :visited, :hover, :active


genelde linklerde bu 4 lü birlikte kullanılır
:link => Tıklanmamış link özelliğini belirler
:visited => Tıklanmış link özelliği belirler
:hover => Linkin üzerine gelindiğindeki özelliği belirler yada bir elementin
:active => Aktif bir linkin özelliğini belirler yada bir elementin
Örnek bir kullanım yapalım bir linkimize yukarıdaki özellikleri uygulayalım
Kod:
a:link { color: black;}  /* normal linkimiz siyah olsun*/
a:visited { color: blue;} /* tıklanmış linkimiz mavi olsun*/
a:hover { color: red} /* üzerine gelince kırmızı renk olsun */
a:active { color: aqua;} /* aktif yani linke tıklayınca turkuaz renk olsun */
örnek kullanımı bu şekilde yukarıda ki kodlarda gördüğü gibi hek kodun önüne "a" harfi ekledik yani HTML link elementini seçtik örnek başka bir elemet yada bizim verdiğimiz class ve id de ekleyebiliriz alttaki örnek gibi
Kod:
#Deneme a:link { color: black;}  
#Deneme a:visited { color: blue;} 
#Deneme a:hover { color: red} 
#Deneme a:active { color: aqua;}

:focus


:focus kodumuz seçilen bir elementin özelliğidir bu kodumuzda linklerde kullanılabilir ama bu kodumuzun daha iyi anlamak için ben bir metin kutusu "input" ile örnek vericem kodumuza geçelim
Kod:
.kutu {border: 1px solid black;} /* bir kutu tanımladım ve normalde bu kutunun borderi siyah olsun*/
.kutu:focus {border: 1px solid red;} /* ve kutu seçilince yazı falan yazarkende borderleri kırmızı olsun */

:first-child


:first-child kodumuzda bir makalede bulunan kodları veya o elementin ilk satırını özelleştirebiliriz örneklerle devam edelim bir makalede ilk satırı kalın yapalım
örnek
Kod:
p:first-child {font-weight: bold;}

veya bir makaledeki yazımızın sadece içindeki bir elementi seçmek istiyorsak örnek
Kod:
p > em:first-child {font-weight: bold}
üstteki kodumuzda p elementinin içinde > bulunan em elementine özellik verebiliriz
eğer sadece ilk satırdaki elemente özellik vermek istiyorsak kodumuz şu şekilde kullanabiliriz
Kod:
p:first-child em {font-weight: bold}

:lang


:lang kodumuzda farklı dilde yazılmış elemente özellik vermemizi sağlar örnek kullanım
css
Kod:
p:lang(tr) { font-weight: bold; }
html
Kod:
<p lang="tr"> farklı dilde yazdım var sayalım</p>
pseudo-element


:first-letter


:first-letter kodumuzda ise bir yazımızın ilk harfine özellik verebiliriz gazetedekiler gibi
örnek:
Kod:
p:first-letter {color:#ff0000;font-size:xx-large}

:first-line


:first-line kodumuzda ise makalemizin ilk satırına özellik verebiliriz örnek
Örnek:
Kod:
p:first-line { 
text-transform: uppercase;
font-weight: bold;
}

:before


:before kodumuzda ise bir makalenin öncesine ekrana yazı yazdırabiliriz, Resim Ekleyebiliriz, hatta ses dosyası bile ekleyebiliriz fakat css de ses çalmayı hiç bir tarayıcı şuan desteklemiyor
örnek olarak ekrana yazı yazdıralım:
Kod:
p:before { content: "Not: " }

eğer resim eklemek istiyorsak alttaki kodu kullanabiliriz ses içinde aynıdır
Kod:
p:before { content: url(resim.gif) }

:after


:after kodumuzda :before kodmuzla aynıdır fakat :after kodumuz ile bir elementin sonuna özellik verebiliriz kod kullanımı :before ile aynıdır
Alıntı ile Cevapla
Cevapla



Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık

Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Mybb 1.4 Özellikleri network MyBB 1 04-03-2008 10:25:18
Java Özellikleri iptal 1Dizayn Vbulletin 0 28-04-2007 12:41:27


oyun , kontör , türkçe dizin

Bütün Zaman Ayarları WEZ +2 olarak düzenlenmiştir. Şu Anki Saat: 21:33:06 .


Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO 3.1.0
Zone Org | 2006-2008

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125