Tomando um tombo com CSS

O que significa o termo cascata

significa para folhas de estilo? Isso significa que uma regra CSS cai para baixo através do código e, por vezes esbarra em uma norma contrária.

A cascata é sobre o que seus programadores definem precedência: Quem ganha quando há um conflito? Mais do que um estilo pode ser aplicado a uma determinada tag. Por exemplo, há sempre o estilo definido pelo navegador padrão, como preto como a cor de texto padrão. Se você especificar alguma outra cor em uma regra CSS, a cascata permite que sua regra de dominar, ter precedência sobre o estilo embutido.

Mas como é que o navegador decidir qual estilo vence se as regras duas CSS conflito uns com os outros? os estilos conflitantes devem ser combinados? E se os estilos são completamente incompatíveis - como um estilo especificando itálico e outro não-itálico?

especificidade visualizando

Diversos fatores determinam qual o estilo ganha quando estilos colidem: herança, a árvore estrutural de um documento, eo especificidade (ou proximidade) De um modelo. Provavelmente a regra de colisão mais fácil de entender envolve Onde o modelo foi definida. Os seus estilos CSS pode ser definida em quatro grandes locais:

• estilos padrão do navegador.
• Uma folha de estilo externa (um arquivo .css contendo definições de estilo que é referenciado a partir do documento HTML com um elemento Link).
• Uma folha de estilo incorporado (estilos definidos no documento HTML, dentro de seu tag. Este tipo de estilo também é chamado às vezes interno).
• Um estilo inline (um estilo definido como um atributo dentro de uma própria e elemento HTML cujo efeito é limitado para esse elemento única). Por exemplo, este é um estilo alinhado típico:

Esta lista também ilustra a ordem em que os estilos conflitantes "ganhar" em qualquer conflito. Pense na ordem que o estilo mais próximo às vitórias elemento. Por exemplo, o estilo em linha - situado à direita no interior do elemento em si - é o mais próximo. Então, se mais do que um estilo é especificado para esse elemento, um estilo inline é o estilo usado. Este closenessof o estilo para o elemento que coincide com ele é mais formalmente conhecido como especificidade.

A localização estilo com a segunda maior prioridade é a folha de estilo interna localizado no cabeçalho do documento HTML. A terceira maior prioridade vai para a folha de estilo externa - o arquivo separado. E a prioridade mais fraco, o que todos os outros trunfo, é o estilo padrão. Afinal de contas, o padrão é o olhar que uma folha de estilo é suposto para alterar.

Aqui está um exemplo que ilustra como IE decide entre as cores azul e vermelho:

eu acho que eu sou azul.

Para testar este documento, digite o código HTML no bloco de notas e, em seguida, salve-o usando o EmTest.htm nome de arquivo. Carregar a página Web, clicando duas vezes seu nome de arquivo no Windows Explorer. Você verá a frase Eu acho que eu sou azul aparecem em azul. o

elemento aqui foi definido de duas formas conflitantes. No estilo incorporado, ele é definido como vermelho, mas essa definição é substituída pela definição em linha da cor azul.

Tente remover o estilo em linha para ver o que acontece. Altere a linha para

Eu acho que eu sou azul.

Teste novamente por resaving o arquivo de bloco de notas que você acabou modificado.

Não há necessidade de duplo clique novamente neste nome de arquivo no Windows Explorer para carregar a nova versão para IE. Depois de ter carregado um documento, é o endereço padrão no IE - neste caso, um endereço de um arquivo .htm no seu disco rígido. Se você modificar o arquivo que você acabou de fazer neste exemplo, tudo que você tem que fazer para ver a modificação é pressionar F5. Que "refresca" IE.

Algumas pessoas preferem usar exibição da fonte de built-in do navegador como uma maneira rápida de modificar e testar novamente o código CSS. Escolha Visualizar -> Fonte. Você pode fazer alterações no código, e depois salvá-lo. Netscape e Firefox destacar a sintaxe, que alguns programadores achar útil.

Depois de carregar a nova versão deste documento no IE, a linha Eu acho que eu sou azul agora é exibido em vermelho. O conflito entre as definições de estilo incorporado e embutidos foi resolvido, porque você excluiu o estilo alinhado.

Você pode substituir as regras normais de prioridade usando o comando! Importante especificar que este estilo deve ser usado, não importa o que. Um! Importante declaração substitui todas as outras definições de estilo. Você adicionar o comando como este:

p {color: azul importante-}

Em CSS1, estilos declarada importante pelo autor da página Web override mesmo quaisquer estilos que o leitor tenha declarado importante. No entanto, em CSS2, importantes estilos de leitor de prevalecer sobre importantes autor estilos, e de fato mais qualquer autor estilos, seja marcada como importante ou não.

especificidade CSS compreensão

O termo especificidade também é usado para descrever uma segunda forma que um navegador que calcula estilo ganha quando estilos conflito. Em primeiro lugar, o navegador procura por proximidade - mas que se a proximidade é idêntico? Foi quando esta segunda técnica é aplicada.

Imagine, por exemplo, que duas folhas de estilo diferentes são referenciados pelo documento mesmo HTML (sim, você pode anexar mais do que em arquivo CSS para o código HTML de uma determinada página da Web). Mas, em uma dessas folhas, H1 é estilo negrito, e em outra folha é itálico denominado. Qual é o pobre navegador para fazer neste caso? Quais vitórias especificação?

Ao contrário dos exemplos de colisão estilo, anteriormente neste capítulo, onde proximidade poderia ser usado para declarar um vencedor, aqui você tem ambos os estilos localizados na mesmo grau de proximidade (a mesma especificidade). Ambas estas definições de estilo estão localizados em folhas de estilo externas.

Neste caso, o navegador faz um pouco de matemática bizarro para tomar a decisão sobre o estilo a usar. Como antes, o mais estilo "específica" ganha. Mas o que conta como especificidade neste concurso? Não é o mesmo que o fator "proximidade". O navegador tem que fazer um pouco de cálculo estranho, mas você realmente não pode chamar thismath. É apenas uma espécie estranha de acumulação de valores, onde alguns estilos têm ordens de magnitude mais peso do que outros. Não se preocupe em sua cabeça muito sobre essas coisas, se você não encontrar cálculos peculiares interessante.

O que o navegador fazer para calcular a especificidade dos dois estilos concorrentes, se seu fator de "proximidade" é idêntico? Três coisas:

• Olha para um estilo e conta o número de ID atributos que tem, se for o caso
• Conta o número de atributos de classe, se for o caso
• Conta o número de seletores (você pode agrupar seletores em um estilo como este: H1, H2, H3)

O navegador não acontecer, então adicionar estes números junta a ele simplesmente concatena o dígitos. Talvez este seja algum tipo de aritmética usada por estrangeiros na deles galáxia, mas eu tenho certeza que nunca ouvi falar disso. Imagine se você tem o número 130 pelo seguinte processo de concatenação:

1 maçã, 3 laranjas, bananas 0 = 130

Este processo dá maçãs dez vezes o "peso" de laranjas, e 100 vezes o peso de bananas. Aqui estão alguns exemplos que mostram como funciona quando usado para determinar a especificidade de uma CSS. Basta fingir que você está de volta na aula de matemática da terceira série.

Atenção, classe! Qual é o número especificidade para este selector?

ul h1 li.red {color: amarelo-}

Qualquer pessoa obter a resposta de 13?

A resposta correta é 13. Você tem

0 IDs, atributo 1 class (vermelho), e 3 seletores (ul h1 li)

Que "acrescenta-se," por assim dizer, para 013. Agora, kiddies, que pode explicar como você ter uma especificidade de 1 para a seguinte definição selector?

H1 {color: azul-}

Após a especificidade tenha sido determinada, o número mais elevado ganha. Suponha que dois estilos estão em conflito porque ambos definir a cor de H1, mas defini-lo de forma diferente. Mas porque uma definição tem um valor especificidade de 13 eo outro tem apenas 1, o título H1 é amarela, não azul.

E se duas regras acabam por ter a mesma especificidade? Nesse caso (assumindo que ambos estão em uma folha de estilo, ou de outra forma são os mesmos "proximidade" à tag HTML), a regra que foi especificado últimas vitórias.