Google
 

Home | Próximo »
O efeito cascata
você está estudando o efeito cascata,
do item do menu o efeito cascata.
O efeito cascata:
As folhas de estilos em cascata podem ser definidas pelo usuário, pelo autor(Desenvolvedor) ou pelo agente de usuário.

Usuário:
O usuário pode ser capaz de especificar folhas de estilo a um determinado documento conforme suas necessidades e preferências.

Autor:
O autor especifica folhas de estilo para um documento e as disponibiliza incluídas no documento ou lincadas externamente.

Agente de usuário:
Devem aplicar uma folha de estilo padrão (fornecida pelo fabricante do software) capaz de satisfazer a apresentação do documento.

Você pode observar que quando você cria um documento XHTML e especifica uma marcação com a tag <em>...</em> por exemplo, o conteúdo entre essas tags ficará em itálico, isto está determinado dentro da folha de estilos padrão do seu navegador.

Suponha que o autor criou uma folha de estilos e especificou que os parágrafos terão a cor vermelha ( p { color: red; } ). O usuário especificou parágrafos na cor verde ( p{ color: green; } ) enquanto que o estilo padrão de cores para a tag <p>...</p> do seu navegador é preta. Então você pergunta: Qual dessas cores será aplicada? Ou seja qual delas têm maior precedência. Neste momento é que entra o efeito em cascata, que nada mais é do que uma ordem específica para resolver qual dos elementos terá o maior peso e será aplicado efetivamente ao documento.

Estilos conflitantes
As folhas de estilo podem ser definidas pelo usuário, pelo autor e pelo agente de usuário, por isso elas estão em cascata. Os estilos definidos pelos autores assumem precedência sobre os estilos definidos pelo usuário e os estilos definidos pelo usuário têm precedência sobre os estilos definidos pelo agente de usuário ( por exemplo: O seu navegador).

Veja abaixo um exemplo para entender melhor o conflito de estilos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Entendendo estilos conflitantes</title>
      <style type="text/css">
	
         h1{
            color: red;
         }
  
         ul{
            color: #21b120;
         }
  
         ul ul li{
            color: #ff8000;
         }

         li{
            color: green;
            font-weight: bolder;
            font-size: 20px;
         }
  
         a.especial{
            text-decoration: none;
            background-color: #b1b120;
         }
  
         a:hover{
            text-decoration: underline;
            color: #d82728;
            background-color: #ffcc00;
         }

         em{
            color: blue;			  
         }
         </style>
      </head>
   <body>

      <h1>Produtos de limpeza</h1>
		
         <ul>
            <li>Detergente</li>
            <li>Candida</li>
            <li>Sabão em pó</li>
            <li>Perfumes para detergentes
               <ul>		    		
                  <li>Detergente de <em>limão</em></li>
                  <li>Detergente de morango</li>
                  <li>Detergente de côco</li>
               </ul>
            </li>
         </ul>

      </body>
</html>
Veja este exemplo no seu navegador.

Neste exemplo nós podemos ter contato com algo novo a herança. Isto é, alguns valores são herdados pelos filhos de um elemento. No nosso exemplo o elemento filho em herdou a propriedade font-size do elemento pai. Porém o elemento filho em possui a propriedade color que está em conflito (tem um valor diferente) com a propriedade color do elemento pai.

Veja o trecho de código abaixo:
<li>Detergente de <em>limão</em></li>

Como não especificamos um tamanho de fonte para em e por estar contido no elemento li ele herda o tamanho da fonte do elemento li.

Gostou do site? Indique a seus amigos!
Home | Próximo »

Envie seu comentário:

Nome:     

E-mail:

Comentários:


  • Apoiam o Site