Jump to content

[CSS] Tags Personalizadas


skin
 Share

Recommended Posts

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

Our lives begin to end the day we become silent about things that matter - Martin Luther King

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.