Css’in (Stil Şablonu) 3 farklı kullanım alanı
vardır. Bunlar ;
- Yerel, yani sayfada sadece bir kez:
Yerel stil şablonlar bir html etiketi için özel olarak
kullanılırlar.
- Global, yani tüm sayfa için:
Global stil şablonlar sayfadaki tüm html etiketlerinin
belirlenen özellikte olması istendiğinde kullanılırlar.
- Bağlantılı, yani birden çok sayfa
için: Bağlantılı stil şablonlar birçok sayfada aynı biçimde
olması istendiğinde kullanılırlar.
2.1 Yerel Stil Şablonu
Başlangıçta belirttiğimiz gibi Yerel Stil
Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu 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 örneğimizi
css.htm adıyla
kaydedip tarayıcı yardımıyla açtığımızda iki tane Web Teknikleri
yazısıyla karşılacağız. Fakat bunların yazım tarzı farklı olacak.
Çünkü biz ikinci <h2>
etiketimize etkimek üzere bir stil şablon ekledik.
2.2 Global Stil Şablonu
Global Stil Şablonları bir önceki örnekte
yaptığımız <h2>
etiketinin tüm sayfada aynı özellikte olması istendiğinde
kullanılır. Bunu için Stil Şablon özellikleri sayfanın
başlangıcında (<head></head>
etiketleri arasında) tanımlanmalıdır.
Örnek ile biraz daha ayrıntılı 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 yapmış olduk? Sayfa içerisinde
kullanacağımız tüm <h2>
etiketlerinin özelliklerini sabitlemiş olduk. Yani sayfa
içerisinde nerede kullanırsanız kullanın
<h2>
etiketinin stil özellikleri hep aynı olacaktır. Yazım kurallarına
biraz değinirsek, Stil Şablon tanımlamaları
<head> </head>
etiketleri arasında <style type="text/css">
ile başlayıp </style>
ile bitmelidir. <!--
etiketi ile Css’den anlamayan tarayıcıların bu kısmı geçmesini
sağlıyoruz. Bu saklama işlemi -->
etiketi ile son bulur.
2.3 Bağlantılı Stil Şablon
Global stil şablonu ise sitemiz içerisindeki
tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde
kullanırız.
Her zaman olduğu gibi stillerimizi yukarıda
örneklerini verdiğimiz şekilde hazırlarız. Fakat bunu html
dosyamızın içerisinde değil de boş bir sayfaya yazarız. Sonra onu
kaydederken css
uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın
içerisine yine <head> </head>
etiketleri arasına
<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 dosyamızı
stil.css
olarak kaydedelim. Şimdi de html dosyamıza gelelim. Html
dosyamızın kodları da şu şekilde olmalıdır.
<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 dosyasının kodları arasında geçen
<link rel="stylesheet" type="text/css"
href="stil.css"> kodu
stil.css
dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu
istediğimiz diğer html dosyalarına da eklediğimizde orada da
kullanabiliriz.
|