CSS'i HTML'e bağlama
<link>, <style> ve inline stil arasındaki farkları öğrenirsin.
Üç yöntem
CSS'i HTML sayfasına bağlamanın üç yolu vardır. Harici yöntem ayrı bir .css dosyasını <link> ile bağlar. İç yöntem <style> etiketini HTML içine yazar. Satır içi yöntem doğrudan etiketin style özniteliğine stilleri koyar.
En çok kullanılanı harici yöntemdir; aynı dosya birçok sayfayı biçimler.
Harici stil sayfası
Harici yöntemde CSS ayrı bir stil.css dosyasında durur. HTML'in <head> bölümüne bir <link> etiketi koyarsın: <link rel='stylesheet' href='stil.css'>.
Bu yöntemin üstünlüğü büyüktür. Tarayıcı CSS'i bir kez önbelleğe alır, tüm sayfalar hızlı yüklenir. Yeni bir tema denemek için yalnızca tek bir dosyayı değiştirirsin; değişiklik tüm siteye aynı anda yansır.
Style etiketi ve satır içi
İç yöntemde <style> etiketini HTML'in <head> bölümüne yazarsın; CSS bildirimleri doğrudan HTML dosyasının içinde olur. Tek bir sayfaya özel stiller için elverişlidir; başka sayfalar bu stilleri görmez.
Satır içi yöntemde ise style özniteliğine bildirim yazarsın: <p style='color: navy'>. Hızlı bir düzeltme için işe yarar ama yaygın kullanımdan kaçınılmalıdır; zira tek bir öğeyi değiştirmek için bile dosyayı güncellemek gerekir.
Uygulama Harici dosyaya body bölümü ekle
Harici stil sayfasının içine yazılacak bir body bölümü ekle. İçinde font-family: sans-serif bildirimi olsun.
Örnek çözümü göster
/* body bölümünü ekle */
body {
font-family: sans-serif;
}Kendini test et
-
link etiketinde rel='stylesheet' neyi belirtir?
<link rel="stylesheet" href="stil.css">- Bu bağlantının bir stil sayfası olduğunu
- Sayfanın başlık çubuğu metnini
- HTML belgesinin karakter kodlamasını
- Sayfanın dilini (örneğin Türkçe)
Cevabı göster
Bu bağlantının bir stil sayfası olduğunu — Doğru. rel='stylesheet' bu bağlantının bir stil sayfası olduğunu söyler.
-
Harici dosyada başlık bölümünü aç
/* stil.css — harici dosya */ ____ { color: darkblue; }Cevabı göster
/* stil.css — harici dosya */ h1 { color: darkblue; } -
Yöntemi nereye yazıldığıyla eşleştir
- Harici CSS
- link etiketiyle bağlanır
- Style etiketi
- head bölümünde yer alır
- Satır içi stil
- etiketin style özniteliğine