quarta-feira, 16 de junho de 2010

O que é CSS?

Cascading Style Sheets

Cascading Style Sheets
Crystal Clear app stylesheet.png
Extensão do arquivo .css
MIME texto/css
Desenvolvido por W3C
Tipo de formato Folha de estilo
Variante de XML

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.

Resultado obtido no Acid2 satisfatoriamente.

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á é.

Índice

[esconder]

Exemplos

/* comentário em css, semelhante aos da linguagem c */

body

{

  font-family: Arial, Verdana, sans-serif;

  background-color: #FFF;

  margin: 5px 10px;

}

O código acima define fonte padrão Arial, caso não exista substitui por Verdana, caso não exista define qualquer fonte sans-serif. Define também a cor de fundo do corpo da página.

Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criação de conteúdo na web, e portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.

As especificações do CSS podem ser obtidas no site da W3C "World Wide Web Consortium", um consórcio de diversas empresas que buscam estabelecer padrões para a Internet.

É importante notar que nenhum browser suporta igualmente as definições do CSS. Desta forma, o webdesigner deve sempre testar suas folhas de estilo em browsers de vários fabricantes, e preferencialmente em mais de uma versão, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.

Exemplo de CSS aplicado em XML

Arquivo *.XML com ligação para uma folha de estilos em cascata:

O arquivo de exemplo XML renderizado no Mozilla Firefox.
  version="1.0" encoding="UTF-8"?>

 type="text/css" href="css.css"?>

>

  >Tuesday 20 June>

  >

    >6:00>

    >News>

    With Michael Smith and Fiona Tolstoy.

    Followed by Weather with Malcolm Stott.

  >

  >

    >6:30>

    >Regional news update>

    Local news for your area.

  >

  >

    >7:00>

    >Unlikely suspect>

    Whimsical romantic crime drama starring Janet

    Hawthorne and Percy Trumpp.

  >

>

O arquivo *.CSS que formata o XML anterior:

  @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

<html>

  <head>

     <title></title>



     <style type="text/css">

        #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>

  </head>

  <body onload="javascript: abrir()">



     <script language="javascript" type="text/javascript">

     function fechar(){

         document.getElementById('popup').style.display = 'none';

     }

     function abrir(){

         document.getElementById('popup').style.display = 'block';

         setTimeout ("fechar()", 3000);

     }

     </script>



     <div id="popup" class="popup">



        Esse é um exemplo de popup utilizando DIV. Dessa maneira esse

        pop-up não será bloqueado.







        <small><a href="javascript: fechar();">[X]</a></small>





     </div>



     <br /> <a href="javascript: abrir();">Abrir POPUP</a>

     <br /> <a href="javascript: fechar();">Fechar POPUP</a>



  </body>

</html>

Ver também

Publicada por Itamar firmino à(s) 11:16

0 comentários:

Enviar um comentário