Cascading Style Sheets ou CSS são configurados para que você possa ter muitas propriedades, todas afetando o mesmo elemento. Algumas dessas propriedades podem entrar em conflito umas com as outras. Por exemplo, você pode definir uma cor de fonte vermelha na marca de parágrafo e, mais tarde, definir uma cor de fonte azul. Como o navegador sabe qual cor para criar os parágrafos? Isso é decidido pela cascata.
Tipos de folhas de estilo
Existem três tipos diferentes de folhas de estilo:
- Folhas de estilo do autor
- Estas são folhas de estilo criadas pelo autor da página da web. Eles são o que a maioria das pessoas pensa quando pensa em folhas de estilo CSS.
- Folhas de estilo do usuário
- Folhas de estilo do usuário são definidas pelo usuário da página da web. Isso permite que o usuário tenha mais controle sobre como as páginas são exibidas.
- Folhas de estilo do agente do usuário
- Estes são estilos que o navegador da Web aplica à página para ajudar a exibir essa página. Por exemplo, em XHTML, a maioria dos agentes de usuário visual exibe a tag como texto em itálico. Isso é definido na folha de estilo do agente do usuário.
As propriedades definidas em cada uma das folhas de estilo acima recebem um peso. Por padrão, a folha de estilo do autor tem mais peso, seguida pela folha de estilo do usuário e, finalmente, pela folha de estilo do agente do usuário. A única exceção a isso é com a regra importante em uma folha de estilos do usuário. Isso tem mais peso do que a folha de estilo do autor.
Ordem em Cascata
Para resolver conflitos, os navegadores da web usam a seguinte ordem de classificação para determinar qual estilo tem precedência e será usado:
- Primeiro, procure todas as declarações que se aplicam ao elemento em questão e ao tipo de mídia atribuído.
- Então olhe para qual folha de estilo está vindo. Como acima, as folhas de estilo do autor vêm em primeiro lugar, depois o usuário e, em seguida, o agente do usuário. Com estilos de usuário importantes com maior precedência do que estilos importantes do autor!
- Quanto mais específico for um seletor, mais precedência ele terá. Por exemplo, um estilo em "div.co p" terá uma precedência maior do que um apenas na tag "p".
- Finalmente, classifique as regras pela ordem em que foram definidas. As regras definidas posteriormente na árvore de documentos têm precedência mais alta que as definidas anteriormente. E as regras de uma folha de estilos importada são consideradas antes das regras diretamente na folha de estilo.
