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.
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çã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>Tagged: css, style sheet, webdesign