Compreensão e aplicação de ID e classe no layout de página da web XHTML CSS:
Se ao menos XHTML e CSS pudessem ser orientados a objetos. . O sol deveria estar nascendo no norte. Porém, tudo deve ser visto com uma mentalidade OO, e mal conseguimos calcular os números. Na verdade, alguém propôs o estilo OO já em 2000, mas ele não pode mais ser encontrado.
Então, o que fazer? Agora todo mundo sabe que CSS pode ser escrito assim:
| .G_G { /* xxxxxx */ } |
Podemos pensar nisso como um protótipo, ou uma classe, -__-b parece ser uma classe originalmente, e então "instanciar" um objeto em HTML, por exemplo:
| ＜div class="G_G"＞Idiota chorando＜/div＞ |
Este elemento usará a definição correspondente de CSS, mas a classe correspondente não é suficiente, porque nossa página pode aplicar esta classe em muitos lugares. Para lidar com o relacionamento "privado", altere o código agora para:
| ＜div id="aoao" class="G_G"＞Idiota chorando＜/div＞ |
Neste caso, o elemento com ID aaoao aplicará a definição da classe .G_G, e você poderá usar um seletor como #aoao{} para inserir a definição do efeito privado, que não afetará a classe .G_G pública. , ao mesmo tempo, a prioridade definida por #aoao será maior que .G_G, o que é consistente com o senso comum de que as definições privadas têm maior prioridade do que as definições públicas ^^.
Como eu uso algo único como ID, reutilizar essas coisas definidas de forma privada se torna um problema (um ID só pode aparecer uma vez em uma página, não sei quem disse isso, mas é a verdade de qualquer maneira). E se quisermos conseguir a privatização de muitas das mesmas coisas? Então devemos implementar o “polimorfismo”. Cave haha. Altere o código novamente:
| ＜div class="G_G o_O"＞Idiota chorando＜/div＞ |
Um é "G_G" e o outro é "o_O", mas se usarmos .o_O{}, também podemos definir o elemento se o CSS for assim:
| .G_G {largura:100%} .o_O {cor:#123456} |
Todos os elementos serão definidos e, como as definições não se acumulam, todos serão aplicados. Se o código estiver assim, não sei se será mais fácil de entender.
＜div class="layout color"＞Não é um pássaro estúpido＜/div＞ .layout{largura:100%} |
Em seguida, precisamos implementar o “encapsulamento”. Você deve usar o seletor filho com frequência. Altere o código:
| ＜div class="G_G"＞＜span class="bendan"＞Idiota＜/span＞Ai＜/div＞ |
Embora .bendan{} e .G_G .bendan{} possam ser definidos, o último só pode ser aplicado a elementos com classe "G_G. Podemos simplesmente entender .bendan{} como uma definição global e .G_G .bendan{ }. é entendido como uma definição parcial, o que é benéfico para a modularização do nosso XHTML e CSS. ^^O lendário "encapsulamento" apareceu e depois continuou.
| ＜div id="aoao" class="G_G o_O"＞＜span class="bendan"＞Idiota＜/span＞嗷嗷＜/div＞ |
Esse código pode produzir inúmeras alterações e, se você não entendê-lo, terá que começar do zero. ^^
Compreenda profundamente a aplicação de ID e classe no layout de página da web XHTML CSS!