CSS’i HTML üzerinde kullanmak için 3 yöntem (yerel-genel-harici) olduğunu daha
önce belirtmiştik. Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl kullanacağımızı
görelim.
1. A Etiketinin CSS ile KullanımıBildiğiniz üzere a etiketi HTML’ye ç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 pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada
görülecek ilk halidir.
Visited : Link tıklandıktan sonra etiketin aldığı değerdir.
Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki
durumdur.
Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o
şekilde verilir.
Örnek:
Css
You are not allowed to view links.
Register or
Login
You are not allowed to view links.
Register or
Login
You are not allowed to view links.
Register or
Login
Linkin üzerine geldiğinde stil
değişecek
<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 degiştiğini görün</a><br>
<a href="#" class="aktif">Linkin aktif durumu</a><br>
<a href="#" class="değisken">Linkin üzerine geldiğinde stil
değişecek</a><br>
</body>
</html>2. Bağlantılı CSS Dosyalarının Hazırlanması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 kaydediniz.
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 kaydediniz.
<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="örneksel"> </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şturur. 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şlidir. <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 tezgâhlarına , karmaşık laboratuvar
ve hastane aygıtlarına kumanda etmekte kullanılır. 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 özelliklerini ve yararlarını
birleştirir; örneksel bilgisayarlara oranla daha fazla kesinlik, sayısal bilgisayarlara
oranla daha fazla deneteleme sağlar.
<br><a href="css.html#bsl">Başa Dön</a>
</p> </td> </tr> </table>
</body>
</html>
0 Yanıt
4505 Gösterim