Je n'ai pas mis à jour mon blog depuis longtemps. Beaucoup de choses se sont passées pendant cette période et je suis épuisé. Mais il me reste encore beaucoup de choses à faire, comme mettre à jour merceCSS, trier le contenu modulaire que j'ai résumé jusqu'à présent et le partager avec tout le monde, participer à des réunions d'échange, etc.
J'ai beaucoup mentionné la conception modulaire, comme « Modularité de la conception de meubles d'IKEA », « Pensée modulaire dans la reconstruction de page », « Points clés de la production de composants dans la reconstruction de page » sont tous liés à la modularité, mais je n'ai jamais parlé du spécifique contenu de mise en œuvre avant, juste quelques réflexions. Cette fois, je me concentrerai sur l'aspect implémentation et je résumerai une partie de la modularisation que j'ai effectuée jusqu'à présent.
Pour faire du bon travail en modularisation , je pense qu'il est très important de comprendre la portée des styles, cette partie est donc le premier article de cette série.
Les étudiants qui ont écrit des programmes devraient tous savoir que les variables ont une portée (si vous ne le savez pas, demandez vous-même à Google, je ne l'expliquerai pas ici. La définition des styles a également des problèmes de portée, c'est-à-dire la portée de la définition). . C'est facile à comprendre, comme la portée de p ci-dessous :
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
La priorité des sélecteurs de style est la connaissance de base des styles d’apprentissage. Passons-la brièvement en revue :
Les règles utilisées sont également très simples, c'est-à-dire que les poids des sélecteurs sont additionnés, et le plus grand est prioritaire si les poids sont les mêmes, celui défini ultérieurement est prioritaire . Bien que cela soit très simple, si vous n’y prêtez pas attention lors de l’écriture, cela peut facilement conduire à des définitions répétées de CSS et à du code redondant.
De ce qui précède, nous pouvons tirer deux facteurs clés :
A quoi sert de connaître le poids du style ? Par exemple, il peut être utilisé comme ceci : Pour donner l'exemple le plus simple,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
Connaissant le poids du style, vous saurez comment fonctionne l’exemple ci-dessus. Une autre application est la modularisation, comme les exemples dans « Modularisation de IKEA Furniture Design », veuillez continuer pour plus de détails.