| Üye Paneli | ||
| Give Me Everything | ||
|
||
| CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım | ||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
| blackinci.com da bir forum sayfası olsun mu? | ||
| admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik | ||
| Eylül 2010 (4) Ağustos 2010 (1) Haziran 2010 (1) Mart 2010 (4) Şubat 2010 (2) Ocak 2010 (1) |
||
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, :activegenelde 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 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 - Ön İzleme ö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 #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 .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 */ Örnek - Ön İzleme :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 p:first-child {font-weight: bold;} Örnek - Ön İzleme veya bir makaledeki yazımızın sadece içindeki bir elementi seçmek istiyorsak örnek p > em:first-child {font-weight: bold} üstteki kodumuzda p elementinin içinde > bulunan em elementine özellik verebiliriz Örnek - Ön İzleme eğer sadece ilk satırdaki elemente özellik vermek istiyorsak kodumuz şu şekilde kullanabiliriz p:first-child em {font-weight: bold} :lang:lang kodumuzda farklı dilde yazılmış elemente özellik vermemizi sağlar örnek kullanım css p:lang(tr) { font-weight: bold; } html <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: p:first-letter {color:#ff0000;font-size:xx-large} Örnek - Ön İzleme :first-line:first-line kodumuzda ise makalemizin ilk satırına özellik verebiliriz örnek Örnek: p:first-line { text-transform: uppercase; font-weight: bold; } Örnek - Ön İzleme :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: p:before { content: "Not: " } Örnek - Ön İzleme eğer resim eklemek istiyorsak alttaki kodu kullanabiliriz ses içinde aynıdır 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 |
||
 |
||||
16 Ağustos 2010 19:03 11blackinci demiş ki: yolgeçer, outline-style: none; kullanarak yapabilirsiniz |
||||
 |
||||
14 Ağustos 2010 11:05 10yolgeçer demiş ki: Merhaba,verdiğiniz bilgiler için teşekkürler. Yanlız sayfada link verince tıklama esnasında noktalı bir border geliyor acaba onu nasıl css te kaldırabiliriz. Şimdiden teşekkürler.. |
||||
|
||||
18 Şubat 2010 19:23 9blackinci demiş ki: Aslında çok haklısınız artık boş vakitlerimde yazmaya çalışırım |
||||
|
||||
18 Şubat 2010 04:45 8killaruna demiş ki: bu güzel bilgiler icin tsk ederim. yalnız bide css3 teki yuvarlak kutu yapma yuvarlak kutuya golgelık verme mozilla ve opera icin olan kodlarınıda deginsen bu cok guzel olur. uzum zamandır css hakkında makaleler yazmayı cok ıstgedım ama bi turlu bos vakıt bulamadım. işler her zamanki gibi yogun.. |
||||
|
||||
21 Ocak 2010 18:40 7blackinci demiş ki: emre_arka, <style type="text/css"> buraya css </style> </head> bu şekilde head tagının en sonuna ekleyebilirsiniz |
||||
|
||||
20 Ocak 2010 23:03 6emre_arka demiş ki: link hover visited active die bi css olusturdum kendime bunları head kısmında style= die mi koyucaz yani head kısmına mı yardım ederseniz sevinirim şimdiden teşekkür ederim |
||||
|
||||
24 Haziran 2008 22:50 5GececiSezgin demiş ki: benim demek istediğim linklerde değil yazıların üzerini çizdiğimizde mavi renk çiziyor ama bu sitede kırmızı çiziyor bende sitemde kırmızı çizmesini istiyorum bunu nasıl uygulayabilirim |
||||
|
||||
24 Haziran 2008 20:27 4blackinci demiş ki: ne renk olsun istiyorsanız o rengi yazacaksınız :link, :visited, :hover, :active örnekler ilk sırada mevcut zaten |
||||
|
||||
22 Haziran 2008 23:04 3GececiSezgin demiş ki: çok teşekkürler uyguladım birde sorum olacakdı linkin üzerini çizdiğimizde mavi çizyor onu nasıl buradaki gibi rengini başka yapabilirim blue yapmak istiyorum nasıl yaparım yardımcı olurmusunuz ? şimdiden teşekkürler |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2 |