"Cascade", CSS yeni başlayanlara nasıl açıklanır?

Question

CSS'ye yeni başlayan kişilere, stil sayfası kullanırken kaskadın nasıl çalıştığını açıklamakta sorun yaşıyorum. Hangi nedenle olursa olsun, yeni öğeler her öğeye bir sınıf ekleyerek doğal olarak başlıyor gibi görünmektedir. Kod snippet'ini this question'dan alın (örneğin, OP'ye, topun üzerine çarpma). Bunu yapmak

:       ul#nav { } ve ul#nav li { }
daha mı iyi: ul.nav { } ve çok temel bir örnek olduğunu, ancak nokta olsun li.navLinks { }

. Bu durumda mirasın kullanılması açıkça faydalıdır.

semantics numaralı bağlantı noktasını referans noktası olarak kullanmayı denedim, ancak bunun etkili olduğu kanıtlanmadı. "Sınıf" teriminin, önceden OOP bilgisi olması nedeniyle zorlayıcı/kafa karıştırıcı olması oldukça olasıdır. Sonunda, iyi örneklerden sonra iyi bir örnek gördükten sonra, her zaman nihayet “elde ettikleri” bir atılım anına sahip olurlar. Ancak, bu süreci kolaylaştırmak için bir yol arıyorum çünkü geri dönmesi ve bu sınıf yanlısı ürünü üretime kaçıran adamı korumak istemiyorum.

Özyinelemeyi açıklayan this answer'u özellikle sevdim. Okuldayken benzer bir açıklama yaptım ve hemen anladım. Dışarıda duran birisinin, kaskatı başarılı bir şekilde anlatan, ancak tamamen anlatan benzer bir yolu olduğunu umuyorum.

Answer 1

Belki de başlangıçta kimliği ve sınıfı göz ardı ederek başlayabilirsiniz. Sadece hiyerarşiye göre çok spesifik unsurları ele almak gibi "aptal" şeyler yapmak. Sonra gruplama ve etiketleme açıklamak ve bunları birleştirmek?

Answer 2

Öğrencilerinizin/öğrencilerinizin/öğrettiğiniz kişilerin, herhangi bir sınıf veya ID özelliği kullanmadan biraz gelişmiş bir düzen oluşturmaya çalışmasını sağlayabilirsiniz.

Cascade hakkında bir önemli nokta, DOM-ağacını kullanmanız gerektiğidir, bir HTML belgesi en doludur. Ayrıca, kaskatın bir noktası, bir öğeye çeşitli stilleri uygulayabilmenizdir, böylece elde edilen stil style a + style b + style c olur. Benim için

Answer 3

.. onun sizin gibi sağdan sola okuyunca bir css anlamak kolay: TÜM "bağlantılar" İÇİN

i çevirmek istiyorum

div#nav li:hover a 

bir "li" id İLE div İÇİ OLAN hover HAS İÇERİ = nav BU {DO ....

Answer 4

CSS Cascade'i DOM hiyerarşisine ortogonal bir hiyerarşi olarak tanımlayıp görüntülemenize yardımcı olabilir. İki hiyerarşisi bir görüntüleme öğesinde buluşur. DOM yapısal yerleştirmeyi verir, CSS görüntü özniteliği iç içe geçirme verir. CSS, bir görüntüleme özellik hiyerarşisini tanımlamak için kullanılan dildir.

CSS Cascade anlamakta gerçek zorluk bunun öğrencileriniz için "ışıkların kapatılması" yeteneğine herhangi tek birleştirici ilkesini mahvetmek yeterli Rube Goldberg özellik içerir olmasıdır.Her zaman karanlıklar ve anlayış arasında bir kaç WTF olacak.

CSS cascade'inin en iyi açıklaması ve açıklaması, 'un www.w3.org Cascade'dan geldiğini düşünebilir. Ben sadece bunu sönük anahtarın en azından "ışığı görün" e kadar yeterince itene kadar okumayı ve tekrar etmeyi öneriyorum.

Düz bir HTML belgesiyle başlayın, basit bir CSS ekleyin, ne olduğunu anlayın ve neden, bir şey ekleyin, bir şeyler ekleyin, bir şeyler ekleyin, bir şekil verin ... Işığı görebiliyorum.