!Default
sou nível 11Qua 23 maio 2012, 10:16 am | |
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.
Regras
H1 { color:red }
H1
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
A configuração do estilo é iniciada pela tag
<STYLE>
<!--
-->
h1
h2
h3
<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}
<P>
<P class="verm">
Para criar estilos que são utilizados somente quando combinados com outra tag, como por exemplo um texto em itálico (tag
<i>
<P>
p i{ color: magenta}
<i>
<P>
Utilize um arquivo de regras
<link rel="stylesheet" href="nomedoarquivo.css" type="text/css">
<head></head>