Qual é o significado de "cascata" em CSS?

Qual é o significado exato do termo "Cascata" em CSS? Estou recebendo pontos de vista diferentes, então pergunto aqui. Um exemplo ajudaria.

"Cascata" neste contexto significa que, como mais de uma declaração de folha de estilo pode se aplicar a uma parte específica do HTML, deve haver uma maneira conhecida de determinar qual regra de folha de estilo específica se aplica a qual parte do HTML.

A regra usada é escolhida em cascata das declarações mais gerais para a regra específica necessária. A declaração mais específica é escolhida.

Quando ensino CSS, sempre digo aos alunos que "folhas de estilo em cascata" significa algo como " folhas de estilo de combate ".

Uma regra diz que sua tag H3 é vermelha, outra regra diz que ela é verde - as regras estão se contradizendo, quem vai ganhar !? Folha de estilo deathmatch!

OK, talvez isso seja um pequeno exagero, mas é muito mais acessível para pessoas que não usam código e não programam que estão apenas começando do que qualquer noção de cascata ou herança.

É claro que me certifico de dizer a eles que não é um problema para as folhas de estilo lutarem entre si, é assim que a linguagem foi projetada.

Håkon Wium Lie (co-criador de CSS) define "cascata" em sua tese de doutorado sobre CSS como "O processo de combinar várias folhas de estilo e resolver conflitos entre elas" https://www.wiumlie.no/2006/phd/

O seguinte artigo responde perfeitamente à sua pergunta.

É a ordem em que as propriedades são aplicadas em um determinado elemento (s).

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

Você tem que pensar de fora para dentro. Se você tem uma regra que diz que está na tag do corpo, ela irá "se espalhar" por cada tag filha. Se você colocar uma regra em qualquer tag dentro do corpo, ela adotará essa regra e assim por diante. Portanto, a regra se espalha por todo o conteúdo, a menos que seja interrompida por uma regra de uma tag incorporada.

Você pode tratar o processamento CSS como uma cascata que contém várias cascatas. Aqui estão as cascatas de cima para baixo em ordem: (A inferior pode substituir a mesma propriedade na superior.)

1. declarações do agente do usuário
2. declarações normais do usuário
3. declarações normais do autor
4. autor declarações importantes
5. declarações importantes do usuário

Veja mais nas especificações

A cascata é escolher o valor certo de várias origens. Mas é diferente de classificar . Precisamos classificar apenas algo que não está em ordem. Mas no CSS essas origens têm precedência fixa. E, portanto, o pseudocódigo pode ter a seguinte aparência:

1. inicializar a matriz de valor;
2. aplicar os valores da 1ª origem;
3. aplica os valores da 2ª origem, sobrescreve se o valor existe;
4. ...
5. aplique os valores da enésima origem, substitua se os valores existirem;

Pelo pseudocódigo, você pode ver que se parece muito com uma cachoeira de várias cascatas.

Um esclarecimento que pode ajudar. Se você incluir duas folhas de estilo e houver uma regra com a mesma especificidade em cada uma, a última vence. Ou seja, o último na cascata tem a maior influência.

(Esta é apenas uma variação de ter as duas regras na mesma folha - a última vence se todas as outras coisas forem iguais.)

Por exemplo, dado

body {
    background:blue;
}

body {
    background:green;
}

então o fundo ficará verde.

Esta resposta é para iniciantes absolutos. Se você quiser uma visão geral dessa resposta, leia minha segunda resposta.

Cascateamento é o processo de combinar diferentes folhas de estilo e resolver conflitos entre diferentes regras CSS e declarações quando mais de uma regra se aplica a um determinado elemento . Porque como você provavelmente já sabe, uma declaração para uma determinada propriedade de estilo, como o tamanho da fonte, pode aparecer em várias folhas de estilo e também várias vezes dentro de uma única folha de estilo.

Para entender o cascateamento, você deve começar com a fase de análise CSS, porque na fase de análise a primeira etapa é resolver as declarações CSS conflitantes e a segunda etapa é processar os valores CSS finais.

Agora, o CSS também pode vir de diferentes fontes. O mais comum é o CSS que nós, desenvolvedores, escrevemos. Essas declarações que colocamos em nossas folhas de estilo são chamadas de declarações do autor. Outra fonte pode ser as declarações do usuário, que é o CSS vindo do usuário. Por exemplo, quando o usuário altera o tamanho da fonte padrão no navegador, esse é o CSS do usuário e, por último, mas não menos importante, existem as declarações do navegador padrão.

Por exemplo, se colocarmos uma tag âncora em nosso HTML para um link e depois não estilizá-lo, geralmente será renderizado com texto em azul e sublinhado, certo. Isso é chamado de agente de usuário CSS porque é definido pelo navegador. Portanto, a cascata combina as declarações CSS provenientes de todas essas fontes diferentes, mas como a cascata realmente resolve os conflitos quando mais de uma regra se aplica?

Bem, o que ele faz é examinar a importância, a especificidade do seletor e a ordem de origem da ordem de declarações conflitantes para determinar qual delas tem precedência, e é assim que funciona. Em primeiro lugar, a cascata começa fornecendo as declarações conflitantes de importância diferente com base em onde são declaradas em sua fonte. As declarações mais importantes são as declarações do usuário marcadas com a palavra-chave importante.

As segundas declarações mais importantes são as declarações do autor marcadas com importante. Terceiro, as declarações normais do autor, depois as declarações normais do usuário e, finalmente, as menos importantes são as declarações do navegador padrão, o que realmente faz muito sentido, pois podemos facilmente sobrescrever essas declarações que vêm do navegador por padrão.

Agora, muitas vezes, teremos um monte de regras conflitantes em nossas folhas de estilo do autor sem nenhuma palavra-chave importante. Esse é realmente o cenário mais comum e, neste caso, todas as declarações têm exatamente a mesma importância. Agora, o que acontece neste caso? O que a cascata faz se for esse o caso é calcular e comparar as especificidades dos seletores de declaração, e é assim que funciona.

Estilos embutidos têm a especificidade mais alta seguida por IDs, classes, pseudo-classes e seletores de atributo e, finalmente, o elemento menos específico e seletor de pseudo-elemento. Então, quando temos declarações conflitantes com a mesma importância que vimos no último slide, calculamos a especificidade do seletor com base nas prioridades que acabei de mostrar, mas vamos ver como realmente calculamos as especificidades com um pequeno exemplo, isso é sempre melhor, certo.

Pelo exemplo acima, todas essas declarações têm a mesma importância, pois são todas declarações do autor. Portanto, vamos calcular suas especificidades de seletor para descobrir se a cor de fundo será azul, verde, roxo ou amarelo, e é assim que fazemos. Na verdade, a especificidade não é apenas um número, mas um número para cada uma das quatro categorias que mostrei antes. Estilos, IDs, classes, pseudoelementos e atributos embutidos e, finalmente, elementos e, para cada um deles, contamos o número de ocorrências no seletor.

Portanto, aqui no seletor um, não temos nenhum estilo embutido, é claro, porque um estilo embutido deve ser escrito no HTML, o que não é o caso aqui, então é zero. Também não temos IDs aqui, então é novamente zero, mas temos uma classe, a classe de botão. Então, para a categoria classes, temos um e, finalmente, não há seletor de elemento aqui, então zero para aquele também, e é isso. A especificidade do seletor é zero, zero, um, zero.

Agora, vamos comparar com os outros. O próximo também não é um estilo embutido, portanto, zero para o primeiro. Agora aqui temos um seletor de ID para o nav ID, certo, então é um para o ID. Também temos duas classes puxadas para a direita e o botão, então é um dois para a categoria de classes e, finalmente, há também dois seletores de elemento aqui. O elemento nav e o elemento div, o que significa que também são dois para a categoria de elementos. Finalmente, a especificidade do seletor é zero, um, dois, dois, que na verdade é um seletor altamente específico.

O seletor número três é muito simples. É apenas um seletor de elemento e, portanto, a especificidade é zero, zero, zero, um.

Agora o último, seletor número quatro. Primeiro, novamente temos o nav ID, então é um para o ID. Em seguida, temos uma classe, a classe de botão, e também uma pseudoclasse, que é hover, o que a torna duas para a categoria de classes no total. Como também há um seletor de elemento, a especificidade final é zero, um, dois, um.

Agora vamos saber como realmente usamos esses números para descobrir qual dos seletores se aplica. Começamos a olhar para os números da esquerda para a direita, começando com a categoria mais específica, os estilos embutidos. Se houver um seletor com um para estilos embutidos, ganha contra todos os outros seletores, porque esta é a categoria mais específica. Bem, este não é o caso aqui, então vamos passar para os IDs. Vemos que os seletores dois e quatro têm um aqui, enquanto os outros têm zero, então aqueles com zero estão fora do jogo porque são menos específicos que os seletores dois e quatro aqueles com os IDs.

Agora, uma vez que ambos os seletores têm um na categoria de IDs, temos que seguir em frente e verificar as classes. Ambos têm um dois nesta categoria ainda há empate entre eles, e finalmente, na categoria de elementos, o seletor dois tem um dois enquanto o seletor quatro tem apenas um e então temos um vencedor aqui. O seletor número dois é o seletor mais específico de todos e, portanto, dará ao nosso botão um fundo verde.34 O valor da declaração vencedora é chamado de valor em cascata porque é o resultado da cascata.

Portanto, começamos com um monte de valores declarados, neste caso azul, verde, roxo e amarelo, um deles vence e se torna o valor em cascata, que em nosso exemplo é verde.

Agora imagine que o setor quatro também tenha dois elementos, então ambos os seletores dois e quatro teriam exatamente a mesma especificidade, certo. Então o que acontece neste caso e eu prometo a você que está quase acabando agora, tudo bem. Bem, se ainda houver um empate neste ponto, a última declaração CSS escrita no código é a que se aplica. Então, novamente, se tudo for igual, se todos os seletores de declaração tiverem a mesma especificidade, então é simplesmente a última declaração que será usada para estilizar o elemento selecionado.

É um processo usado para resolver os conflitos na especificação da folha de estilo.

Esse é basicamente o processo de resolução de conflitos feito de acordo com a menção de precedência no CSS.

CSS significa Cascading Style Sheet. Por sua própria natureza, os estilos mais abaixo em uma folha de estilo em cascata substituem os estilos equivalentes mais acima (a menos que os estilos mais acima sejam mais específicos). Podemos, portanto, definir estilos básicos no início de uma folha de estilo, aplicável a todas as versões de nosso design e, em seguida, substituir as seções relevantes com consultas de mídia mais adiante no documento.

Cascata significa derramar em etapas ou adicionar etapas. As folhas de estilo contêm códigos para definir o estilo de um elemento html. E a maneira como os códigos são escritos na folha de estilo é em cascata. Ou simplesmente, códigos consecutivos em camadas para cada elemento html de uma página html na folha de estilo formam a folha de estilo em cascata.

O cascateamento é um algoritmo que atribui peso a cada regra de estilo. Quando várias regras se aplicam, aquela com o maior peso tem precedência.

Quando um ou mais estilos são aplicados ao mesmo elemento, o CSS executa um conjunto de regras chamado cascata que avalia a força da Especificidade dos dois estilos aplicados e determina o vencedor, ou seja, a regra de estilo que tem mais peso vence. Se as duas regras tiverem mesmo peso, então a regra aplicada por último vence.

Cascata e especificidade o que você precisa saber:

1. A declaração CSS marcada com! Important tem a prioridade mais alta.

2. Mas use somente! Important como último recurso. É melhor usar as especificidades corretas - código mais sustentável!

3. Os estilos embutidos sempre terão prioridade sobre os estilos nas folhas de estilo externas.

4. Um seletor que contém 1 ID é mais específico do que um com 1000 classes.

5. Um seletor que contém 1 classe é mais específico do que um com 1000 elementos.

6. O seletor universal * não tem valor de especificidade (0,0,0)

7. Confie mais na especificidade do que na ordem dos seletores.

8. Mas confie na ordem ao usar folhas de estilo de terceiros - sempre coloque a folha de estilo do autor por último.

Ao escolher quais estilos CSS aplicar a um elemento HTML, a especificidade substitui a generalidade de acordo com um conjunto em cascata de regras que resolvem conflitos entre estilos:

1. Sem CSS, o HTML será exibido de acordo com os estilos padrão do navegador.
2. Os seletores de tag CSS (correspondentes à tag HTML) substituem os padrões do navegador.
3. Os seletores de classe CSS (com.) Substituem as referências de tag.
4. Os seletores de ID CSS (com #) substituem as referências de classe.
5. CSS embutido codificado em um código de substituição de tag HTML, classe e CSS de tag.
6. Adicionar o valor ! Important a um estilo CSS substitui todo o resto.
7. Se os seletores CSS forem idênticos, o navegador combinará suas propriedades. Se as propriedades CSS resultantes entrarem em conflito, o navegador escolherá o valor da propriedade que apareceu mais tarde ou mais recentemente no código.

Um seletor CSS que corresponda a uma combinação mais específica de tags, classes e / ou IDs terá prioridade. Dos exemplos a seguir, o primeiro terá precedência sobre o segundo, independentemente de sua ordem de aparecimento no 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>

renderizaria op com a fonte de 14pt porque está "mais perto" do elemento real (folhas de estilo externas carregando do início para o fim do arquivo). Se você usar uma folha de estilo vinculada e incluir algum CSS no cabeçalho de seu documento após vincular ao documento CSS externo, a declaração "in head" venceria porque está ainda mais próxima do elemento definido. Isso só é verdade para seletores de peso igual. Verifique http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html para obter uma boa descrição do peso de um determinado seletor.

Dito isso, você também pode considerar a 'herança' como parte da cascata - para todos os fins práticos. As coisas "caem em cascata" a partir dos elementos que contêm.