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.
|
PRIVATE<html>
<head>
<title>Css</title>
</head>
<body>
<h2>Web Teknikleri</h2><br>
<h2 style="font-size:20pt; color:blue">Web Teknikleri</h2> <br /> </body> <br /> </html> <o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal">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.
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.
|
PRIVATE<html>
<head>
<title>Css</title>
<style type="text/css"> <br /> <!-- <br /> h2 {font-size:20pt; color:blue} <br /> --> <br /> </style> <br /> </head> <br /> <body><br /> <h2>Web Teknikleri</h2> <br /> </body><br /> </html> <br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--><o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal">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"></b> ile başlayıp <b></style></b> ile bitmelidir. <b><!--</b> etiketi ile Css’den anlamayan tarayıcıların bu kısmı geçmesini sağlıyoruz. Bu saklama işlemi <b>--></b> etiketi ile son bulur. <o:p></o:p></span></p>
<p class="MsoNormal">
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"></b> <br /> şeklinde ekleriz. Şimdi hemen bir örnek verelim. <o:p></o:p></span></p>
<table style="margin-left: 10.5pt; border-collapse: collapse;" class="MsoNormalTable" border="0" cellpadding="0" cellspacing="0">
|
PRIVATEh1 {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.
|
|
|
PRIVATE<html>
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="/stil.css"><br /> </head> <br /> <body><br /> <h1>Web Teknikleri</h2> <br /> <h2>Web Teknikleri</h2> <br /> <h3>Web Teknikleri</h2> <br /> </body><br /> </html> <br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--><o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal">Html dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css" href="/stil.css"></b> kodu <b>stil.css</b> dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu istediğimiz diğer html dosyalarına da eklediğimizde orada da kullanabiliriz. <o:p></o:p></span></p>
<p class="MsoNormal">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 :)
HTML etiketleri ile CSS
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.
| 
| Gösterim: 1046
Category: