Como substituir estilos css3

Video: Estilos css: display block, inline, inline-block y float

Com estilos CSS3 herdadas vem a capacidade de substituir uma regra de estilo herdado. Por exemplo, dê uma olhada no seguinte código para obter uma idéia do que isso poderia significar:

Esta div tem apenas o estilo do corpo.
Este é um parágrafo normal com estilo de parágrafo
Este parágrafo é um membro de uma classe
Este parágrafo é um membro de uma classe e tem um ID, ambos com regras de estilo.

A questão é esta: que cor será o que cor elemento de exibição? É um membro do corpo, por isso deve ser vermelho. É também um parágrafo e parágrafos são verdes. É também membro do minha classe classe, por isso deve ser azul. Finalmente, é nomeado whatColor, e elementos com este ID deve ser roxo.

Quatro regras de cor aparentemente conflitantes são lançadas sobre esta pobre elemento. Qual a cor que será?

CSS tem um sistema de classificação clara para lidar com este tipo de situação. Em regras mais específicas trunfo regras gerais, mais gerais. Aqui está a precedência (do maior para o menor precedência):

Video: Curso de CSS3 - 06 - Estilos en Tablas - Filas y Celdas

1. preferência do usuário

   O usuário sempre tem a escolha final sobre o que estilos são usados. Os usuários não são obrigados a usar os estilos em tudo e sempre pode alterar a folha de estilo para a sua própria cópia local da página. Se um usuário precisa aplicar um estilo especial (por exemplo, alto contraste para pessoas com deficiência visual), ele deve sempre ter essa opção.

2. estilo local

   
   
   
   

   Um estilo local (definido com o estilo atributo no HTML) tem a maior precedência de estilos definidos pelo desenvolvedor. Ele anula quaisquer outros estilos.

3. identidade

   Um estilo ligados a um elemento identidade tem uma grande quantidade de peso, porque ele substitui quaisquer outros estilos definidos na folha de estilo.

4. Classe

   Estilos ligados a uma classe substituir o estilo de um elemento do objeto. Então, se você tem um parágrafo com uma cor verde que pertence a uma classe de cor azul, o elemento será azul, porque estilos de classe excedo estilos de elementos.

5. Elemento

   O estilo elemento tem precedência sobre qualquer um dos seus recipientes. Por exemplo, se um número está dentro de um div, o estilo de parágrafo tem o potencial para substituir tanto o div e o corpo.

6. elemento Container

   divs, tabelas, listas e outros elementos usados ​​como recipientes de passar seus estilos por diante. Se um elemento está dentro de um ou mais destes recipientes, pode herdar atributos de estilo a partir deles.

7. Corpo

   Nada definido no estilo de corpo é um padrão geral da página, mas ele vai ser substituído por quaisquer outros estilos.

No overRide.html exemplo, a identidade regra tem precedência, então o parágrafo é exibido em roxo.