Efeito cascata
O efeito cascata existe para acabar com os conflitos entre elementos e estilos, usando de prioridade para aplicar regras. Para isso, se leva em conta o local da folha de estilo ao todo, do seletor e a especificidade.
Ordem do efeito cascata:
Localizadas todas as regras CSS aplicáveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada. Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará as propriedades de estilo de seu elemento pai. Não havendo elemento pai será aplicado o valor inicial default de estilo para aquele elemento
Regras com declaração importante (! important) tem prioridade sobre aquelas sem a declaração. Se o autor e o usuário declaram regras conflitantes com !important, as do usuário têm prioridade sobre as do autor.
Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo autor têm prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior especificidade que aquelas do autor têm a prioridade. Regras com igual especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do autor e do usuário têm prioridade sobre as regras default das aplicações do usuário (p.ex.: o browser)
Regras mais específicas têm a prioridade sobre as menos específicas.
Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos. Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, têm do maior para o menor pêso (estilos inline têm o maior pêso). Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag </head>. O mesmo ocorre entre as folhas importadas (@import) (fonte)
Link e @import
Antigamente, o @import era usado dentro da tag <style>para esconder folhas de estilo do Netscape 4, que não dava suporte a @import , para que assim fosse possível disponibilizar estilos básicos para o navegador.
Há duas formas de carregar folhas de estilo no HTML, e ambas funcionam de forma diferente, apesar de que com o mesmo objetivo. A tag <link> existe dentro da <head> e junto aos atributos rel e href indica o link para uma folha de estilo externa. Ja @import permite carregar um arquivo CSS dentro de outro, e não é necessário o atibulo rel, porém @import deve estar contido dentro da tag <style>
<link rel="stylesheet" type="text/css" href="a.css">
<style>
@import url("link");
</style>
Nenhum comentário:
Postar um comentário