webmaster
 
›
Cevapla
06-11-2007 21:56:42
kadınca
 

CSS Çeşitleri

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.

Yerel Stil Şablonu
Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Şimdi bir örnek verelim.
  1. <LI class="li1 sectiontableentry1"><html>
    <LI class="li1 sectiontableentry1"><head>
    <LI class="li1 sectiontableentry1"><title>Css</title>
    <LI class="li1 sectiontableentry1"></head>
    <LI class="li2 sectiontableentry1"><body>
    <LI class="li1 sectiontableentry1"><h2>.............</h2><br>
    <LI class="li1 sectiontableentry1"><h2 style="font-size:20pt; color:blue">Pc-Kopat.com</h2>
    <LI class="li1 sectiontableentry1"></body>
  2. </html>
Bu örneğimizi css.htm adıyla kaydedip tarayıcı yardımıyla açtığımızda iki tane Pc-Kopat.com yazısıyla karşılacağız. Fakat bunların yazım tarzı farklı olacak. Çünkü biz ikinci "h2" etiketimize etkilemek ü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.
  1. <LI class="li1 sectiontableentry1"><html>
    <LI class="li1 sectiontableentry1"><head>
    <LI class="li1 sectiontableentry1"><title>Css</title>
    <LI class="li1 sectiontableentry1"><style type="text/css">
    <LI class="li2 sectiontableentry1"><!--
    <LI class="li1 sectiontableentry1">h2 {font-size:20pt; color:blue}
    <LI class="li1 sectiontableentry1">-->
    <LI class="li1 sectiontableentry1"></style>
    <LI class="li1 sectiontableentry1"></head>
    <LI class="li2 sectiontableentry1"><body>
    <LI class="li1 sectiontableentry1"><h2>Pc-Kopat.com</h2>
    <LI class="li1 sectiontableentry1"></body>
  2. </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" etiketleri arasında
  1. <style type="text/css">
ile başlayıp
  1. </style>
ile bitmelidir.

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 etiketleri arasına
  1. <link rel="stylesheet" type="text/css" href="dosya_ismi.css">


şeklinde ekleriz. Şimdi hemen bir örnek verelim.
  1. <LI class="li1 sectiontableentry1">h1 {font-size:13pt; color:green}
    <LI class="li1 sectiontableentry1">h2 {font:20pt; color:blue}
  2. 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.
  1. <LI class="li1 sectiontableentry1"><html>
    <LI class="li1 sectiontableentry1"><head>
    <LI class="li1 sectiontableentry1"><title>Css</title>
    <LI class="li1 sectiontableentry1"><link rel="stylesheet" type="text/css" href="stil.css">
    <LI class="li2 sectiontableentry1"></head>
    <LI class="li1 sectiontableentry1"><body>
    <LI class="li1 sectiontableentry1"><h1>Pc-Kopat</h2>
    <LI class="li1 sectiontableentry1"><h2>Pc-Kopat</h2>
    <LI class="li1 sectiontableentry1"><h3>Pc-Kopat</h2>
    <LI class="li2 sectiontableentry1"></body>
  2. </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.

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.

Bir önceki yazı Margin ve Padding ? Farkları nelerdir ? hakkında bilgi vermektedir.

Cevapla

"CSS Çeşitleri" konusu hakkında etiketler
ces cesi cesidi cesit cesitleri css global kac kullanimina nelerdir ornek stil tipleri vardir yerel

Margin ve Padding ? Farkları nelerdir ? Önceki | Sonraki CSS Birimleri




Saat: 16:46 - Webmaster Forumu - Rss - Arşiv
İletişim Bilgileri, Contact Us, Kullanım Sözleşmesi, Gizlilik