Google
 

Home | Próximo »
A propriedade text-indent
Você está estudando a propriedade text-indent,
do item de menu A propriedade text.
text-indent
A propriedade text-indent especifica um recuo para a primeira linha do texto em um elemento. Os valores possíveis para text-indent são:
O valor length especifica uma medida de comprimento como um valor fixo. O valor em porcentagem é uma medida que depende da largura do elemento pai. Veja o exemplo abaixo:

p.edentarpositivo{ text-indent: 30px; }
p.edentarnegativo{ text-indent: -30px; }

As duas regras acima serão aplicadas no código html apresentado abaixo. Veja que as regras css foram aplicadas com o método incorporado para facilitar o entendimento. 

<!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>Propriedade text-indent</title>
      <style type="text/css" media="screen">			
         p{
            border-left: 1px solid #000000;
         }
	
         p.edentarpositivo{
            text-indent: 30px;
            border-left: 1px solid #000000;
         }

         p.edentarnegativo{
            text-indent: -30px;
            border-left: 1px solid #000000;
         }

         #box{
            background-color: #c1c1c1;
            width: 400px;
            padding: 50px;
         }
	
      </style>
   </head>
      <body>
         <div id="box">

            <p>Este é um parégrafo simples sem nenhuma edentação</p>
            
            <p class="edentarpositivo">
               Este é um parágrafo com edentação positiva de 15px, ou seja a primeira 
               linha do parágrafo ficará deslocado 15px para a direita.
            </p>	

            <p class="edentarnegativo">
               Este é um parágrafo com edentação negativa 
               de -15px, o texto deste parágrafo ficará deslocado -15px
               para a esquerda.
            </p>	
				
         </div> 
      </body<
</html>

Veja como ficará nosso exemplo.

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

Envie seu comentário:

Nome:     

E-mail:

Comentários:


Empregos Manager Online

banner GlobalBiz

  • Apoiam o Site