Satır içi, gömülü ve harici stil sayfaları: İşte bilmeniz gerekenler
Ön uç web sitesi geliştirme genellikle 3 ayaklı bir tabure olarak temsil edilir. Bu bacaklar aşağıdaki gibidir:
Bu dışkı, CSS veya Basamaklı Stil Sayfalarının ikinci ayağı, bugün buraya baktığımız şeydir. Özellikle, bir belgeye ekleyebileceğiniz 3 tür stili ele almak istiyoruz.
- Satır içi stilleri
- Gömülü stiller
- Dış stiller
Bu tür CSS stillerinin her birinin faydaları ve dezavantajları vardır, bu yüzden her birine ayrı ayrı daha derinden bakalım.
Satır İçi Stiller
Satır içi stiller, HTML belgesindeki etikette doğrudan yazılan stillerdir. Satır içi stiller yalnızca uygulandıkları belirli etiketi etkiler. Standart bir bağlantıya veya çapa etiketine uygulanan bir satır içi stil örneği:
Bu CSS kuralı, standart altı çizili metin süslemesini bu bağlantıdan kapatacaktır. Bununla birlikte, sayfadaki diğer herhangi bir bağlantıyı değiştirmez. Bu, satır içi stillerin sınırlamalarından biridir. Sadece belirli bir öğe üzerinde değiştiğinden, gerçek bir sayfa tasarımı elde etmek için HTML'nizi bu stillerle yıkamanız gerekir. Bu en iyi uygulama değildir. Aslında, "font" etiketlerinin günlerinden ve web sayfalarındaki yapı ve stil karışımından kaldırılan bir adımdır.
Satır içi stiller de çok yüksek özgüllüğe sahiptir.
Bu, diğer satır içi olmayan stiller ile üzerine yazmak için çok zor hale getirir. Örneğin, bir siteye yanıt vermek ve bir öğenin medya sorgularını kullanarak belirli kesme noktalarına nasıl baktığını değiştirmek isterseniz, bir öğedeki satır içi stilleri bunu yapmak için çok zor hale getirecektir.
Sonuçta, satır içi stilleri gerçekten çok az kullanıldığında gerçekten uygundur.
Aslında, web sayfalarında nadiren hiç satır içi stilleri kullanıyorum.
Gömülü Stiller
Gömülü stiller, belgenin başına yerleştirilmiş stillerdir. Gömülü stiller yalnızca gömülü oldukları sayfadaki etiketleri etkiler. Bir kez daha, bu yaklaşım CSS'nin güçlü yönlerinden birini geçersiz kılar. Her sayfada
Eğer bir site değişikliğinde değişiklik yapmak istiyorsanız, kırmızıdan yeşile doğru bağlantıların rengini değiştirmek gibi, her sayfada bir sayfa varsa, bu değişimin her sayfada olması gerekir. Bu, satır içi stillerden daha iyidir, ancak birçok durumda hala sorunludur.
Eklenen stil sayfaları
Bir dokümanın da bu sayfaya önemli miktarda işaretleme kodu eklenmesi de sayfaların gelecekte yönetilmesini daha da zorlaştırabilir.
Katıştırılmış stil sayfalarının yararı, diğer harici dosyaların yüklenmesini gerektirmek yerine, sayfanın kendisiyle hemen yüklenebilmesidir. Bu, indirme hızı ve performans açısından avantaj sağlayabilir.
Dış Stil Sayfaları
Günümüzde çoğu web sitesi harici stil sayfaları kullanmaktadır. Farklı stiller ayrı bir belgede yazılan ve daha sonra çeşitli web belgelerine eklenmiş stillerdir. Dış stil sayfaları , bağlı oldukları herhangi bir belgeyi etkileyebilir, yani her sayfanın aynı stil sayfasını kullandığı 20 sayfalık bir web siteniz varsa (bu genellikle nasıl yapılır?), Her biri için görsel bir değişiklik yapabilirsiniz. Bu sayfaların sadece bu stil sayfasını düzenleyerek.
Bu uzun vadeli site yönetimini çok daha kolay hale getirir.
Harici stil sayfalarının olumsuz tarafı, bu harici dosyaları almak ve yüklemek için sayfalara ihtiyaç duymalarıdır. Her sayfa CSS sayfasındaki tüm stilleri kullanmaz, pek çok sayfa gerçekten ihtiyaç duyulandan çok daha büyük bir CSS sayfası yükler.
Harici CSS dosyaları için bir performans vuruşu olduğu doğru olsa da, kesinlikle en aza indirgenebilir. Gerçekçi olarak, CSS dosyaları sadece metin dosyalarıdır, bu yüzden başlangıçta genellikle çok büyük değildirler. Sitenizin tamamı 1 CSS dosyası kullanıyorsa, başlangıçta yüklendikten sonra önbelleğe alınan bu belgenin avantajlarından da yararlanabilirsiniz.
Bu, ilk sayfada bazı ziyaretlerde küçük bir performans isabeti olabileceği anlamına gelir, ancak sonraki sayfalar önbelleğe alınan CSS dosyasını kullanır, böylece herhangi bir isabet reddedilir. Harici CSS dosyaları, tüm web sayfalarımı nasıl oluşturduğumdur.