CSS 2
(Cascading Style Sheets = Yigilmali Stil Kagitlari) |
Geçen dersimiz de CSS' nin ne oldugunu, ne ise yaradigini ve bize nasil yardimci olacagindan söz etmistik. CSS ile kolayca rengarenk sayfalar yapabildigimizi de ögrenmistik.. Bu dersimiz de ise Linklerimizi rengarenk yapacagiz ve bunun CSS ile çok kolay oldugunu ögrenecegiz..
Simdi vakit kaybetmeden ise koyulalim.. Bakalim neler yapabiliyoruz..
|
| CSS ile dinamik ve rengarenk linkler: |
Önce link etiketimizi bir hatirlayalim:
<a href="ornek.htm">Bu bir Örnek</a>
Yukaridaki örnekte görünce hatirladiniz sanirim. Hiç unutmamistiniz ki:)
Simdi de her zaman ki gibi örnekler ile anlatmaya basliyalim dinamik CSS linklerimizi...
|
| Dinamik çook dinamik linkler: |
<html>
<head>
<style type="text/css">
<!--
a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000; text-decoration: none}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #FF0000; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #FF0000; text-decoration: underline}
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000; text-decoration: none}
-->
</style>
</head>
<body>
<p> <a href="deneme.htm"> Dinamik CSS link denemesi </a> </p>
</body>
</html> |
| Simdi de bu kod kümesinin olusturdugu sayfaya bakalim: |
| |
| Bir CSS dosyasi olusturmak ve bunu sayfaya baglamak: |
CSS kodlari sayfamizda çok yer tutuyor olabilir. Bunun için CSS kodlarimizi ayri bir not defteri sayfasinda yazariz ve uzantisini .css yapariz. Daha sonra bunu sayfamiza baglariz.
Isterseniz bunu bir örnek ile açiklayalim..
|
| Dilerseniz benim hazirlamis oldugum .css dosyasini yükleyin ya da kendiniz yazdiginiz CSS etiketleri ile bir .css dosyasi olusturun. Bunun için Not Defteri yeterli.. Sadece sayfanizin basina yazacaginiz CSS etiketlerini Notdefterine yazmak ve uzantisini .html degil de .css yapmak... |
Yukaridaki linke tikladiginiz da benim yapmis oldugum stiller.css dosyasini bilgisayariniza yüklersiniz. Bunu .html dökümanlarinizin oldugu klasöre kopyalayin.. Ve bu dosyayi sayfaniza eklemeniz için de:
<link rel="stylesheet" type="text/css" href="stiller.css">
etiketini sayfanizin <head> </head> etiketleri arasina yazmaniz gerekir.. Böylece .css uzantili dosyayi sayfaniza link yolu ile eklemis olursunuz.
|
