VaTaN

► "Mahzenden Göklere" ◄

CSS Dersleri 5


h1.kirmizi {color:red}
–>
</style>
</head>
<body>
<h1 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h1 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>

Burada sınıf seçicisini sadece h1 için tanımladık. Sınıf seçicisinin ikinci türüde genel bir sınıf seçicisi tanımlamaktır. Bunu da bir örnekle görelim.


<html>
<head>
<title>Css</title>
<style type=”text/css”>
<!-
.mavi {color:blue}
.kirmizi {color:red}
–>
</style>
</head>
<body>
<h3 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h4 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>

4.2 Id Selector (Id Seçicisi)

Id Selector’lerini tanımlayıcı adlarının önündeki # işaretinden tanırız. Html belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir Html etiketine stil vermekte kullanılırlar. Bu etiketler span’dan tutunda paragraf(p)’a kadar olabilir.
Bir örnekle açıklayalım.


<html>
<head>
<title>Css</title>
<style type=”text/css”>
<!– Eski tür tarayıcılardan kodumuzu saklayalım –>
#mavi
{
background:blue;
color:white;
}
#yesil
{
background:green;
color:white;
}

–>
</style>
</head>
<body>
<span id=mavi>Bu yazının arkafon rengi mavi font rengi beyaz</span><br><br>
<span id=yesil>Bu yazının arkafon rengi yeşil font rengi beyaz</span>
</body>
</html>

Css’i Html üzerinde 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-2-.. , 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 kara 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;}

Mart 15, 2007 - Posted by | Genel

Henüz yorum yapılmamış.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s

%d blogcu bunu beğendi: