2010-08-15 6 views
12

Ich habe Probleme, CSS-Neulingen zu erklären, wie die Kaskade bei der Verwendung von Stylesheets funktioniert. Aus welchen Gründen auch immer scheinen Anfänger neu zu beginnen, indem sie einfach jedem Element eine Klasse hinzufügen. Nehmen Sie zum Beispiel das Code-Snippet von this question (keine Beleidigung für das OP, über den Bogen).Wie erklärt man CSS-Neulingen die "Cascade"?

Dadurch:       ul#nav { } und ul#nav li { }
ist besser als: ul.nav { } und li.navLinks { }

, dass ein sehr einfaches Beispiel, aber Sie erhalten den Punkt. Vererbung ist in diesem Fall eindeutig vorteilhaft.

Ich habe versucht, semantics als Bezugspunkt zu verwenden, aber das hat sich nicht als wirksam erwiesen. Es ist durchaus möglich, dass der Begriff "Klasse" aufgrund vorheriger Kenntnis von OOP verwirrend/verwirrend ist. Schließlich, nachdem sie gutes Beispiel nach gutem Beispiel gesehen haben, haben sie immer den Durchbruch, wo sie es endlich "bekommen". Aber ich suche nach einer Möglichkeit, diesen Prozess zu rationalisieren, weil ich nicht der Typ sein will, der zurückgehen muss und dieses Nebenprodukt der Klassitis, das in die Produktion rutscht, beibehalten muss.

Ich genoss besonders this answer, die Rekursion erklärt. Ich hatte eine ähnliche Erklärung, als ich in der Schule war, und ich habe es sofort verstanden. Ich hoffe, dass jemand, der dort brilliert, eine ähnliche Art hat, die Kaskade gründlich, aber gründlich zu erklären.

+0

Ich bevorzuge es, meine Elemente inline zu stylen. Ich habe keine Zeit, all das CSS Voodoo zu lernen. – ChaosPandion

+0

ChaosPandion: Ich hoffe du machst Witze;) Das wäre wie Programmieren ohne Funktionen;) – nicomen

+0

@nicomen - Funktionen? :) – ChaosPandion

Antwort

4

Vielleicht könnten Sie beginnen, indem Sie ID und Klasse am Anfang ignorieren. Nur "dumme" Dinge tun, wie Elemente, die sehr spezifisch sind, nach der Hierarchie zu adressieren. Dann Gruppierung und Beschriftung erklären und kombinieren?

+0

Wie wäre es mit einem Beispiel oder zwei für die langsamen unter uns * (mir) *. – ChaosPandion

0

Sie könnten versuchen, dass Ihre Schüler/Schüler/Schüler, die Sie unterrichten, versuchen, ein etwas fortgeschrittenes Layout zu erstellen, ohne Klassen- oder ID-Attribute zu verwenden.

Ein wichtiger Punkt über die Kaskade ist, dass Sie den DOM-Baum ein HTML-Dokument voll ausnutzen sollten. Ein weiterer Punkt der Kaskade besteht darin, dass Sie einem Element mehrere Stile zuweisen können, sodass der resultierende Stil style a + style b + style c lautet.

1

für mich .. seine einfach eine CSS zu verstehen, wenn man es von rechts gelesen wie nach links:

FÜR ALLE „Links“ :

div#nav li:hover a 

ich es übersetzen würde INNERHALB EINES "li" DIE schweben HAS , die in einem div SIND MIT id = nav DO THIS {....

3

Es kann hilfreich sein, die CSS-Kaskade als eine zur DOM-Hierarchie orthogonale Hierarchie zu beschreiben und anzuzeigen. Die zwei Hierarchien treffen sich auf einem Anzeigeelement. DOM gibt die strukturelle Verschachtelung, CSS gibt das Anzeigeattribut Verschachtelung. CSS ist nur die Sprache, die zur Beschreibung einer Anzeigeattributhierarchie verwendet wird.

Die eigentliche Schwierigkeit in der CSS-Kaskade zu verstehen ist, dass es genug Rube Goldberg Funktionen enthält, die für Ihre Schüler jedes einziges Einheitsprinzips in dem Ruin der Lage, „das Licht drehen“.Es gibt immer , die zwischen Dunkelheit und Verständnis ein paar WTFs sind.

Die beste Beschreibung und Erklärung der CSS-Kaskade, die ich mir vorstellen kann, kommt von www.w3.org Cascade. Ich empfehle einfach dies immer und immer wieder zu lesen, bis der Dimmerschalter hoch genug gedrückt wird, um zumindest "das Licht zu sehen".

Beginnen Sie mit einem einfachen HTML-Dokument, fügen Sie einige einfache CSS, herauszufinden, was passiert ist und warum, etwas hinzuzufügen, es herauszufinden, etwas hinzuzufügen, es herauszufinden ... ich das Licht sehen kann.