CSS 1 (Yazılara farklı özellikler)
CSS 2 (Linklere farklı özellikler)
CSS 3 (Sınıf ve kimlik seçiciler)
CSS 4 (Denetlenebilir stil özellikleri)

CSS 2
(Cascading Style Sheets = Yığılmalı Stil Kağıtları)


Geçen dersimiz de CSS' nin ne olduğunu, ne işe yaradığını ve bize nasıl yardımcı olacağından söz etmiştik. CSS ile kolayca rengarenk sayfalar yapabildiğimizi de öğrenmiştik.. Bu dersimiz de ise Linklerimizi rengarenk yapacağız ve bunun CSS ile çok kolay olduğunu öğreneceğiz..

Şimdi vakit kaybetmeden işe koyulalım.. Bakalım neler yapabiliyoruz..

CSS ile dinamik ve rengarenk linkler:

Önce link etiketimizi bir hatırlayalım:

<a href="ornek.htm">Bu bir Örnek</a>

Yukarıdaki örnekte görünce hatırladınız sanırım. Hiç unutmamıştınız ki:)
Şimdi de her zaman ki gibi örnekler ile anlatmaya başlıyalım 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>
Şimdi de bu kod kümesinin oluşturduğu sayfaya bakalım:
Bir CSS dosyası oluşturmak ve bunu sayfaya bağlamak:


CSS kodları sayfamızda çok yer tutuyor olabilir. Bunun için CSS kodlarımızı ayrı bir not defteri sayfasında yazarız ve uzantısını .css yaparız. Daha sonra bunu sayfamıza bağlarız.
İsterseniz bunu bir örnek ile açıklayalım..

Dilerseniz benim hazırlamış olduğum .css dosyasını yükleyin ya da kendiniz yazdığınız CSS etiketleri ile bir .css dosyası oluşturun. Bunun için Not Defteri yeterli.. Sadece sayfanızın başına yazacağınız CSS etiketlerini Notdefterine yazmak ve uzantısını .html değil de .css yapmak...


stiller.css dosyasını yüklemek için tıklayın.

Yukarıdaki linke tıkladığınız da benim yapmış olduğum stiller.css dosyasını bilgisayarınıza yüklersiniz. Bunu .html dökümanlarınızın olduğu klasöre kopyalayın.. Ve bu dosyayı sayfanıza eklemeniz için de:

<link rel="stylesheet" type="text/css" href="stiller.css">

etiketini sayfanızın <head> </head> etiketleri arasına yazmanız gerekir.. Böylece .css uzantılı dosyayı sayfanıza link yolu ile eklemiş olursunuz.




 Yazdırılabilir Sayfa...