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

¿Cuál es el significado exacto del término "en cascada" en CSS? Tengo diferentes puntos de vista, así que pregunto aquí. Un ejemplo ayudaría.

"Cascada" en este contexto significa que debido a que más de una declaración de hoja de estilo podría aplicarse a un fragmento particular de HTML, tiene que haber una forma conocida de determinar qué regla de hoja de estilo específica se aplica a qué fragmento de HTML.

La regla utilizada se elige en cascada desde las declaraciones más generales hasta la regla específica requerida. Se elige la declaración más específica.

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

Una regla le dice a su etiqueta H3 que sea roja, otra regla dice que sea verde - las reglas se contradicen entre sí, ¿quién ganará? ¡Deathmatch de hoja de estilo!

De acuerdo, tal vez sea una ligera exageración, pero es mucho más accesible para las personas que no codifican ni programan y que recién 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í, esa es la forma en que se diseñó el lenguaje.

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" https://www.wiumlie.no/2006/phd/

El siguiente artículo responde perfectamente a tu pregunta.

Es el orden en el que se aplican las propiedades a un elemento o elementos en particular.

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

Tienes que pensar en ello desde el exterior hacia dentro. Si tienes una regla que indica que está en la etiqueta del cuerpo, pasará en cascada por todas las etiquetas secundarias. Si pones una regla en cualquier etiqueta dentro del cuerpo, adoptará esa regla y así sucesivamente. Entonces, la regla se propaga en cascada a través de todo el contenido a menos que sea interrumpida por una regla de una etiqueta incrustada.

Puede tratar el procesamiento CSS como una cascada que contiene varias cascadas. Aquí están esas cascadas de arriba a abajo en orden: (la inferior puede anular la misma propiedad en la superior).

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

Ver más en la especificación

La cascada consiste en elegir el valor correcto de múltiples orígenes. Pero es diferente a clasificar . Solo algo que no está en orden necesitamos clasificar. Pero en CSS estos orígenes tienen una precedencia fija. Y, por tanto, el pseudocódigo podría verse así:

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

En el pseudocódigo se puede ver que parece una cascada de varias cascadas.

Una aclaración que puede ayudar. Si incluye dos hojas de estilo y hay una regla con la misma especificidad en cada una, gana la última incluida. Es decir, el último de 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.

Esta respuesta es para principiantes absolutos. Si desea una descripción general de esta respuesta, lea mi segunda respuesta.

La cascada es el proceso de combinar diferentes hojas de estilo y resolver conflictos entre diferentes reglas y declaraciones CSS cuando se aplica más de una regla a un determinado elemento . Porque, como probablemente ya sepa, una declaración para una determinada propiedad de estilo, como el tamaño de fuente, puede aparecer en varias hojas de estilo y también varias veces dentro de una sola hoja de estilo.

Para comprender la cascada, debe comenzar con la fase de análisis de CSS porque en la fase de análisis el primer paso es resolver las declaraciones CSS en conflicto y el segundo paso es procesar los valores CSS finales.

Ahora CSS también puede provenir de diferentes fuentes. El más común es el CSS que escribimos los desarrolladores. Estas declaraciones que colocamos en nuestras hojas de estilo se denominan declaraciones de autor. Otra fuente pueden ser las declaraciones del usuario, que son CSS provenientes del usuario. Por ejemplo, cuando el usuario cambia el tamaño de fuente predeterminado en el navegador, ese es el CSS del usuario, y por último, pero no menos importante, están las declaraciones predeterminadas del navegador.

Por ejemplo, si colocamos una etiqueta de anclaje en nuestro HTML para un enlace y luego no le aplicamos ningún estilo, generalmente se representará con texto azul y subrayado, a la derecha. Eso se llama CSS del agente de usuario porque lo establece el navegador. Entonces, la cascada combina las declaraciones CSS provenientes de todas estas fuentes diferentes, pero ¿cómo la cascada realmente resuelve los conflictos cuando se aplica más de una regla?

Bueno, lo que hace es observar la importancia, la especificidad del selector y el orden de origen del orden de declaraciones en conflicto para determinar cuál tiene prioridad, y así es como funciona. En primer lugar, la cascada comienza dando las declaraciones en conflicto de diferente importancia en función de dónde se declaran en su fuente. Las declaraciones más importantes son las declaraciones de usuario marcadas con la palabra clave importante.

Las segundas declaraciones más importantes son las declaraciones de autor marcadas con importante. En tercer lugar, las declaraciones normales del autor, luego las declaraciones normales del usuario y, finalmente, las menos importantes son las declaraciones predeterminadas del navegador, lo que en realidad tiene mucho sentido que podamos sobrescribir fácilmente estas declaraciones que vienen por defecto del navegador.

Ahora, muchas veces solo tendremos un montón de reglas en conflicto en nuestras hojas de estilo de autor sin ninguna palabra clave importante. Ese es en realidad el escenario más común y, en este caso, todas las declaraciones tienen exactamente la misma importancia. Ahora bien, ¿qué pasa en este caso? Lo que hace la cascada si este es el caso es calcular y comparar las especificidades de los selectores de declaración, y así es como funciona.

Los estilos en línea tienen la mayor especificidad, seguidos por los ID, luego las clases, las pseudoclases y los selectores de atributos, y finalmente el elemento menos específico y el selector de pseudoelementos. Entonces, cuando tenemos declaraciones en conflicto con la misma importancia que vimos en la última diapositiva, calculamos la especificidad de su selector en función de las prioridades que acabo de mostrar, pero veamos cómo calculamos las especificidades con un pequeño ejemplo, eso es siempre lo mejor, correcto.

En el ejemplo anterior, todas estas declaraciones tienen la misma importancia, porque todas son declaraciones de autor. Así que calculemos las especificidades de su selector para averiguar si el color de fondo será azul, verde, morado o amarillo, y así es como lo hacemos. La especificidad no es solo un número, sino un número para cada una de las cuatro categorías que les mostré antes. Estilos en línea, ID, clases, pseudo-elementos y atributos, y finalmente elementos y para cada uno de estos contamos el número de ocurrencias en el selector.

Entonces, aquí en el selector uno, no tenemos ningún estilo en línea, por supuesto, porque un estilo en línea tiene que estar escrito en el HTML, lo cual no es el caso aquí, por lo que es un cero. Tampoco tenemos ID aquí, por lo que nuevamente es un cero, pero tenemos una clase, la clase de botón. Entonces, para la categoría de clases, tenemos uno, y finalmente, no hay un selector de elementos aquí, así que cero para ese también, y eso es todo. La especificidad del selector es cero, cero, uno, cero.

Ahora, comparémoslo con los demás. El siguiente tampoco es un estilo en línea, así que cero para el primero. Ahora, aquí tenemos un selector de ID para el ID de navegación, correcto, así que es uno para el ID. También tenemos dos clases para tirar hacia la derecha y el botón, por lo que es un dos para la categoría de clases, y finalmente, también hay dos selectores de elementos aquí. El elemento nav y el elemento div, lo que significa que también son dos para la categoría de elementos. Entonces, finalmente, la especificidad del selector es cero, uno, dos, dos, que en realidad es un selector muy específico.

El selector número tres es muy simple. Es solo un selector de elementos, por lo que la especificidad es cero, cero, cero, uno.

Ahora el último, selector número cuatro. Primero, nuevamente tenemos el ID de navegación, por lo que es uno para el ID. A continuación, tenemos una clase, la clase de botón, y también una pseudoclase, que es hover, lo que la convierte en dos para la categoría de clases en total. Como también hay un selector de elementos, la especificidad final es cero, uno, dos, uno.

Ahora sepamos cómo usamos estos números para averiguar cuál de los selectores se aplica. Comenzamos a mirar los números de izquierda a derecha comenzando con la categoría más específica, los estilos en línea. Si hay un selector con uno para estilos en línea gana contra todos los demás selectores, porque esta es la categoría más específica. Bueno, este no es el caso aquí, así que pasemos a las ID. Vemos que los selectores dos y cuatro tienen un uno aquí, mientras que los otros tienen cero, por lo que los que tienen cero están fuera del juego porque son menos específicos que los selectores dos y cuatro, los que tienen los ID.

Ahora que ambos selectores tienen uno en la categoría de ID, tenemos que seguir adelante y verificar las clases. Ambos tienen un dos en esta categoría, todavía hay un empate entre ellos, y finalmente, en la categoría de elementos, el selector dos tiene un dos mientras que el selector cuatro solo tiene uno, por lo que aquí tenemos un ganador. El selector número dos es el selector más específico de todos y por lo tanto le dará a nuestro botón un fondo verde.34 El valor de la declaración ganadora se llama valor en cascada porque es el resultado de la cascada.

Entonces, comenzamos con un grupo de valores declarados, en este caso azul, verde, morado y amarillo, uno de ellos gana y se convierte en el valor en cascada, que en nuestro ejemplo es verde.

Ahora imagine que el sector cuatro también tiene dos elementos, entonces ambos selectores dos y cuatro tendrían exactamente la misma especificidad, ¿verdad? Entonces, ¿qué sucede en este caso y les prometo que casi ha terminado? Bueno, si todavía hay un empate en este punto, la última declaración CSS escrita en el código es la que se aplicará. Entonces, nuevamente, si todo es igual, si todos los selectores de declaraciones tienen la misma especificidad, entonces es simplemente la última declaración que se usará para diseñar el elemento seleccionado.

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

Ese es principalmente el proceso de resolución de conflictos realizado de acuerdo con la precedencia mencionada en CSS.

CSS son las siglas de Cascading Style Sheet. Por su propia naturaleza, los estilos más abajo, una hoja de estilo en cascada anula los estilos equivalentes más arriba (a menos que los estilos más altos sean más específicos). Por lo tanto, podemos establecer estilos base al comienzo de una hoja de estilo, aplicables a todas las versiones de nuestro diseño, y luego anular las secciones relevantes con consultas de medios más adelante en el documento.

En cascada significa verter en pasos o agregar en pasos. Las hojas de estilo contienen códigos para diseñar un elemento html. Y la forma en que se escriben los códigos en la hoja de estilo es en cascada. O simplemente, los códigos consecutivos en capas para cada elemento html de una página html en la hoja de estilo forman la hoja de estilo en cascada.

La cascada es un algoritmo que asigna peso a cada regla de estilo. Cuando se aplican varias reglas, prevalece la de mayor peso.

Cuando se aplican uno o más estilos al mismo elemento, CSS realiza un conjunto de reglas llamadas en cascada que evalúa la fuerza de especificidad de los dos estilos aplicados y determina el ganador, es decir, la regla de estilo que tiene más peso gana. mismo peso, entonces la última regla aplicada gana.

Cascada y especificidad lo que necesita saber:

1. La declaración CSS marcada con! Important tiene la máxima prioridad.

2. Pero solo use! Important como último recurso. Es mejor usar especificidades correctas, ¡código más fácil de mantener!

3. Los estilos en línea siempre tendrán prioridad sobre los estilos en hojas de estilo externas.

4. Un selector que contiene 1 ID es más específico que uno con 1000 clases.

5. Un selector que contiene 1 clase es más específico que uno con 1000 elementos.

6. El selector universal * no tiene valor de especificidad (0,0,0)

7. Confíe más en la especificidad que en el orden de los selectores.

8. Pero confíe en el orden cuando utilice hojas de estilo de terceros; coloque siempre la hoja de estilo de su autor al final.

Al elegir qué estilos CSS aplicar a un elemento HTML, la especificidad anula la generalidad de acuerdo con un conjunto de reglas en cascada que resuelven los conflictos entre estilos:

1. Sin CSS, el HTML se mostrará de acuerdo con los estilos predeterminados del navegador.
2. Los selectores de etiquetas CSS (que coinciden con la etiqueta HTML) anulan los valores predeterminados del navegador.
3. Los selectores de clases CSS (con.) Anulan las referencias de etiquetas.
4. Los selectores de ID de CSS (con #) anulan las referencias de clase.
5. CSS en línea codificado en una etiqueta HTML anula el ID, la clase y la etiqueta CSS.
6. Agregar el valor ! Important a un estilo CSS anula todo lo demás.
7. Si los selectores de CSS son idénticos, el navegador combina sus propiedades. Si las propiedades CSS resultantes entran en conflicto, el navegador elige el valor de propiedad que apareció más tarde o más recientemente en el código.

Un selector de CSS que coincida con una combinación más específica de etiquetas, clases y / o ID tendrá prioridad. De los siguientes ejemplos, el primero tendrá prioridad sobre el segundo, independientemente de su orden de aparición en el CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

representaría la p en una fuente de 14 puntos porque está "más cerca" del elemento real (hojas de estilo externas que se cargan desde la parte superior del archivo hasta la parte inferior del archivo). Si usa una hoja de estilo vinculada y luego incluye algo de CSS en el encabezado de su documento después de vincularlo al documento CSS externo, la declaración "in head" ganaría porque está aún más cerca del elemento definido. Esto solo es cierto para selectores de igual ponderación. 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 que contienen elementos.