CSS – Folhas de estilo em cascata


Uma das maiores dificuldades na criação de uma página é a configuração do layout. Definir a todo momento a cor ou o tamanho de uma fonte deixa o código HTML extenso, aumenta a possibilidade de erros e além de tudo é muito cansativo.

Neste tuto você aprenderá a trabalhar com CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata). Com o CSS é possível ligar estilos aos comandos HTML. Dessa forma seu código fica muito menor e você ainda pode definir o estilo de um site inteiro com um único arquivo.

Regras

O CSS configura os estilos através de regras. Ele define as tags e as declarações. Na declaração são configuradas as propriedades (cor, fonte, tamanho) e o valor (azul, preto, verde). Por exemplo, o comando

  H1 { color:red }  

, define que a tag

  H1  

será sempre exibida na cor vermelha.

Qualquer navegador da geração 4 suporta o CSS. Nas versões anteriores o texto é exibido normalmente, porém sem nenhuma formatação de estilo. Confira nos quadros a seguir como usar alguns dos estilos oferecidos pelo CSS:

Página com estilo

   <HTML><HEAD>
<TITLE>exemplo de CSS</TITLE>
<STYLE type="text/css">
<!--
h1 {color:red}
h2,h3 {font-style:italic;
        text-align:center;
        background:yellow
        }
p {color:blue;font-size:40}
-->
</STYLE></HEAD>
<BODY>
<h1>Exemplo 2</h1>
<h2>Com o CSS criar</h2>
<h3>estilos é muito</h3>
<p>fácil!</p>
</BODY></HTML>
   

A configuração do estilo é iniciada pela tag

   <STYLE>   

. As tags

   <!--   

e

   -->   

são utilizadas para que os comandos das regras não sejam exibidos na tela dos navegadores não compatíveis com CSS. No exemplo acima foram criadas três regras. Na primeira, definimos que o título

   h1   

é vermelho. Depois, que as tags

   h2   

e

   h3   

são em itálico, centralizadas e com a cor de fundo amarela. Na terceira regra foi configurada a cor azul e o tamanho 40 para a tag

   <P>   

.

Quando o navegador interpreta as tags que foram definidas nas regras, os estilos são aplicados automaticamente.

Defina as declarações com classe

No CSS você pode definir classes para as regras. Assim, mais de uma opção de estilo pode ser criada para uma mesma tag. Copie o código em destaque e salve-o como um arquivo HTML para poder visualizar.

   <HTML><HEAD>
<TITLE>exemplo de CSS</TITLE>
<STYLE type="text/css">
<!--
p.verm {color:red}
p.verde {color:green}
p.azul {color:blue}
p i {color:magenta}
p i.verm {color:red}
-->
</STYLE></HEAD>
<BODY>
<i>Exemplo 2</i>
<p>Crie</p>
<p class="verm">classes</p>
<p class="verde">nas <b>regras</b></p>
<p class="azul">do <i class="verm">CSS</i> e controle <i>seu site</i></p>
</BODY></HTML>
   

Veja como foram criadas as regras das classes no código acima. Por exemplo, com a regra

   p.verm { color: red}   

definimos a classe “verm” para a tag

   <P>   

que tem cor vermelha. Depois o comando

   <P class="verm">   

foi utilizado para exibir o texto com esse estilo. Você pode criar quantas classes quiser, com o nome que desejar.

Para criar estilos que são utilizados somente quando combinados com outra tag, como por exemplo um texto em itálico (tag

   <i>   

) dentro de um parágrafo (tag

   <P>   

), a regra é definida da seguinte forma:

   p i{ color: magenta}   

. Com isso a cor magenta só é aplicada se a tag

   <i>   

estiver dentro da tag

   <P>   

. Se ela estiver fora, o estilo simplesmente não é aplicado.

Utilize um arquivo de regras

Você pode criar um arquivo de regras CSS para as páginas do seu site. Assim os estilos de todos os arquivos HTML ficam padronizados. Além disso são poupadas várias linhas de comando e, ao alterar as regras desse arquivo, as configurações das páginas mudam automaticamente, sem a necessidade de se editar uma a uma. Para ler os estilos de um arquivo de regras (.css) em uma página, a tag

   <link rel="stylesheet" href="nomedoarquivo.css" type="text/css">   

é inserida no cabeçalho (

   <head></head>   

) da sua página. Depois os comandos HTML são inseridos normalmente.

Até mais galera.

Publicado em 18 de dezembro de 2008, em CSS e marcado como . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: