SB Yönetim İletişim Sohbet Radyo Anasayfa |
|
|
|
26.06.16
|
#1 |
CSS Hakkında [İp Uçları]
CSS Hakkında [İp Uçları]Yazıya Link Verme Özellikleri CSS şu dört selektörü destekler: A:link A:visited A:active A:hover A:Link - Bu sayfadaki bütün normal linkler için bir stil oluşturur. A:visited - Bu sayfadaki ziyaret edilen linkler için bir stil belirler. A:active - Bu sayfa üzerindeki aktif linkler için bir stil belirler. Bir linkin aktif olması demek, onun tıklanabilir olması demektir. A:hover - Bu mouse üzerine geldiğinde olabilecek değişmeleri belirleyen bir stildir. Kullanabileceğiniz CSS Özellikleri: color (renk) text-decoration (yazıya süs) font-weight (yazı kalınlık inceliği) font-style (yazı stili) font-family (yazı gurubu) font-size (yazı boyutu) background-color (arkaplan rengi) LİNK ÖRNEKLERİ: Altıçizili ve Renkli Linkler Haydi birkaç link efekti hazırlayalım. Bir linkin mouse üzerinde geldiğinde renginin değişmesi ve altının çizili olmasını istiyoruz. Bunun için aşağıdaki kodu kullanabilirsiniz. A:link {text-decoration: bold; color: red;} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: black;} Arkaplanı Renkli Linkler Bazı web sitelerinde mouse'u üzerine getirince bir linkin arkaplan resminin değiştiğini görmüşsünüzdür. Bunun nasıl yapıldığını görelim: A:link {background: #FFCCCC; text-decoration: none} A:visited {background: #FFCCCC; text-decoration: none} A:active {background: #FFCCCC; text-decoration: none} A:hover {background: #FFFFFF; font-weight:bold; color: black;} NOT: Netscape ve Firefox tarayıcılarının eski sürümlerinde çalışmayacaktır. Linklerin boyutunu değiştirmek Bir diğer efekt de, mouse üzerine geldiği zaman yazının boyutunun değişmesidir. Bunu yapmak için aşağıda yer alan kodu kullanabilirsiniz. A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size:20; font-weight:bold; color: red;} |
|
|
| Seçenekler | |
| Stil | |
|
|
Ağaç şeklinde