Понимание и применение идентификатора и класса в макете веб-страницы XHTML CSS:
Если бы только XHTML и CSS могли быть объектно-ориентированными. . Солнце должно восходить на севере. Однако на все следует смотреть с точки зрения объектно-ориентированного подхода, и мы едва ли можем подсчитать цифры. На самом деле, кто-то предложил ОО-стиль еще в 2000 году, но его больше не найти.
Так что же делать? Теперь все знают, что CSS можно написать так:
| .G_G { /* ххххххх */ } |
Мы можем думать об этом как о прототипе или классе, -__-b изначально кажется классом, а затем «создать экземпляр» объекта в HTML, например:
| ＜div class="G_G"＞Идиотский плач＜/div＞ |
Этот элемент будет использовать соответствующее определение CSS, но соответствующего класса недостаточно, поскольку наша страница может применять этот класс во многих местах. Чтобы обработать «частное» отношение, прямо сейчас измените код на:
| ＜div id="aoao" class="G_G"＞Идиотский плач＜/div＞ |
В этом случае к элементу с идентификатором aaoao будет применяться определение класса .G_G, и вы можете использовать селектор, например #aoao{}, чтобы ввести определение частного эффекта, который не повлияет на общедоступный класс .G_G. , в то же время приоритет, определенный #aoao, будет выше, чем .G_G, что соответствует здравому смыслу, согласно которому частные определения имеют более высокий приоритет, чем общедоступные^^.
Поскольку я использую что-то уникальное, например идентификатор, повторное использование таких частных вещей становится проблемой (идентификатор может появиться на странице только один раз, я не знаю, кто это сказал, но в любом случае это правда). Что, если мы хотим добиться приватизации многих одних и тех же вещей? Затем мы должны реализовать «полиморфизм». Копай хаха. Еще раз измените код:
| ＜div class="G_G o_O"＞Идиотский плач＜/div＞ |
Один — «G_G», а другой — «o_O», но если мы используем .o_O{}, мы также можем определить элемент, если CSS такой:
| .G_G {ширина:100%} .o_O {цвет:#123456} |
Все элементы будут определены, и поскольку определения не суммируются, все они будут применены. Если код такой, не знаю, будет ли его легче понять.
＜div class="цвет макета"＞Не глупая птица＜/div＞ .layout{ширина:100%} |
Далее нам нужно реализовать «инкапсуляцию». Вам следует часто использовать дочерний селектор. Измените код:
| ＜div class="G_G"＞＜span class="bendan"＞Идиот＜/span＞Ой＜/div＞ |
Хотя и .bendan{}, и .G_G .bendan{} могут быть определены, последний может применяться только к элементам класса «G_G». Мы можем просто понимать .bendan{} как глобальное определение, а .G_G .bendan{ }. понимается как частичное определение, которое полезно для модульности наших XHTML и CSS. ^^Появилась легендарная "инкапсуляция", а затем продолжилась.
| ＜div id="aoao" class="G_G o_O"＞＜span class="bendan"＞Идиот＜/span＞嗷嗷＜/div＞ |
Такой код может производить бесчисленные изменения, и если вы его не понимаете, вам придется начинать с нуля. ^^
Глубоко понимать применение идентификатора и класса в макете веб-страницы XHTML CSS!