![]() | |
| |||
| 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 */ 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} 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; } 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 |
![]() |
| Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir) | |
| Seçenekler | |
| Stil | |
| |
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 |