Aprenda mais sobre css

26/10/2010, 11:22

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Opera, Internet Explorer 7 e Mozilla Firefox tem suporte maior, inclusive até a CSS 3, ainda em desenvolvimento. A interpretação dos browsers pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é.

Exemplo de CSS aplicado em XML

Código:: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="css.css"?> <schedule> <date>Terça-Feira 26 de Outubro</date> <programme> <starts>6:00</starts> <title>HTA</title> Tudo para seu Habbo. </programme> <programme> <starts>6:30</starts> <title>Habbo Hotel</title> Hotel brasileiro </programme> <programme> <starts>7:00</starts> <title>Calvacante o maior gato do Brasil ;9</title> é verdade '-'. </programme> </schedule>

O arquivo *.CSS que formata o XML anterior:

Código:: @media screen { schedule { display: block; margin: 10px; width: 300px; } date { display: block; padding: 0.3em; font: bold x-large sans-serif; color: white; background-color: #C6C; } programme { display: block; font: normal medium sans-serif; } programme > * { /* All children of programme elements */ font-weight: bold; font-size: large; } title { font-style: italic; } }

CSS e JavaScript

Pop-up não-bloqueável

Código:: <html> <head> <title></title> <style type=[color=red]"text/css"[/color]> #popup { position: absolute; top: 30%; left: 30%; width: 300px; height: 150px; padding: 20px 20px 20px 20px; border-width: 2px; border-style: solid; background: #ffffa0; display: none; } </style> <script type=[color=red]"text/javascript"[/color]> window.onload = function abrir() { document.getElementById('popup').style.display = 'block'; setTimeout ("fechar()", 3000); } function fechar() { document.getElementById('popup').style.display = 'none'; } </script> </head> <body> <div id=[color=red]"popup"[/color] class=[color=red]"popup"[/color]> Esse é um exemplo de popup utilizando o elemento <code>div</code>. Dessa maneira esse pop-up não será bloqueado. <small><a href=[color=red]"javascript: fechar();"[/color]>[X]</a></small> </div> <br /><a href=[color=red]"javascript: abrir();"[/color]>Abrir pop-up</a> <br /><a href=[color=red]"javascript: fechar();"[/color]>Fechar pop-up</a> </body> </html>