Blog do Zé Andrade » style sheet http://www.zeandrade.com.br T.I. , Software Livre & Generalidades Sat, 25 Feb 2012 19:20:32 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 CSS Poderoso – Parte 1 http://www.zeandrade.com.br/2009/03/css-poderoso-parte-1/ http://www.zeandrade.com.br/2009/03/css-poderoso-parte-1/#comments Tue, 17 Mar 2009 13:11:15 +0000 admin http://an.drade.nom.br/?p=52 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>
]]> http://www.zeandrade.com.br/2009/03/css-poderoso-parte-1/feed/ 0