Noções básicas de herança de estilo css3

o cascata

parte de Cascading Style Sheet (CSS3) diz tudo. Um estilo na parte mais superior da hierarquia página disporá descendentemente em cascata para as partes mais baixas da página. Ao definir um estilo no nível certo da hierarquia, você reduz o trabalho necessário para implementar esse estilo em todos os lugares que é necessário o estilo.

Por exemplo, um estilo que é definido com o tag irá fluir para dentro do

tag que é filho do
tag. Se você definiu o estilo no
nível, você precisa defini-lo para cada
que requer o estilo. Definindo-o no
nível, você emprega um atalho na forma de um estilo em cascata.

O uso de uma arquitetura em cascata significa que você definir estilos que afetam a página como um todo em um nível mais elevado do que os estilos específicos usados ​​para definir elementos particulares.

Por exemplo, se sua página baseia-se principalmente em uma única fonte, em seguida, você deve definir essa fonte no tag. Mesmo que o Document Object Model (DOM) hierarquia começa com o documento, se move em direção à raiz (o tag), e só então se divide na e etiquetas, a tag é o primeiro elemento visualizável.

Herança também vem de outra forma. Você pode definir estilos em três lugares diferentes. A localização dessa definição modifica a prioridade desse estilo. Aqui estão os três locais de estilo e suas prioridades:

Video: Universidade XTI - CSS - 09 - Efeito Cascata e Herança

  • Inline (prioridade): A estilo em linha aparece especificamente com um objeto em particular. Ele modifica apenas esse objeto e nenhum outro objeto no documento ou em qualquer outro documento. Localizando e alterando um estilo inline é demorado e propenso a erros, então você deve evitá-los sempre que possível.

    Video: Aula 01 - Curso CSS3 - Iniciando - Estilo inline

  • Interno: A estilo interna aparece como parte do



    Usando estilos internos pode ajudar a fornecer um toque especial especial para uma página específica, mas você deve usar um estilo interno somente quando o estilo é único para essa página, e você nunca pretende usar esse estilo em qualquer outro lugar. Dado que você normalmente não pode fazer uma tal garantia, é melhor evitar estilos internos, sempre que possível, mas mesmo assim, eles são preferíveis para inline estilos.

  • Externa (baixa prioridade): Um estilo externo aparece em um arquivo .css externo. Você deve criar uma referência a este arquivo usando um tag na de um documento. Os estilos afetam cada documento vinculado ao arquivo .css.

    Usando essa abordagem faz atualizações mais fácil e dá o seu site uma aparência uniforme em geral. Além disso, o uso de estilos externos torna mais fácil para as pessoas com necessidades especiais para fornecer uma folha de estilo alternativa que melhor atenda às suas necessidades.

    Você pode associar o maior número de folhas de estilo externo, conforme necessário com uma página usando múltiplos Tag. Esta abordagem permite que você use estilos de diversas fontes de modo que você pode formatar sua página com o mínimo de esforço.

    folhas de estilo externas são processados ​​na ordem em que aparecem. Se dois arquivos .css conter o mesmo nome do estilo que modificam as mesmas propriedades, o estilo processada por último é o estilo que tem precedência.

O nível final de herança a considerar é o seletor de si. Você pode criar seletores que atuam apenas em objetos contidos em outros objetos ou que atendam a critérios especiais. Um seletor específico irá sempre substituem as configurações fornecidas por um seletor genérico, assim você só deve usar esta técnica quando necessário (imagine tentando encontrar todas essas mudanças específicas em todos os arquivos no seu site).

Quanto mais específico o seletor, maior será a sua prioridade se torna. No entanto, é preciso considerar os efeitos do nível do selector dentro do documento - e da maneira em que o estilo é definido - como parte do quadro geral.


Publicações relacionadas