and - ¿Cuál es el significado de "cascada" en CSS?
and css (12)
¿Cuál es el significado exacto del término "Cascading" en CSS? Estoy obteniendo diferentes puntos de vista, así que pregunto aquí. Un ejemplo ayudaría.
"En cascada" en este contexto significa que debido a que más de una regla de hoja de estilo podría aplicarse a una pieza particular de HTML, tiene que haber una manera conocida de determinar qué regla de hoja de estilo específica se aplica a qué parte de HTML.
La regla utilizada se elige al caer en cascada de las reglas más generales a la regla específica requerida. La regla más específica es elegida.
CSS significa Hoja de Estilo en Cascada. Por su propia naturaleza, los estilos más abajo de una hoja de estilos en cascada anulan los estilos equivalentes más arriba (a menos que los estilos más arriba sean más específicos). Por lo tanto, podemos establecer estilos base al comienzo de una hoja de estilo, aplicable a todas las versiones de nuestro diseño, y luego anular las secciones relevantes con consultas de medios más adelante en el documento.
Conectarse en cascada significa verterse en pasos o agregar pasos. Las hojas de estilo contienen códigos para diseñar un elemento html. Y la manera en que se escriben los códigos en la hoja de estilos es en cascada. O simplemente, los códigos consecutivos en capas para cada elemento html de una página html en hoja de estilos forman la hoja de estilos en cascada.
Cuando enseño CSS, siempre les digo a los alumnos que "hojas de estilos en cascada" significa algo así como " pelear con hojas de estilo".
Una regla dice que tu etiqueta H3 es roja, otra regla dice que es verde: las reglas se contradicen entre sí, ¿quién ganará? Stylesheet Deathmatch!
OK, quizás sea una ligera exageración, pero es mucho más fácil para las personas que no son de código y que no están en programación, que apenas están comenzando, que cualquier noción de cascada o herencia.
Por supuesto, me aseguro de decirles que no es un problema que las hojas de estilo se peleen entre sí, así es como se diseñó el lenguaje.
El siguiente artículo responde a su pregunta perfectamente.
Es el orden en que las propiedades se aplican a un elemento (s) en particular.
Es un proceso que se utiliza para resolver los conflictos en la especificación de la hoja de estilo.
Ese es precisamente el proceso de resolución de conflictos realizado de acuerdo con la mención de precedencia en CSS.
Håkon Wium Lie (co-creador de CSS) define "cascada" en su tesis doctoral sobre CSS como "El proceso de combinar varias hojas de estilo y resolver conflictos entre ellas" ( http://people.opera.com/howcome/2006/phd/#h-357 )
La conexión en cascada es un algoritmo que asigna peso a cada regla de estilo. Cuando se aplican varias reglas, la que tiene el mayor peso tiene prioridad.
Puede tratar el procesamiento de CSS ya que una cascada contiene varias cascadas. Estas son las cascadas de arriba a abajo en orden: (La más baja puede anular la misma propiedad en la superior).
- declaraciones de agente de usuario
- declaraciones normales del usuario
- autor declaraciones normales
- autor declaraciones importantes
- declaraciones importantes del usuario
Ver más en la spec
La cascada es elegir el valor correcto de múltiples orígenes. Pero es diferente de clasificar . Solo algo que no está en orden debe ser ordenado. Pero en CSS estos orígenes tienen precedencia fija. Y así el pseudo-código podría parecerse a lo siguiente:
- inicializar la matriz de valores;
- aplicar los valores desde el 1er origen;
- aplicar los valores desde el 2º origen, anular si el valor existe;
- ...
- aplicar los valores desde el origen Nth, anular si los valores existen;
Desde el pseudo-código puedes ver que se parece bastante a una cascada de varias cascadas.
Tienes que pensarlo desde el exterior hacia adentro. Si tienes una regla que dice que está en la etiqueta corporal, se "conectará en cascada" a través de cada etiqueta secundaria. Si coloca una regla en cualquier etiqueta dentro del cuerpo, adoptará esa regla, y así sucesivamente. Por lo tanto, la regla establece una cascada en todo el contenido a menos que se interrumpa por una regla de una etiqueta incrustada.
Una aclaración que puede ayudar. Si incluye dos hojas de estilo y hay una regla con la misma especificidad en cada una, la última incluida gana. IE, el último en la cascada tiene la mayor influencia.
(Esto es solo una variación de tener las dos reglas en la misma hoja, la última gana si todas las demás cosas son iguales).
Por ejemplo, dado
body {
background:blue;
}
body {
background:green;
}
entonces el fondo será verde.
CSS doc
p{font-size: 12pt;}
p{font-size: 14pt;}
<p>My Headline<p>
representaría el p en la fuente de 14 puntos porque está "más cerca" del elemento real (las hojas de estilo externas se cargan desde la parte superior del archivo hasta la parte inferior del archivo). Si utiliza una hoja de estilo vinculada y luego incluye un poco de CSS en el encabezado de su documento después de vincularlo al documento CSS externo, la declaración "en la cabeza" ganaría porque está aún más cerca del elemento definido. Esto solo se aplica a los selectores ponderados por igual. Consulte http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html para obtener una buena descripción del peso de un selector determinado.
Dicho todo esto, podría considerar la "herencia" como parte de la cascada también, para todos los propósitos prácticos. Las cosas "caen en cascada" desde los elementos que contienen.