1. Cascading Style Sheets (ou simplesmente CSS) uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em uma linguagem de marcao, como HTML ou XML. Seu principal benefcio prover a separao entre o formato e o contedo de um documento. Em vez de colocar a formatao dentro do documento, o desenvolvedor cria um link (ligao) para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quiser alterar a aparncia do portal basta portanto modificar apenas um arquivo. Com a variao de atualizaes dos navegadores (browsers) como Internet Explorer que ficou sem nova verso 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 Google Chrome e Mozilla Firefox tem suporte maior, inclusive at a CSS3, ainda em desenvolvimento. A interpretao dos navegadores pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quo eficiente o suporte de CSS, fazendo com que a nova verso em desenvolvimento do Firefox seja totalmente compatvel a ele assim como o Opera j . O Doctype informado ou a ausncia dele determina o quirks mode ou o strict mode modificando o modo como o CSS interpretado e a pgina desenhada. ********************************************************************* 1. Sintaxe CSS tem uma sintaxe simples e utiliza uma srie de palavras em ingls para especificar os nomes de diferentes estilos de propriedade de uma pgina. Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de um ou mais seletores e um bloco de declarao. Uma declarao de bloco composta por uma lista de declaraes entre chaves. Cada declarao em si uma propriedade, dois pontos (:), um valor, ento um ponto e vrgula (;). Em CSS, seletores so usados para declarar a quais elementos de marcao um estilo se aplica, uma espcie de expresso correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo especfico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles so colocados em relao uns aos outros no cdigo de marcao, ou como eles esto aninhados dentro do objeto de documento modelo. Pseudo-classe outra forma de especificao usada em CSS para identificar os elementos de marcao, e, em alguns casos, aes especficas de usurio para o qual um bloco de declarao especial se aplica. Um exemplo freqentemente utilizada o :hover pseudo-classe que se aplica um estilo apenas quando o usurio 'aponta para' o elemento visvel, normalmente, mantendo o cursor do mouse sobre ele. Isto anexado a um seletor como em a:hover ou #elementid:hover. Outras pseudo-classes e pseudo-elementos so, por exemplo, :first-line, :visited or :before. Uma pseudo-classe especial :lang(c), "c". Uma pseudo-classe seleciona elementos inteiros, tais como :link ou :visited, considerando que um pseudo-elemento faz uma seleo que pode ser constituda por elementos parciais, tais como :first-line ou :first-letter. Seletores podem ser combinados de outras formas tambm, especialmente em CSS 2.1, para alcanar uma maior especificidade e flexibilidade. Aqui est um exemplo que resume as regras acima: selector [, selector2, ...][:pseudo-class] { 2. property: value; [property2: value2; ...] } /* comment */ ******************************************************************* 2. Seletores Definio de estilo um conjunto de propriedades visuais para um elemento, o CSS define regras que fazem as definies de estilo casarem com um elemento ou grupo de elemento, o documento pode conter um bloco de css em um elemento style ou usando o element link apontando para um arquivo externo que contenha o bloco CSS. Para uso com o CSS foi criado o atributo class que todo elemento pode conter. As regras de casamento para o css so chamadas de seletores, uma definio de estilo pode ser casada com um seletor ou um grupo de seletores separados por vrgula, um seletor pode casar um elemento por: *elemento do tipo : element_name { style definition; } *elemento do tipo com a classe : element_name.class_name { style definition; } *todos os elementos com a classe : .class_name { style definition; } *o elemento com com o id : #id_of_element { style definition; } *casamento de um grupo : element_name_01, element_name_02, .class_name { style definition; Ex: p {text-align: right; color: #BA2;} p.minhaclasse01 { color:#ABC; } .minhaclasse02 { color:#CAD; } #iddomeuelemento { color:#ACD; } p.minhaclasse03 .minhaclasse04 { color:#ACD; } ************************************************************************ 3. Exemplos /* comentrio em css, semelhante aos da linguagem c */ body { font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; } O cdigo acima define fonte padro Arial, caso no exista substitui por Verdana, caso no exista define qualquer fonte sans-serif. Define tambm a cor de fundo do corpo da pgina. Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criao de contedo na web, e portanto havia uma mistura de formatao e contedo textual dentro do cdigo de uma mesma pgina. Contudo, na criao de um grande portal, fica quase impossvel manter uma identidade visual, bem como a produtividade do desenvolvedor. nesse ponto que entra o CSS. As especificaes do CSS podem ser obtidas no site da W3C "World Wide Web Consortium", um consrcio de diversas empresas que buscam estabelecer padres para a Internet. importante notar que nenhum navegador suporta igualmente as definies do CSS. Desta forma, o web designer deve sempre testar suas folhas de estilo em navegadores de vrios fabricantes, e preferencialmente em mais de uma verso, para 3. se certificar de que o que foi codificado realmente seja apresentado da forma desejada. 3.1. Exemplo de CSS aplicado em XML Arquivo *.XML com ligao para uma folha de estilos em cascata: 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; } } 3.2. CSS e JavaScript Pop-up no-bloquevel #popup { 4. 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; } function abrir() { document.getElementById('popup').style.display = 'block'; setTimeout ("fechar()", 3000); } function fechar() { document.getElementById('popup').style.display = 'none'; } Esse um exemplo de popup utilizando o elemento div. Dessa maneira esse pop-up no ser bloqueado. [X] Abrir pop-up Fechar pop-up