CSS Harici sitil dosyalarının kullanılması - PcTekno.NET | PTN

Konumunuz: Anasayfa

CSS

CSS Harici sitil dosyalarının kullanılması

Cumartesi, 05 Mayıs 2007

Harici sitil dosyalarının kullanılması

Hazırlanmış sitil dosyalarının herhangi bir sayfa içerisine yerleştirilmesi için mutlaka bu sayfa içerisine yazılması gerekmez. Bunun yerine bu sitil dosyasına bir link vermemiz yeterlidir. Böylece bu sitil sayfası browser tarafından yüklenerek içerisindeki sitiller kullanılabilir.

Böyle bir kullanım bize site içerisindeki tüm sitillerin bir dosya içerisinden denetlenmesini ve istendiğinde tek bir dosyanın değiştirilerek bu dosyanın kullanıldığı tüm sayfaların sitillerinin değiştirilmesi sağlanabilir. Bunun için <LINK> tagını kullanıyoruz. Bu tagın kullanımı :

 
<LINK REL="stylesheet" href="sitilin_bulunduğu_dosya" TYPE="text/css">

şeklindedir. Burada HREF özelliği ile sitil dosyasının tam veya göreceli adresi verilmektedir. Sitil dosyaları css uzantılı olarak kayıt edilen düz yazı dosyalarıdır.

Şimdi bir örnek ile harici sitil dosyalarının kullanımını görelim.

 
.onemli
  {
  background-color : white;
  color : red;
  font-size:14;
  font-type:verdana;
  margin : 20;
  border-width:1;
  border-color:red;
  border-style:solid;
  }
.buyuk
  {
  background-color : yellow;
  color: blue;
  font-size:24;
  }
BODY 
  {
  margin : 30;
  background-color:black;
  color:white;
  }

Yukarıdaki ifadeyi sitiller.css olarak kayıt edin.

 
<HTML>
<HEAD>
  <TITLE> Sitillerin kullanımları </TITLE>
  <LINK TYPE="text/css" REL="stylesheet" href="sitiller.css">
</HEAD>
<BODY>
<H1> Sitil uygulamaları</H1>
Bu bölümde sitil sınıflarının kullanılmasını görüyoruz.
  <DIV CLASS="onemli">
  <B CLASS="buyuk">S</B>ınıflar bize birden çok alana aynı 
  sitilleri uygulamamızda büyük kolaylıklar oluştururlar.
  </DIV>
<P><SPAN CLASS="buyuk">B</SPAN>üyük kolaylıklar sağlar. 
Böylece aynı özelliklere
sahip bölümler için yeni sitiller hazırlamak zorunda kalmayız.
</BODY>
</HTML>

Yukarıdaki dosyayı sitildeneme.htm olarak sitiller.css dosyasının olduğu yere kayıt ediniz ve browserde açarak sonucu görün <A href="ornekler.php?sayfa=204">görün</A>.

Yorumlar (2) Add Comment

Bu içeriğe ait yorumları masaüstüne alabilirsiniz

...
Yazan Zeynep, Nisan 21, 2008

merhaba
css (stil şablonları) adında bi kitabım var. bunun içindeki örnekleri ödev olarak yapmamız gerekiyor. ".css" uzantılı kaydetmemiz gerektiğini yazmışlar. not defterinde yazıyorum ve uzantısına da .css diyorum ancak html'deki gibi internet explorer sayfasıyla açmıyor. yani ne yaptığımı göremiyorum. bu konuda bana yardımcı olabilir misiniz?

merhaba
Yazan unaltutay, Nisan 21, 2008

Merhaba , öncelikle şu makaleyi http://www.pctekno.net/Web-Tasarim/Sitiller/Css-nedir-Sitillerin-kullanim-amaclari.html bir okumanızda fayda var.Css dosyalarının etkilerini görebilmeniz için bir .html dosyası yaratıp (yukarıdaki makalede en son verilmiş bir basit html sayfa kodlarını alın bir txt dosyası yaratıp hepsini bu txt dosyasına kopyalayın.) Deneme adında bir klasörün içine atın.Daha sonra da oluşturduğunuz css dosyasını da aynı klasör içine sitiller adıyla kaydedin.Bu html dosyasını da internet exploerer den çağırdığınız zaman css de ne yaptığınızın etkilerini görebilirsiniz...

Yorum Yazın

Yorum ekleyebilmeniz için giriş yapmanız gerekiyor. Henüz bir hesabınız yoksa lütfen kayıt olun.