[CSS] Tags Personalizadas

[skin]

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.portugal-a-programar.org">

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>

Fonte: Supertrafego