CSS’i Web Sayfalarına Dahil Etmek

banner

CSS stillerini HTML belgenizde kullanabilmek için onları belgenize dahil etmeniz gerekmektedir. CSS stillerinizi belgenize dahil etmeniz için 4 farklı yol vardır. En sık kullanılan yöntemler satır içi CSS ve harici CSS’dir.

Gömülü CSS (<style> elementi)

<style> elementini kullanarak CSS kurallarınızı bir HTML belgesine dahil edebilirsiniz. Bu etiket <head> … </head> etiketlerinin içine yerleştirilir. Bu sözdizimi kullanılarak tanımlanan kurallar, belgede bulunan tüm öğelere uygulanır. İşte genel sözdizimi:

Gömülü CSS Öznitellikleri (<style> elementiyle ilişkilendirilen öznitelikler)
ÖznitelikDeğerTanım
type text/cssStil sayfasının dilini, içerik türü (MIME türü) olarak belirtir. Bu öznitelik zorunludur.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all
Belgenin görüntüleneceği aygıtı belirtir. Varsayılan değer all yani hepsidir. İsteğe bağlı bir özelliktir.

Satır İçi CSS

Stil kurallarını tanımlamak için herhangi bir HTML öğesinde style özniteliğini kullanabilirsiniz. Bu kurallar yalnızca o öğeye uygulanacaktır. İşte genel sözdizimi:

<element style = "...stil kuralları....">
Satır İçi CSS Öznitellikleri
ÖznitelikDeğerTanım
stylestil kurallarıstyle özniteliğinin değeri, noktalı virgül (;) ile ayrılmış stil kurallarının birleşimidir.

Harici CSS (<link> elementi)

<link> elementi, HTML belgenize harici bir stil sayfası dosyası eklemek için kullanılır.

Harici stil sayfası, .css uzantılı ayrı bir dosyadır. Bu dosyada tüm stil kurallarınızı tanımlarsınız ve sonra <link> elementini kullanarak bu dosyayı herhangi bir HTML belgesine dahil edebilirsiniz. İşte genel sözdizimi:

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>
Harici CSS Öznitellikleri
ÖznitelikDeğerTanım
type text/cssStil sayfasının dilini, içerik türü (MIME türü) olarak belirtir. Bu öznitelik zorunludur.
hrefURLStil kurallarına sahip stil sayfası dosyasını belirtir. Bu öznitelik zorunludur.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all
Belgenin görüntüleneceği aygıtı belirtir. Varsayılan değer all yani hepsidir. İsteğe bağlı bir özelliktir.
Harici CSS Örneği

Aşağıdaki stil kuralları içeren mystyle.css adında basit bir stil sayfası dosyası olduğunu düşünelim.

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Şimdi bu dosyayı yani mystyle.css dosyasını herhangi bir HTML belgesine aşağıdaki gibi ekleyebilirsiniz:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

İçe Aktarılan CSS (@import ile)

@import, harici bir stil sayfasını <link> öğesine benzer bir şekilde içe aktarmak için kullanılır. İşte @import kuralının genel sözdizimi.

<head>
   <@import "URL";
</head>

Burada URL, stil kurallarına sahip stil sayfası dosyasının URL’sidir. Başka bir sözdizimi de kullanabilirsiniz:

<head>
   <@import url("URL");
</head>
İçe Aktarılan CSS örneği:
<head>
   @import "mystyle.css";
</head>

CSS Kurallarını Geçersiz Kılma (Üzerine Yazma)

Bir HTML belgesine stil sayfası kurallarını eklemenin 4 farklı yolunu gördük. Şimdi ise CSS stil kurallarını geçersiz kılmanın kurallarına bakalım:

  • Herhangi bir satır içi stil sayfası en yüksek önceliğe sahiptir. Bu nedenle, <style> … </style> etiketlerinde tanımlanan herhangi bir kuralı veya herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.
  • <style> … </style> etiketlerinde tanımlanan herhangi bir kural, herhangi bir harici stil sayfası dosyasında tanımlanan kuralları geçersiz kılar.
  • Harici stil sayfası dosyasında tanımlanan herhangi bir kural en düşük önceliği alır ve bu dosyada tanımlanan kurallar yalnızca yukarıdaki iki kural geçerli olmadığında uygulanır.

CSS’i Eski Tarayıcıları Kullanma

Hala CSS’yi desteklemeyen birçok eski tarayıcı var. Bu nedenle, Gömülü CSS’mizi bir HTML belgesine yazarken dikkatli olmalıyız. Aşağıdaki kod parçası, CSS’i eski tarayıcılardan gizlemek için yorum etiketlerini nasıl kullanabileceğinizi gösterir.

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSS Yorum / Açıklama Satırı

Çoğu zaman, stil sayfası bloklarınıza ek yorumlar eklemeniz gerekebilir. Yorumlarınızı /* ve * / ifadelerinin arasına yazmalısınız.

Tüm CSS dersleri için tıklayınız.

banner
banner