Ön uç web sitesi geliştirme, genellikle aşağıdakilerden oluşan üç ayaklı bir tabure olarak temsil edilir:
- HTML bir sitenin yapısı için
- CSS görsel stiller için
- Davranışlar için Javascript
Bu taburenin ikinci ayağı olan Basamaklı Stil Sayfaları, bir belgeye ekleyebileceğiniz üç farklı stili destekler.
- Satır içi stiller
- Gömülü stiller
- Dış stiller
Bu CSS stillerinin her biri benzersiz avantajlar ve dezavantajlar sunar.
Satır İçi Stiller
Satır içi stiller, doğrudan HTML belgesindeki etikete yazılan stillerdir. Satır içi stiller yalnızca uygulandıkları belirli etiketi etkiler:
Bu CSS kuralı, bu bağlantı için standart altı çizili metin dekorasyonunu devre dışı bırakır. Ancak, sayfadaki diğer herhangi bir bağlantıyı değiştirmez. Bu, satır içi stillerin sınırlamalarından biridir. Yalnızca belirli bir öğede değiştikleri için, birleşik bir sayfa tasarımı elde etmek için HTML'nizi bu stiller ile doldurmanız gerekir. Bu en iyi uygulama değil: Aslında, o günlerden bir adım daha kaldırıldı. yazı tipi web sayfalarında etiketler ve yapı ve stilin karışımı.
Satır içi stiller de çok yüksek özgüllük gerektirir. Bu, diğer satır içi olmayan stiller üzerine yazılmalarını zorlaştırır. Örneğin, bir siteyi duyarlı hale getirmek ve kullanarak bir öğenin belirli kesme noktalarında nasıl göründüğünü değiştirmek istiyorsanız medya sorguları, bir öğedeki satır içi stiller bunu yapmayı zorlaştırır.
Satır içi stiller yalnızca, bir veya iki öğeyi sayfadaki benzerlerinden ayıran "kuralın istisnası" yaklaşımında, bunları dikkatli bir şekilde kullandığınızda uygundur.
Gömülü Stiller
Gömülü stiller belgenin başında bulunur. onlar kapalı etiketler ve belgenin bu bölümündeki harici CSS dosyalarına çok benzer.
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 ortadan kaldırır. Her sayfa, başlıkta tanımlanan stiller içerdiğinden, site genelinde bir değişiklik yapmak istiyorsanız, örneğin rengi değiştirmek gibi kırmızıdan yeşile bağlantı sayısı — her sayfa gömülü bir stil kullandığından bu değişikliği her sayfada yapmanız gerekir levha. Bu yaklaşım satır içi stillerden daha iyidir, ancak birçok durumda yine de sorunludur.
Bir belgenin başına eklenen stil sayfaları, o sayfaya önemli miktarda biçimlendirme kodu da ekler ve bu da sayfanın gelecekte yönetilmesini zorlaştırabilir.
Gömülü stil sayfalarının yararı, diğer harici dosyaların yüklenmesini gerektirmek yerine, sayfanın kendisiyle birlikte hemen yüklenmeleridir. Bu teknik, indirme hızı ve performans açısından bir fayda sağlayabilir.
Harici Stil Sayfaları
Günümüzde çoğu web sitesi harici stil sayfaları kullanıyor. Dış stiller, ayrı bir belgeye yazılan ve daha sonra çeşitli web belgelerine eklenen stillerdir. Bir kullanarak ana belgeye çağrılırlar. belgenin başındaki etiket. Harici stil sayfaları, HTML ile aynı sunucuda bulunabilir veya tamamen başka bir sunucudan alınabilir. Bu, çoğu sitenin Google'dan ödünç aldığı yazı tipleri gibi varlıklar için geçerlidir.
Dış stil sayfaları bağlı oldukları herhangi bir belgeyi etkiler, yani her sayfanın aynı stil sayfasını kullandığı 20 sayfalık bir web siteniz varsa (bu genellikle böyle yapılır), bu sayfaların her birinde sadece o stili düzenleyerek görsel bir değişiklik yapabilirsiniz. levha. Bu ekonomi, uzun vadeli site yönetimini çok daha kolay hale getirir.
Çoğu profesyonel web tasarımcısı, bir sitenin düzenini ve tasarımını yönetmek için birincil bir CSS dosyası kullanır.
Harici stil sayfalarının dezavantajı, bu harici dosyaları almak ve yüklemek için sayfa gerektirmeleridir. Her sayfa CSS sayfasındaki her stili kullanmaz, bu nedenle birçok sayfa gerçekte gerekenden çok daha büyük bir CSS sayfası yükleyecektir.
Harici CSS dosyaları için bir performans artışı olduğu doğru olsa da, kesinlikle en aza indirilebilir. Gerçekçi olarak, CSS dosyaları yalnızca metin dosyalarıdır, bu nedenle başlangıçta büyük değildirler. Sitenizin tamamı tek bir CSS dosyası kullanıyorsa, o belgenin ilk yüklendikten sonra önbelleğe alınmasının avantajını da elde edersiniz; bu, şu anlama gelir: bazı ziyaretler için ilk sayfada hafif bir performans isabeti olabilir, ancak sonraki sayfalar önbelleğe alınmış CSS dosyasını kullanır, bu nedenle herhangi bir isabet reddedildi.