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)
Öznitelik | Değer | Tanım |
type | text/css | Stil sayfasının dilini, içerik türü (MIME türü) olarak belirtir. Bu öznitelik zorunludur. |
media | screen tty tv projection handheld 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
Öznitelik | Değer | Tanım |
style | stil 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
Öznitelik | Değer | Tanım |
type | text/css | Stil sayfasının dilini, içerik türü (MIME türü) olarak belirtir. Bu öznitelik zorunludur. |
href | URL | Stil kurallarına sahip stil sayfası dosyasını belirtir. Bu öznitelik zorunludur. |
media | screen tty tv projection handheld 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.
Son Yorumlar