HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Prioridade

Quando criamos páginas em HTML devemos ter sempre em mente o fato de que elas podem ser apresentadas de forma diferente em navegadores distintos ou em máquinas diversas. Isso deve-se não só a diferenças nos sistemas mas também ao fato de existirem diversos tamanhos de monitores  e também que seus proprietários poderão redimensionar a janela do navegador para o tamanho que preferirem.
Existe também a possibilidade do proprietário da máquina configurar o modo como as páginas deverão ser exibidas. Se você usa o Internet Explorer, pode fazê-lo acionando a entrada “Opções da Internet” do menu “Ferramentas” e, na aba “Geral”, clicando no botão “Cores”, "Fontes" e  “Acessibilidade”. Em "Acessiblidade" o usuário poderá aplicar as suas preferências para visualizar páginas da web, inclusive formatar uma folha de estilos que terá prioridade sobre todas as outras definições de estilo.


O efeito cascata
Que estilo terá preferência quando um estilo é definido mais de uma vez para o mesmo elemento HTML? Qual das definições o navegador irá aplicar?

O efeito cascata determina a prioridade para aplicação da regra de estilo ao elemento conforme descrito a seguir e na ordem decrescente de prioridade:

  1. folha de estilo do usuário (prioridade mais elevada)
     
  2. folha de estilo do desenvolvedor
    2.1 - dentro de uma tag HTML (definidos através do atributo style nos elementos);
    2.2 - folha de estilo interna (definida na seção HEAD da própria página);
    2.3 - folha de estilo externa (importado ou linkado);
    2.4 - folha de estilo do navegador
     

 

Combinação de estilos
Um documento HTML pode definir ou utilizar mais do que uma folha de estilos. Quando isto ocorre o navegador combina as definições para aplicar ao documento.

Exemplos:

1 - Suponhamos que uma página esteja linkada a uma folha de estilos externa que define as seguintes propriedades para o seletor p:

p
{
color: red;
text-align: left;
font-size: 8pt
}

Porém existe uma folha de estilos interna na página com as seguintes propriedades também para o seletor p:

p
{
text-align: right;
font-size: 20pt
}

então, o navegador combina as duas definições, respeitando a prioridade para aplicação da regra de estilo, e o resultado para o seletor p será:

p
{
color: red;
text-align: right;
font-size: 20pt
}

Observe que para as propriedades text-align e font-size os valores correspondem a da folha de estilo interna (right e 20pt) pois de acordo com o efeito cascata esta tem prioridade sobre a folha de estilo externa.

2 - Supor o mesmo exemplo anterior, porém, além do estilo declarado para o seletor p nas folhas interna e externa, foi feita uma declaração de estilo dentro de uma tag p com o atributo STYLE da seguinte forma:
<p STYLE="text-align: center">a</p>.

Em particular, neste parágrafo o resultado será:

color: red;
text-align: center;
font-size: 20pt
pois de acordo com o efeito cascata, o estilo declarado dentro de uma tag HTML tem prioridade sobre os demais.

3 - se você aplicar um estilo definido em uma folha externa a um elemento de página que já esteja formatado com uma marca HTML padrão, ambas as características de formatação serão utilizadas, ou seja, se você selecionar um parágrafo que utiliza o estilo Título 1 (H1) e aplicar um estilo em uma folha externa, que adiciona uma borda vermelha, terá a formatação padrão de Título 1 (Times New Roman, negrito, 24pt, alinhado à esquerda) com uma borda vermelha em torno.