CSS Poderoso

· 2min · Zero Andrade

CSS - Cascading Style Sheets , ou em  português  Folhas de Estilo , é o recurso  utilizado para formatar as páginas HTML . Como se diz, é ele que faz a" perfumaria" das páginas. Como tudo na Internet, este recurso também está evoluindo. O CCS3 incorporará recursos interessantes, alguns inclusive já suportados por navegadores mais novos, como o Firefox 3.

Para conhecer muitos deste recursos indico o site www.css3.info

Um destes recursos , que acredito estar disponível na maioria dos navegadores atuais é o tratamento mais específico do contexto dos elementos.

Abaixo, um código exemplo  que faz o tratamento contextual de cada link. Ou seja, ao invés de inserir imagens e cores direto no corpo do documento  para diferentes tipos de link , o que se faz é criar padrões no CSS  que serão interpretados no contexto da página, criando o efeito visual desejado.

Veja aqui o resultado

Obs. Os ícones são do site www.famfamfam.com

<html> <head> <style> div{ font-family: sans-serif; color:#000; } a:link, a:visited{ text-decoration:none; color:#00c; } a[href]{ padding-left:18px; } a[href^="http://an.drade.nom.br"]:link,a[href^="http://an.drade.nom.br"]:visited { color:#369; background:transparent url('http://www.famfamfam.com/lab/icons/mini/icons/icon_home.gif') no-repeat center left; } a[href$=".pdf"]:link,a[href$=".pdf"]:visited { color:#f90; background:transparent url('http://www.famfamfam.com/lab/icons/mini/icons/file_acrobat.gif') no-repeat center left; } a[href$=".flv"]:link,a[href$=".flv"]:visited,a[href$=".wmv"]:link,a[href$=".wmv"]:visited { color:#396; background:transparent url('http://www.famfamfam.com/lab/icons/mini/icons/page_video.gif') no-repeat center left; } a[href]:hover{ color:#c00; text-decoration:underline;} </style> </head> <body> <div> <p> veja a constru&ccedil;&atilde;o destes links:</p> </a> <a href="http://an.drade.nom.br" />Link para Home</a><br /> <a href="http://dominioquenaoexiste/doc.pdf" />Link para Documento 1</a><br /> <a href="http://dominioquenaoexiste/doc.pdf" />Link para Documento 2</a><br /> <a href="http://dominioquenaoexiste/video.flv" />Link para video 1</a><br /> <a href="http://dominioquenaoexiste/video.wmv" />Link para video 2</a><br /> </div> </body> </html>