Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de parágrafo. (<P>)
Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (Não há sentido em definir uma classe em um estilo inline!) A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo.
<STYLE TYPE="text/css"><!--
elemento.nomedaClasse {atrbuto:valor; ... }
--></STYLE>
Para dar um exemplo mais prático, veja uma classe de estilo muito utilizada por todos:
<STYLE TYPE="text/css"><!--
A.meuslinks {color: blue; text-decoration: none}
--></STYLE>
E nos links, apenas temos que adicionar o atributo CLASS="meuslinks" para que os mesmos fiquem fiquem azuis e não-sublinhados. Veja como deve ficar:
<A CLASS="meuslinks" HREF="http://www.supertrafego.com">
Utilizando a tag <DIV>
As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto abrangendo diversos parágrafos e outros elementos. Isso as torna uma boa opção para definir estilos que afetam grandes seções de um texto em uma página. Veja:
<STYLE TYPE="text/css"><!--
DIV.sidebar {font=family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in}
--></STYLE>
Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.
Utilizando a tag <SPAN>
As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de que você pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de <DIV>, contudo, que é utilizada para divisões de texto grandes, a tag <SPAN> é especializada para blocos de textos menores - que podem ser tão pequenos como um único caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag.
<STYLE TYPE="text/css"><!--
SPAN.hot {color:green; text-decoration: underline}
--></STYLE>
|
