|
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 Etiketi | Etiketin Web Sayfasındaki görüntüsü |
<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
h2 {font-size:30pt; color:red}
-->
</style>
</head>
<body>
<h2>Web Bilgileri</h2>
</body>
</html>
|
Web Bilgileri
|
Yukarıdaki örnekte 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
Css’den anlamayan tarayıcıların bu kısmı geçmesini sağlıyoruz. Bu saklama işlemi
--> etiketi ile son bulur.
Bağlantılı Stil Şablon
Global stil şablonu ise sitemiz içerisindeki tüm sayfalarda aynı stil
özelliklerini kullanmak istediğimizde kullanabiliriz. Şöyleki;
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 Etiketi |
Etiketin Web Sayfasındaki görüntüsü |
<html>
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head> <body>
<h1>Web Bilgileri</h2>
<h2>Web Bilgileri</h2>
<h3>Web Bilgileri</h2>
</body>
</html>
|
Web Bilgileri
Web Bilgileri
Web Bilgileri
|
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.
Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız
stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan :)
Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız.
Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu kavrama ve
anında uygulamanız daha kolay olacak. Şimdi Css’in etkidiği Html etiketlerini hangi
özelliklerini değiştirdiğini görelim.
Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta
tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem
de paradan :) Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu
kullanacağız. Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu
kavrama ve anında uygulamanız daha kolay olacak. Şimdi Css’in etkidiği Html etiketlerini
hangi özelliklerini değiştirdiğini görelim
|