Hace mucho que no actualizo mi blog. Han pasado muchas cosas durante este tiempo y estoy exhausto. Pero todavía hay muchas cosas que quiero hacer, como actualizar merceCSS, ordenar el contenido modular que he resumido hasta ahora y compartirlo con todos, participar en reuniones de intercambio, etc.
He mencionado mucho el diseño modular, como " Modularidad del diseño de muebles de IKEA ", " Pensamiento modular en la reconstrucción de páginas ", " Puntos clave de producción de componentes en la reconstrucción de páginas " están todos relacionados con la modularidad, pero nunca he hablado de los aspectos específicos. Contenido de implementación anterior, solo algunas ideas. Esta vez me centraré en el aspecto de implementación y resumiré parte de la modularización que he realizado hasta ahora.
Para hacer un buen trabajo en modularización , creo que es muy importante comprender el alcance de los estilos, por eso esta parte es el primer artículo de esta serie.
Todos los estudiantes que han escrito programas deben saber que las variables tienen alcance (si no lo sabe, pregúntele a Google, no lo explicaré aquí. La definición de estilos también tiene problemas de alcance, es decir, el alcance de la definición). Es fácil de entender, como el alcance de p a continuación:
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
La prioridad de los selectores de estilos es el conocimiento básico de los estilos de aprendizaje. Repasémoslo brevemente:
Las reglas utilizadas también son muy simples, es decir, los pesos de los selectores se suman, y el más grande tiene prioridad si los pesos son iguales, tiene prioridad el que se define más adelante ; Aunque es muy simple, si no presta atención al escribir, puede conducir fácilmente a definiciones repetidas de CSS y código redundante.
De lo anterior podemos extraer dos factores clave:
¿De qué sirve saber el peso del estilo? Por ejemplo, se puede utilizar así: Para dar el ejemplo más sencillo,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
Conociendo el peso del estilo, sabrás cómo funciona el ejemplo anterior. Otras aplicaciones son la modularización, como los ejemplos de " Modularización del diseño de muebles de IKEA ", continúe para obtener más detalles.