Google
 

Home | Próximo »
Color e Background-color
Você está estudando a propriedade color,
do item de menu Color e background-color.
A partir de agora aprenderemos como definir a cor de texto e fundo para os elementos de marcação (X)HTML.

Definido cores
Para definir a cor de um texto, utilizamos a propriedade color. A sintaxe para a definição da cor de texto para um elemento será:

p { color: #0000ff ; } O código a esquerda define que todo parágrafo terá a cor azul.

As cores podem ser definidas utilizando a notação hexadecimal, como mostrado acima, utilizando o nome da cor, ou rgb( red/green/blue). Veja abaixo os exemplos referentes a cor azul:

  • p{ color: blue ; }
  • p{ color: rgb( 0, 0, 255 ) ; }
  • p{ color: rgb( 0%, 0%, 100% ) ; }
  • p{ color: #0000ff ; }
  • p{ color: #00f ; }

rgb
Observe que em rgb você pode usar valores de 0 a 255 ou valores em percentagem de 0% a 100%. Utilize um ou outro, não misture os valores dentro da mesma regra.

hexadecimal
Os valores de cores em hexadecimal são precedidos pelo símbolo da tralha(#). Essses valores possuem seis caracteres, ou podem ser abreviados em três caracteres, conforme abaixo:

  • p { color: #0000ff ; }
  • p { color: #00f ; }

As duas regras estão corretas e funcionam perfeitamente, mas a codificação com seis dígitos lhe dará um controle melhor sobre a cor escolhida. Se você preferir utilizar o nome de uma cor mostrarei abaixo uma lista de 17 nomes de cores válidas:
No link a seguir você verá uma excelente tabela de cores para usar em suas páginas. Veja abaixo um exemplo para definição de cores de texto:

  • h1{ color: blue; }
  • p{ color: orange; font-size: 14px; }
  • em{ color: #006400; }

No exemplo abaixo você verá uma pequena estilização do usando as regras escritas acima. 
<!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>Trabalhando com cores</title>
         <style type="text/css" media="screen">			
            div{ background: silver;
                 width: 600px;
               }
			
            h1{ color: blue; }
			
            p{ color: maroon; 
               font-size: 18px;
			 }

            em{ color: #ff0000;
                font-weight: bold; }
		</style>
	</head>
      <body>
         <div>
             <h1>Estilizando texto com cores para a Web</h1>
             <p>Observe dentro deste pequeno documento que estamos utilizando estilos 
   incorporados , ou seja a estilização de nossa página está dentro do elemento 
   <sytle>...</style> que está dentro das tags <head>...</head>. Veja também neste 
   texto que há uma nova propriedade ( background ) que será nosso próximo assunto.</p>
          </div>	
	</body>
</html>
Veja o resultado deste documento neste link.

Observe dentro deste pequeno documento que estamos utilizando estilos incorporados , ou seja a estilização de nossa página está dentro do elemento <sytle>...</style> que está dentro das tags <head>...</head>. Veja também neste texto que há uma nova propriedade ( background-color ) que será nosso próximo assunto.
Gostou do site? Indique a seus amigos!
Home | Próximo »

Envie seu comentário:

Nome:     

E-mail:

Comentários:



banner Megaterremoto

Empregos Manager Online