CSS Çeşitleri

Css’in (Stil Şablonu) 3 farkli kullanim alani vardir. Bunlar ;

Yerel, yani sayfada sadece bir kez: Yerel stil şablonlar bir html etiketi için özel olarak kullanilirlar.

Global, yani tüm sayfa için: Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olmasi istendiginde kullanilirlar.


Baglantili, yani birden çok sayfa için: Baglantili stil şablonlar birçok sayfada ayni biçimde olmasi istendiginde kullanilirlar.


2.1 Yerel Stil Şablonu
Başlangiçta belirttigimiz gibi Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulundugu yerde (yerel) etkiler. Şimdi bir örnek verelim.


<html>
<head>
<title>Css</title>
</head>
<body>
<h2>Web Teknikleri</h2><br>
<h2 style="font-size:20pt; color:blue">Web Teknikleri</h2>
</body>
</html>


Bu örnegimizi css.htm adiyla kaydedip tarayici yardimiyla açtigimizda iki tane Web Teknikleri yazisiyla karşilacagiz. Fakat bunlarin yazim tarzi farkli olacak. Çünkü biz ikinci <h2> etiketimize etkimek üzere bir stil şablon ekledik.


2.2 Global Stil Şablonu
Global Stil Şablonlari bir önceki örnekte yaptigimiz <h2> etiketinin tüm sayfada ayni özellikte olmasi istendiginde kullanilir. Bunu için Stil Şablon özellikleri sayfanin başlangicinda (<head></head> etiketleri arasinda) tanimlanmalidir.

Örnek ile biraz daha ayrintili inceleyelim.


<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
h2 {font-size:20pt; color:blue}
-->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>


Burada ne yapmiş olduk? Sayfa içerisinde kullanacagimiz tüm <h2> etiketlerinin özelliklerini sabitlemiş olduk. Yani sayfa içerisinde nerede kullanirsaniz kullanin <h2> etiketinin stil özellikleri hep ayni olacaktir. Yazim kurallarina biraz deginirsek, Stil Şablon tanimlamalari <head> </head> etiketleri arasinda <style type="text/css"> ile başlayip </style> ile bitmelidir. <!-- etiketi ile Css’den anlamayan tarayicilarin bu kismi geçmesini sagliyoruz. Bu saklama işlemi --> etiketi ile son bulur.


2.3 Baglantili Stil Şablon
Global stil şablonu ise sitemiz içerisindeki tüm sayfalarda ayni stil özelliklerini kullanmak istedigimizde kullaniriz.

Her zaman oldugu gibi stillerimizi yukarida örneklerini verdigimiz şekilde hazirlariz. Fakat bunu html dosyamizin içerisinde degil de boş bir sayfaya yazariz. Sonra onu kaydederken css uzantili bir şekilde kaydederiz. Ardindan da html dosyamizin içerisine yine <head> </head> etiketleri arasina
<link rel="stylesheet" type="text/css" href="dosya_ismi.css">
şeklinde ekleriz. Şimdi hemen bir örnek verelim.


h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}


Bu dosyamizi stil.css olarak kaydedelim. Şimdi de html dosyamiza gelelim. Html dosyamizin kodlari da şu şekilde olmalidir.



<html>
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>


Html dosyasinin kodlari arasinda geçen <link rel="stylesheet" type="text/css" href="stil.css"> kodu stil.css dosyasindaki stil özelliklerini kullanmamizi saglar. Bu kodu istedigimiz diger html dosyalarina da ekledigimizde orada da kullanabiliriz.

 
 

Anasayfa | Web Tasarim | Domain | Hosting | Referanslar | SSS | Forumlar | Iletişim | Link Site Haritasi

Copyright 2007 © Bodemay
Designed by Bodemay Bilişim Sistemleri
Daha fazlasi