- Konu sahibi
- #1
CSS internal, stil kurallarının ayrı bir .css dosyası yerine HTML belgesinin içindeki
Tarayıcı HTML belgesini okurken
Sıkı bir Content Security Policy kullanılıyorsa style bloğu uygun nonce veya hash olmadan engellenebilir. Bu durumda güvenliği genel olarak kapatmak yerine sitenin mevcut stil politikasına uygun yöntem seçilmelidir.
Internal CSS yalnızca yazıldığı HTML belgesinin kapsamındadır. Aynı görünümü
Aşağıdaki dosyayı
Beklenen sonuç, sayfanın ortasında beyaz bir kart ve mavi bir başlık görünmesidir. Stil uygulanmıyorsa önce
Internal CSS'i tek bir HTML sayfasının görünümünü hızlıca tanımlamak, harici dosya kullanmadan bir prototip denemek için seçebilirsiniz. Üretim sitesinde birden fazla sayfa aynı tasarımı paylaşıyorsa kuralları ortak bir dosyaya taşımak daha düzenlidir.
Karar verirken temel farklar şöyledir:
Bu karşılaştırmada önemli nokta yalnız dosyanın nerede bulunduğu değil, aynı kuralın kaç yerde yönetileceğidir. İki veya daha fazla sayfada aynı renk, boşluk ve tipografi kurallarını kullanmaya başladıysanız stilleri harici CSS dosyasına ayırmak sonraki bakım işini kolaylaştırır.
Sık yapılan hatalar;
Internal CSS,
Tek başına kesin bir hız sonucu vermez. Küçük bir belgede ayrı CSS isteğini ortadan kaldırabilir; ancak büyük kuralların her HTML sayfasına eklenmesi belge boyutunu ve tekrar miktarını artırabilir.
style etiketiyle yazılmasıdır. Bu kurallar genellikle head bölümüne yerleştirilir ve yalnızca bulunduğu HTML belgesini etkiler. Küçük, tek sayfalık veya hızlı bir prototip için pratiktir; birden fazla sayfada ortak tasarım kullanılacaksa harici CSS dosyası daha uygun olur.Nasıl çalışır?
Tarayıcı HTML belgesini okurken
style içindeki CSS seçicilerini de işler. Örneğin p seçicisi belgedeki paragraf öğelerinin tamamına uygulanır. Daha özel bir seçici veya daha sonra gelen bir kural aynı özelliği tanımlıyorsa, CSS'in kaskat kuralları sonucunda uygun önceliğe sahip bildirim kullanılır.Sıkı bir Content Security Policy kullanılıyorsa style bloğu uygun nonce veya hash olmadan engellenebilir. Bu durumda güvenliği genel olarak kapatmak yerine sitenin mevcut stil politikasına uygun yöntem seçilmelidir.
Internal CSS yalnızca yazıldığı HTML belgesinin kapsamındadır. Aynı görünümü
hakkinda.html gibi başka bir sayfada da kullanmak için kuralı o sayfaya ayrıca eklemek gerekir. Bu nedenle sayfa sayısı arttıkça tekrar ve bakım yükü oluşur.Çalışan en küçük örnek
Aşağıdaki dosyayı
index.html adıyla kaydedip tarayıcıda açabilirsiniz:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Internal CSS örneği</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f4f4;
}
.kart {
width: min(100%, 420px);
box-sizing: border-box;
margin: 40px auto;
padding: 20px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
}
.kart h1 {
color: #174a7e;
}
</style>
</head>
<body>
<main class="kart">
<h1>Merhaba</h1>
<p>Bu görünüm internal CSS ile oluşturuldu.</p>
</main>
</body>
</html>Beklenen sonuç, sayfanın ortasında beyaz bir kart ve mavi bir başlık görünmesidir. Stil uygulanmıyorsa önce
style etiketlerinin head içinde kapatıldığını, seçicide .kart noktasının bulunduğunu ve dosyanın gerçekten .html uzantısıyla kaydedildiğini kontrol edin. Belge standart modda açılsın diye DOCTYPE bildirimi doğru yazılmalıdır; örnekteki kod doğrudan kullanılabilir.Ne zaman kullanılmalı?
Internal CSS'i tek bir HTML sayfasının görünümünü hızlıca tanımlamak, harici dosya kullanmadan bir prototip denemek için seçebilirsiniz. Üretim sitesinde birden fazla sayfa aynı tasarımı paylaşıyorsa kuralları ortak bir dosyaya taşımak daha düzenlidir.
Karar verirken temel farklar şöyledir:
| Yaklaşım | Kapsam | Uygun kullanım |
|---|---|---|
| Internal CSS | Tek HTML belgesi | Küçük sayfa ve prototip |
| Harici CSS | Birden fazla belge | Ortak tasarım ve kolay bakım |
| Inline CSS | Tek HTML öğesi | Çok özel ve sınırlı durumlar |
Bu karşılaştırmada önemli nokta yalnız dosyanın nerede bulunduğu değil, aynı kuralın kaç yerde yönetileceğidir. İki veya daha fazla sayfada aynı renk, boşluk ve tipografi kurallarını kullanmaya başladıysanız stilleri harici CSS dosyasına ayırmak sonraki bakım işini kolaylaştırır.
Uygulama ve sorun giderme adımları
- HTML belgesinde
headbölümünü açın ve içine birstyleetiketi ekleyin. - Biçimlendirmek istediğiniz öğeye uygun bir seçici yazın; sınıf seçicisi için sınıf adının başına
., kimlik seçicisi için#ekleyin. - CSS özelliklerini süslü parantez içinde yazın ve her bildirimi noktalı virgülle ayırın.
- Dosyayı kaydedip tarayıcıda açın. Beklenen görünüm oluşmuyorsa HTML etiketlerinin kapanışını, seçici adını ve tarayıcının geliştirici araçlarındaki kural çakışmalarını kontrol edin.
- Stil başka HTML sayfalarında da gerekecekse kuralları yeni sayfalara kopyalamak yerine harici CSS dosyasına taşıma planı yapın.
Sık yapılan hatalar;
style etiketini yanlışlıkla body içine dağınık biçimde yerleştirmek, sınıf seçicisinde nokta kullanmamak, CSS özelliği ile değer arasına iki nokta koymamak ve aynı özelliği çakışan kurallarda tanımlamaktır. Ayrıca internal CSS, HTML dosyasını otomatik olarak başka sayfalara taşımaz; her belge kendi içindeki style kurallarını alır.Kaynaklar
Sık sorulan sorular
Internal CSS ile inline CSS arasındaki fark nedir?
Internal CSS,
style etiketi içinde seçicilerle birden fazla öğeyi biçimlendirir. Inline CSS ise style niteliğiyle doğrudan tek HTML öğesine yazılır.Internal CSS sayfanın hızını artırır mı?
Tek başına kesin bir hız sonucu vermez. Küçük bir belgede ayrı CSS isteğini ortadan kaldırabilir; ancak büyük kuralların her HTML sayfasına eklenmesi belge boyutunu ve tekrar miktarını artırabilir.
