Css’i Html içinde kullanmak için 3 yöntem
(yerel-global-bağlantılı) olduğunu daha önce belirtmiştik. Şimdi
ise komple bir css dosyasını Html üzerinde nasıl kullanacağımız
görelim. Fakat öncelikle Html’deki <a> etiketinin diğer
etiketlerden farklı olarak bir kullanım tarzı bulunmakta. İlk önce
ona değinelim.
A etiketinin Css ile kullanımı
Bildiğiniz üzere <a> etiketi Html’e
çok büyük bir özellik katan link etiketidir. Bu etiket ile diğer
bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu
etiketin belli durumlarda aldığı değişik değerler vardır. Yani
link tıklandığında etiket artık visited (ziyaret edilmiş)
pozisyonuna geçecektir. Biz Css yardımıyla <a> etiketinin
aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi <a>
etiketinin aldığı pozisyonları görelim :
İlk poziyon linke herhangi bir tıklama
olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir.
Visited : Bu pozisyon link tıklandığından
sonra etiketin aldığı değerdir. Active : Bu pozisyon linkin aktif
olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur.
Hover : Bu pozisyon Linkin üzerine gelindiği durumdur. Yani linkin
üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o
şekilde verilir.
Şimdi <a> etiketi için bir stil
dosyası yapalım.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-
A.normal
{
background-color:white;
color:blue;
}
A.ziyaret:visited
{
background-color:white;
color:maroon;
font-weight:normal;
}
A.aktif:active
{
background-color:white;
color:red;
font-weight:normal;
}
A.degisken:hover
{
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style>
</head>
<body>
<a href="#" class="normal">Linkin normal durumu</a><br>
<a href="#" class="ziyaret">Linki tıklayın ve değiştiğini görün</a><br>
<a href="#" class="aktif">Linkin aktif durumu</a><br>
<a href="#" class="degisken">Linkin üzerine geldiğinde stil değişecek</a><br>
</body>
</html>
Şimdi <a> etiketinin özel durumunu da
gördükten sonra esaslı bir css kullanma tekniğini görelim. Bu
örneğimizde <div>, <table>, <span>, <h1>...<h6>,
<p>, <a> gibi Html etiketlerini kullanırken nasıl
bir yöntem izlememiz gerektiğini göreceğiz.
İlk öncelikle stillerimiz hem bağlantılı hem
global hem de yerel kullanacağız. Bunu belirteyim. Böylelikle
sizde nasıl bir yol izlemenize karar verin.
Şimdi bağlantılı css dosyamızı hazırlayalım.
Hatırlayacağınız üzere bu dosyanın uzantısı css olmalı. Bu css
dosyasını Html dosyamızın içerisinde çağıracağız. Aşağıdaki
kodları stil.css adıyla kaydedelim.
A {font-style : normal;
color : navy;
font-family : Times New Roman ! important;
text-decoration : none; <!-- bu satır linkin altında satır olmamasını sağlar -->}
A:Visited {font-family : Times New Roman ! important;
font-style : italic;
color : olive; }
A:Active { font-family : Times New Roman;
color : red;}
A:Hover {text-decoration : underline;
font-family : Times New Roman ! important;
font-weight : bold;
font-style : normal;
color : maroon;}
BODY { background: white url("fon.gif");
background-repeat: repeat-y;
background-position: left; }
p#sol {position : relative;
visibility : visible;
left : 30pt;
width : 450pt;
font-family:"Verdana,Arial,Helvetica" ! important;
font:15pt;}
Aşağıdaki kodları da css.html adıyla
kaydedelim. (Dikkat ! html uzantlı kaydedin )
<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
.onemli {font-weight:bold;}
h4 {color:blue;
position : relative;
visibility : visible;
left : 25pt;
font-size:large;
.solic { color:brown;
font-family:"Verdana,Arial,Helvetica";
position : relative;
visibility : visible;
left : 20pt;
font-weight:bold; }
li { list-style-type : circle;
list-style-position : inside;
list-style : decimal;}
; -->
</style>
<link rel=stylesheet href="stil.css" type="text/css">
</head>
<body>
<table width="500" align="center">
<tr><td> <!-- Global -->
<h4>Bilgisayar;<a name="bsl"> </a></h4>
<!-- Eğer koordinatları tam olarak ayarlamak istiyorsanız (
MSIE ve NN icin) Global Stil Şablonu Kullanmalısınız. -->
<!-- Bağlantılı -->
<p id="sol">
Aldığı komutlar uyarınca, veri işleyerek problem çözen otomatik
elektronik aygıtların ortak adı. Bu tür aygıtlar, çalışma
ilkeleri,donanım tasarımları ve uygulama alanları bakımından
örneksel, sayısal ve karma bilgisayarlar olarak <font class="onemli">üçe</font>
ayrılır.</p>
<p id="sol"> <ul>
<li><a href="css.html#orneksel">Örneksel (analog) bilgisayarlar</a>
<li><a href="css.html#sayisal">Sayısal bilgisayarlar</a>
<li><a href="css.html#karma">Karma bilgisayarlar</a>
</ul>
</p> <p class="solic">
Örneksel
(analog) bilgisayarlar<a name="orneksel"> </a></p>
<p id="sol">Açısal konum ya da
gerilim gibi değişken nicelikleri temsil eden veriler üzerinde işlem yapar
ve çözülmesi istenen matematiksel problemin fiziksel bir örneğini oluştururlar.
Sıradan diferensiyel denklemleri çözebilen örneksel bilgisayarlar, sistem
mühendisliğinde, özellikle bazı süre ve donatımların gerçek zamanlı benzetim
modellerinin oluşturulmasına çok elverişlidirler. Bu bilgisayarların bir
başka yaygın kullanım alanı da elektrik dağıtım sistemi gibi şebekelerin
analizidir.<br>
<a href="css.html#bsl">Başa
Dön</a>
</p>
<p class="solic">Sayısal
bilgisayarlar,<a name="sayisal"> </a></p>
<p id="sol">Çeşitli üretim süreçlerine,
takım tezgahlarına , karmaşık laboratuvar ve hastane aygıtlarına kumanda
etmekte kullanılırlar. Aynı özellikten, uçakların ve uzay araçlarının karmaşık
iletişim sistemlerinin otomatizasyonunda da yararlanılır. Sayısal bilgisayarlar
ayrıca, eğitimde yardımcı olarak (örn. temel dil ve matematik becerilerinin
kazandırılmasında) , bilimsel araştırmalarda ise verilerin analizi ve matematiksel
modellerin geliştirilmesi amacıyla kullanılır.
<br> <a href="css.html#bsl">Başa
Dön</a> </p>
<p class="solic">Karma bilgisayarlar,<a
name="karma"> </a></p>
<p id="sol">Örneksel ve sayısal
bilgisayarların özelliklerine ve yararlarını birleştirirler; örneksel bilgisayarlara
oranla daha fazla kesinlik, sayısal bilgisayarlara oranla daha fazla deneteleme
sağlarlar.
<br><a href="css.html#bsl">Başa
Dön</a>
</p> </td> </tr> </table>
</body>
</html>
Burada birkaç konuya açıklık getirelim.
Bazı stil özelliklerinin sonunda gördüğünüz
!important ifadesi ile ziyaretçi kendi bilgisayarındaki tarayıcı
özelliklerini değiştirmiş olsa dahi bu değerleri kullanmamasının
bizim belirttiğimiz değerleri kullanmasını söylemiş oluyoruz. Font
özelliklerinde çoğu zaman birden çok font ismi kullandık. Bunun
nedeni eğer ziyaretçinin makinasında ilk font yoksa ikincisi o da
yoksa üçüncü font kullanılır. Şayet o fontta yoksa tarayıcının
kendi banko fontu kullanılır. Böylelikle bizde değişik ziyaretçi
makinalarında sayfamızın nasıl görünebileceğini öncelikle kontrol
altına almış oluruz.
|