Ответ 1
Возможно, вы могли бы начать с игнорирования id и класса в начале. Просто делать "глупые" вещи, такие как элементы адресации, очень специфичные по иерархии. Затем объясните группировку и маркировку и соедините их?
Как объяснить "Каскад" для новичков CSS?
У меня возникли проблемы с объяснением людям, которые не знакомы с CSS, как работает каскад при использовании таблиц стилей. По какой бы то ни было причине, новички, похоже, естественно начинаются, просто добавляя класс к каждому элементу. Возьмите фрагмент кода из этого вопроса, например (не нарушайте OP, overtherainbow).
Выполнение этого: ul#nav { } и ul#nav li { }
Лучше, чем: ul.nav { } и li.navLinks { }
Это очень простой пример, но вы понимаете. Использование наследования в этом случае явно полезно.
Я попытался использовать семантику в качестве контрольной точки, но это оказалось неэффективным. Вполне возможно, что термин "класс" является интрузивным/запутанным из-за предварительного знания ООП. В конце концов, увидев хороший пример после хорошего примера, у них всегда есть момент прорыва, когда они, наконец, "получают". Но я ищу способ упростить этот процесс, потому что я не хочу быть тем парнем, который должен вернуться и поддерживать этот побочный продукт, который сливается в производство.
Мне особенно понравился этот ответ, который объясняет рекурсию. У меня было знакомое объяснение, когда я учился в школе, и сразу же "получил". Я надеюсь, что кто-то блестящий там будет иметь похожий способ объяснить каскад, но тщательно.
Ответы
Ответ 2
Это может помочь описать и просмотреть CSS-каскад как иерархию, ортогональную иерархии DOM. Эти две иерархии встречаются в элементе отображения. DOM дает структурное вложение, CSS дает атрибут отображения вложенности. CSS - это просто язык, используемый для описания иерархии атрибутов отображения.
Настоящая трудность в понимании CSS-каскада заключается в том, что он содержит достаточно Рубе Голдберг, чтобы разрушить любой единый объединяющий принцип, способный "включить свет" для ваших учеников. Всегда есть будет несколько WTF между темнотой и пониманием.
Лучшее описание и объяснение каскада CSS, о котором я могу думать, от www.w3.org Каскад. Я просто рекомендую читая это снова и снова, пока диммерный переключатель не будет выдвинут достаточно высоко, чтобы, по крайней мере, "видеть свет".
Начните с простого HTML-документа, добавьте простой CSS, выясните, что произошло и почему, добавить что-нибудь, понять, добавить что-нибудь, понять это... Я вижу свет.
Ответ 3
для меня.. его легко понять css, когда вы читаете его справа налево, например:
div#nav li:hover a
я перевела бы его на:
ДЛЯ ВСЕХ "ссылки" ВНУТРИ A "li" ТО, ЧТО HAV hover ЧТО ВНУТРИ A div WITH id = nav ДЕЛАТЬ ЭТО {....
Ответ 4
Вы можете попытаться, чтобы ваши ученики/учащиеся/те, кого вы преподаете, попытались создать несколько расширенный макет, не используя никаких классов или идентификационных атрибутов.
Ключевым моментом в каскаде является то, что вы должны использовать DOM-дерево, чтобы HTML-документ был максимально полным. Кроме того, точкой каскада является то, что вы можете применить несколько стилей к элементу, чтобы его результирующий стиль был style a + style b + style c.