Bilişim HaberleriSuperim.netVUHUVAnsiklopedimPhp.net
 

Css Yazım Kuralları
Css ID Class ve Etiket Seçiciler
 

Css Kullanım Şekilleri

Sayfanıza 3 farklı yol kullanarak css ekleyebilirsiniz.

  1. Harici stil  sayfası (Extarnal style sheet)
  2. Dahili stil saytası  (internal style sheet)
  3. Etiket içi stil  (inline style sheet)

Harici Stil Sayfası

Kullanacağınız stil özelliklerini birden çok sayfaya uygulamak istediğinizde harici stil sayfası oluşturmanız kolaylık sağlayacaktır. Harici stil dosyası ile bir dosya içerisinden web sayfaınızın görünüşünde kolaylıkla değişiklikler yapabilirsiniz. Harici stil dosyasının kullanılcak bütün sayfalarda tanımlanması gereklidir. Tanımlama yapmak için head bloğu içerisinde <link> etiketi ile kullanıcağımız stil dosyasını sayfamıza bağlarız.

Örnek :  Harici stil sayfası bağlantısı

<head>
<link rel="stylesheet" type="text/css" href="stildosyasi.css">
</head>

 Bir stil dosyası herhangi bir metin düzenleyicide yazılabilir. Stil dosyasının uzantısı .css olmalıdır. Bir harici stil dosyasında html etiketleri yer almaz.

Örnek : Bir stil dosyasının içeriği aşağıdaki gibidir.

body {font-family:Verdana;font-size:12px;}
h1 {color:red;}
p {margin-left:10px;}

Örnek : Bir özellik değeri ile birim arasında boşluk bırakmayınız.

p {margin-left:10px;} /*Dogru yazım şekli */
p {margin-left:10 px;} /*Yanlış yazım şekli */

 

Dahili Stil Ekleme

Dahili stil sayfaları tek bir sayfada gerekli olan biçimlendirmeler için kullanılmalıdır. Dahili bir stil eklemek için head bloğu içerisinde <style> etiketleri kullanılar.

Örnek: Dahili stil sayfası kullanımı

<head>
   <style type="text/css">
      body {font-family:Verdana;font-size:12px;}
      h1 {color:red;} 
      p {margin-left:10px;}
   </style>
</head>

 

Etiket içi Stil Ekleme

Etiket içi stil özellikleri eklemek sitil şablonlarını bir çok  sağladığı avantajı yok etmektedir. Stil sayfalarında belirli özellikler tek bir yerden yazılıp kolaylıkla değiştirilebildiğince çokbüyük avantaj sağlar Ancak etiket içi sitil kullanımları bu avantajı sağlamaz. Çok gerekmedikçe bu şekilde kullanmamanız daha verimli olacaktır.

Bu kulanım da sitil özellikleri verilecek olan etikete style="" parametresi eklenerek çift tırnak (") işaretleri arasına bildirimler yazılır.

Örnek: Etiket içi stil sayfası kullanımı

<p style="margin-left:10px;color:red"> 
   Örnek bir satır içi sitil kullanımı
</p>

 

Ekleyen:admin