¿Cuál es el significado de "cascada' en el CSS?

Question

¿Cuál es el significado exacto de la expresión 'en cascada' en el CSS? Estoy recibiendo diferentes puntos de vista, por lo que pido aquí. Un ejemplo podría ayudar.

Answer 1

'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 forma conocida de determinar qué regla específica de hoja de estilos se aplica a qué pieza de HTML.

La regla utilizada es elegida por en cascada desde las reglas más generales hasta la regla específica requerida. Se elige la regla más específica.

Answer 2

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 usa una hoja de estilo vinculada y luego incluye un poco de CSS en el encabezado de su documento después de enlazar con el 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, también podría considerar la "herencia" como parte de la cascada, para todos los propósitos prácticos. Las cosas "caen en cascada" desde los elementos que contienen.

Answer 3

Cuando enseño CSS, siempre digo a los alumnos que "hojas de estilo en cascada" significa algo así como "que lucha contra las hojas de estilo".

Una regla dice que su etiqueta H3 es roja, otra regla dice que es verde: las reglas se contradicen entre sí, ¿quién ganará? Hoja de estilo deathmatch!

OK quizás sea una ligera exageración, pero es mucho más fácil para las personas sin código y sin 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.

Answer 4

Es un proceso que se utiliza para resolver los conflictos en la especificación de la hoja de estilo.

Este es el proceso de resolución de conflictos realizado de acuerdo con la mención de precedencia en CSS.

Answer 5

Håkon Wium Lie (CSS co-creador) define la "cascada" en su tesis de doctorado en la CSS como "El proceso de combinar varias hojas de estilo y resolver conflictos entre ellos" (http://people.opera.com/howcome/2006/phd/#h-357)

Answer 6

El siguiente artículo responde a tu pregunta perfectamente.

Es el orden en que las propiedades se aplican a un elemento (s) en particular.

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Answer 7

usted tiene que pensar de ella desde el exterior. Si usted tiene una regla que es que en el cuerpo de la etiqueta que lo hará "en cascada" a través de cada etiqueta hijo. 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.

Answer 8

Puede tratar el procesamiento CSS ya que una cascada contiene varias cascadas.Aquí son aquellos cascadas de arriba a abajo en orden: (. Cuanto más baja puede anular la misma propiedad en el superior)

1. declaraciones de agente de usuario declaraciones normales
2. usuario
3. autor declaraciones normales
4. autor importantes declaraciones
5. usuarios importantes declaraciones

Ver más en el spec

en cascada es elegir el valor correcto de varios orígenes. Pero es diferente de ordenando. Solo algo que no está en orden debe ser ordenado. Pero en CSS estos orígenes tienen precedencia fija. Y así el pseudocódigo podría parecerse a lo siguiente:

1. inicializar la matriz de valores;
2. aplicar los valores desde el 1er origen;
3. aplicar los valores del 2º origen, anular si el valor existe;
4. ...
5. aplicar los valores desde el origen Nth, anular si los valores existen;

Desde el pseudo-código puede ver que se parece bastante a una cascada de varias cascadas.

Answer 9

CSS significa hoja de estilos 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.

Answer 10

Conectar en cascada significa verter 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.

Answer 11

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. ES DECIR. el último en la cascada tiene la mayor influencia.

(Esto es sólo una variación en tener las dos reglas en la misma hoja -. El último gana si todas las demás cosas son iguales)

Por ejemplo, dada

body { 
    background:blue; 
} 

body { 
    background:green; 
} 

entonces el fondo se ser verde.

Answer 12

Cascading es un algoritmo que asigna peso a cada regla de estilo. Cuando se aplican varias reglas, la que tiene el mayor peso tiene prioridad.