- Konu sahibi
- #1
CSS dosyası, HTML gibi yapılandırılmış belgelerin nasıl sunulacağını tarif eden stil kurallarını taşıyan metin dosyasıdır. Genellikle
Bir dosyanın adı style.css olmak zorunda değildir.
Basit bir dosya şu kuralları içerebilir:
Bu örnek, ilgili HTML’de eşleşen öğeler ve sınıflar bulunduğunda anlam kazanır. Dosyayı editörde açmak yalnız kaynak metni gösterir; görünüm etkisi onu kullanan belgenin tarayıcıda işlenmesiyle oluşur.
CSS kuralları yalnız ayrı dosyada bulunmaz. Yöntemleri ayırmak, elinizdeki kaynağın ne olduğunu anlamayı kolaylaştırır:
Harici CSS dosyasının içine
Birden fazla dosyanın veya aynı dosya içindeki kuralların çakışması mümkündür. Son yazılan her kuralın koşulsuz kazanacağını varsaymayın; kaynak, önem, katman ve seçici özgüllüğü gibi cascade aşamaları sonucu belirler.
Tarayıcı çoğu geçersiz bildirimi yok sayarak diğer kuralları işlemeye devam eder. Ancak bir parantez veya yorum hatasının etkisi bulunduğu sözdizimi bölümüne göre genişleyebilir. Bu nedenle yalnız sayfanın tamamen bozulmamasını dosyanın hatasız olduğuna kanıt saymayın.
Stil kaynağı düz metin olmalıdır. Zengin metin belgesini yalnız css uzantısıyla yeniden adlandırmak yeterli değildir. Kod editöründe düz metin olarak kaydedin ve dosya adında yanlışlıkla
Hayır. Minify edilmiş dosya, gereksiz boşluk ve yorumların azaltıldığı aynı CSS sözdizimidir. Okumayı kolaylaştırmak için biçimlendirme kullanılabilir; fakat üretim dosyası bir araçtan üretiliyorsa kalıcı değişikliği onun kaynak dosyasında yapmak gerekir.
.css uzantısıyla saklanır. İçinde renk, yazı tipi, boşluk, boyut, yerleşim ve farklı ekran koşullarına ait bildirimler bulunabilir. Dosya, sayfanın içeriğinin yerine geçmez; aynı içerik yapısına farklı görünüm uygulanmasını sağlar.Bir dosyanın adı style.css olmak zorunda değildir.
layout.css veya yazi-stilleri.css gibi bir ad da kullanılabilir. Asıl belirleyici, içeriğin geçerli CSS olması ve web üzerinden alınırken tarayıcıya doğru kaynak türüyle sunulmasıdır. Sadece bir dosyanın uzantısını değiştirmek onu geçerli CSS’ye dönüştürmez.CSS dosyasının içinde ne vardır?
Basit bir dosya şu kuralları içerebilir:
CSS:
/* Ortak metin görünümü */
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
}
.baslik {
color: navy;
}
@media (max-width: 40rem) {
.baslik {
font-size: 1.5rem;
}
}body ve .baslik seçicidir; hangi öğelere uygulanacağını belirtir. Süslü parantez içindeki her bildirim bir özellik ve değer taşır. Örneğin color: navy metin rengini belirler. Yorumlar /* ... */ biçimindedir. @media ise belirli koşullarda uygulanacak kuralları gruplar; dosyanın ayrı bir program gibi çalıştırılması gerekmez.Bu örnek, ilgili HTML’de eşleşen öğeler ve sınıflar bulunduğunda anlam kazanır. Dosyayı editörde açmak yalnız kaynak metni gösterir; görünüm etkisi onu kullanan belgenin tarayıcıda işlenmesiyle oluşur.
Harici dosyanın diğer stil biçimlerinden farkı
CSS kuralları yalnız ayrı dosyada bulunmaz. Yöntemleri ayırmak, elinizdeki kaynağın ne olduğunu anlamayı kolaylaştırır:
| Biçim | Nerede bulunur? | Temel kullanım |
|---|---|---|
| Harici stil sayfası | Ayrı CSS kaynağı | Birden fazla belgede ortak kurallar |
| Dahili stil sayfası | HTML’nin style öğesi | Belgeye ait stil kuralları |
| Satır içi stil | Bir öğenin style niteliği | O öğeye ait bildirimler |
Harici CSS dosyasının içine
<style> veya HTML sayfa etiketleri yazılmaz. Dosyada doğrudan CSS sözdizimi kullanılır. HTML tarafındaki <link rel="stylesheet" href="style.css"> ise tarayıcıya bu ayrı kaynağın stil sayfası olarak kullanılacağını bildirir.Birden fazla dosyanın veya aynı dosya içindeki kuralların çakışması mümkündür. Son yazılan her kuralın koşulsuz kazanacağını varsaymayın; kaynak, önem, katman ve seçici özgüllüğü gibi cascade aşamaları sonucu belirler.
Dosyayı incelerken uygulanabilecek kontroller
- Dosyayı bir metin veya kod editöründe açın. CSS yerine giriş ekranı, hata HTML’i veya başka bir veri bulunup bulunmadığını kontrol edin.
- Web sayfası dosyayı kullanıyorsa Network’te gerçek yanıtı inceleyin. Harici CSS için beklenen Content-Type değeri
text/cssolmalıdır. - Yüklendiği hâlde tek bir kural etkisizse sözdizimini, seçicinin eşleşmesini ve kazanan bildirimi inceleyin; dosyanın bulunmaması ile kuralın elenmesi ayrı durumlardır.
- Dosyada görsel veya yazı tipi için göreli
url(...)varsa yolu ilgili stil sayfasının URL’sine göre değerlendirin. - Düzenlemeyi küçük bir kuralla sınayın ve tarayıcının gerçekten güncel dosyayı aldığını kontrol edin.
Tarayıcı çoğu geçersiz bildirimi yok sayarak diğer kuralları işlemeye devam eder. Ancak bir parantez veya yorum hatasının etkisi bulunduğu sözdizimi bölümüne göre genişleyebilir. Bu nedenle yalnız sayfanın tamamen bozulmamasını dosyanın hatasız olduğuna kanıt saymayın.
Sık sorulan sorular
CSS dosyasını Word belgesi olarak kaydedebilir miyim?
Stil kaynağı düz metin olmalıdır. Zengin metin belgesini yalnız css uzantısıyla yeniden adlandırmak yeterli değildir. Kod editöründe düz metin olarak kaydedin ve dosya adında yanlışlıkla
.css.txt bulunmadığını kontrol edin.Sıkıştırılmış CSS dosyası farklı bir dil midir?
Hayır. Minify edilmiş dosya, gereksiz boşluk ve yorumların azaltıldığı aynı CSS sözdizimidir. Okumayı kolaylaştırmak için biçimlendirme kullanılabilir; fakat üretim dosyası bir araçtan üretiliyorsa kalıcı değişikliği onun kaynak dosyasında yapmak gerekir.
