CSS veya Basamaklı Stil Sayfaları, görsel görünümü bir sayfaya uygulamak için modern web sitesi tasarımında kullanılan şeydir. HTML sayfanın yapısını oluşturur ve Javascript davranışları üstlenebilirken, bir web sitesinin görünümü ve hissi CSS'nin alanıdır. Bu stillere gelince, bunlar çoğunlukla dış stil sayfaları kullanılarak uygulanır, ancak CSS stillerini "satır içi stiller" olarak bilinenleri kullanarak tek, belirli bir öğeye de uygulayabilirsiniz.
Satır içi stiller, doğrudan sayfanın HTML'sine uygulanan CSS stilleridir. Bu yaklaşımın hem avantajları hem de dezavantajları vardır. İlk olarak, bu tarzların nasıl yazıldığına bakalım.
Satır İçi Stili Yazma
Satır içi CSS stili oluşturmak için, stil özelliklerinizi stil sayfasında nasıl yazdığınıza benzer şekilde yazarak başlarsınız, ancak bunun tek bir satır olması gerekir. Bir stil sayfasında olduğu gibi birden çok özelliği noktalı virgülle ayırın.
Arka plan: #ccc; Renk: #fff; kenarlık: katı siyah 1px;
Stili oluşturmak istediğiniz öğenin stil niteliğine bu stil çizgisini yerleştirin. Örneğin, bu stili HTML'nizdeki bir paragrafa uygulamak isterseniz, bu öğe şöyle görünecektir:
Bu örnekte, bu özel paragraf, açık gri bir arka planla (#ccc'nin göstereceği şey), siyah metinle (# 000 renginden) ve paragrafın dört kenarının etrafındaki 1 piksel düz siyah kenarlık ile görünecektir. .
Satır İçi Stillerin Avantajları
Basamaklı Stil Sayfası satır içi stilleri sayesinde, bir belgedeki en yüksek önceliğe veya özgüllüğe sahiptir. Bu, dış stil sayfanızda başka hangi dikte dikte olursa olsun uygulanacakları anlamına gelir (bir istisna, verilen herhangi bir stillerdir!) Bu önemli bir beyanname, ancak bu, üretim sitelerinde yapılması gereken bir şey değildir. kaçınılmalıdır).
Satır içi stillerden daha yüksek önceliğe sahip olan tek stiller, okuyucuların kendileri tarafından uygulanan kullanıcı stilleridir . Değişikliklerinizin uygulanmasını zorlaştırıyorsanız, öğe üzerinde satır içi stilini ayarlamayı deneyebilirsiniz. Stilleri satır içi stil kullanarak göstermiyorsanız, başka bir şey olduğunu biliyorsunuz.
Satır içi stilleri eklemek kolay ve hızlıdır ve stilleri doğrudan değiştirmek istediğiniz öğeye eklediğinizden, doğru CSS seçicisini yazmaktan endişe etmenize gerek yoktur (bu öğe aslında bir dış stil sayfasındaki yazmayı seçen yerine geçer ). Yepyeni bir belge (harici stil sayfalarında olduğu gibi) oluşturmanız veya belgenizin başına yeni bir eleman eklemeniz gerekmez (dahili stil sayfalarında olduğu gibi). Hemen hemen her HTML öğesinde geçerli olan stil özelliğini eklersiniz. Bunlar, satır içi stilleri kullanmak için cazip olmanızın tüm nedenleridir, ancak bu yaklaşımın bazı önemli dezavantajlarının da farkında olmanız gerekir.
Satır İçi Stillerin Dezavantajları
Satır içi stiller, kaskad içinde en spesifik oldukları için, niyet etmediğiniz şeyleri aşabilirler. Ayrıca, CSS'nin en güçlü yönlerinden birini de ortadan kaldırıyorlar - gelecekteki güncellemeleri ve stil değişikliklerini yönetmek çok daha kolay hale getirmek için bir merkezi CSS dosyasından çok sayıda web sayfası ve stil oluşturma becerisi.
Yalnızca satır içi stilleri kullanmanız gerekiyorsa, belgeleriniz hızla şişirilecek ve bakımı çok zor olacaktır. Bunun nedeni, satır içi stillerin, onları istediğiniz her öğeye uygulanması gerektiğidir. Tüm paragraflarınızın font ailesi “Arial” olmasını istiyorsanız, belgenizdeki her
etiketine bir satır içi stil eklemeniz gerekir. Bu, hem tasarımcı için bakım çalışmalarını hem de okuyucu için indirme süresini ekler; çünkü bunu, yazı tipi ailesini değiştirmek için sitenizdeki her sayfa için değiştirmeniz gerekir. Alternatif olarak, ayrı bir stil sayfası kullanırsanız, bunu bir noktada değiştirebilir ve her sayfanın bu güncellemeyi almasını sağlayabilirsiniz.
Gerçekten, bu web tasarımında geriye doğru bir adımdır - etiketinin günlerini geri!
Satır içi stillere bir başka dezavantaj, sözde-elementleri ve-sınıfları onlarla stillemenin imkansız olmasıdır. Örneğin, harici stil sayfalarıyla, bir bağlantı etiketinin ziyaret edilen, gezinme, etkin ve bağlantı rengini stilleyebilir, ancak satır içi stiliyle, stil uygulayabileceğiniz tek şey stilin bağlandığı şeydir; .
Sonuç olarak, web sayfalarınız için satır içi stilleri kullanmamanızı öneririz çünkü bunlar sorunlara neden olur ve sayfaların bakımını çok daha iyi hale getirir. Onları kullandığımız tek zaman, geliştirme sırasında bir stili hızlı bir şekilde kontrol etmek istediğimiz zamandır. Bir öğeye doğru baktığımızda, onu harici stil sayfamıza taşıyoruz.
Jennifer Krynin tarafından orjinal makale. Jeremy Girard tarafından düzenlenmiştir.