Construindo Sites com Padres Web A primeira etapa na criao de um documento com os padres Web a sua correta estruturao,

, isto , como foi construdo o cdigo HTML. A segunda etapa o uso apropriado do CSS para formatar o documento de modo que o mesmo receba o layout intencionado sem precisar mudar a sua estruturao. O que CSS? O CSS, ou Cascading Style Sheets, uma especificao que define um mecanismo simples para a adio de estilos (ou seja, elementos de apresentao visual como fontes, cores e espaamento) a um documento. A especificao inicial, chamada CSS1, tornou-se uma recomendao do W3C no final de 1996 e define praticamente todos estilos de apresentao utilizados hoje em dia. A segunda verso da especificao, chamada CSS2, foi aprovada em 1998 e acrescentou vrios estilos novos, principalmente na rea de posicionamento e tabelas. CSS3 a mais nova verso das famosas Cascading Style Sheets. A principal funo do CSS3 abolir as imagens de plano de fundo, bordas arredondadas, apresentar transies e efeitos para criar animaes de vrios tipos, como um simples relgio de ponteiros. Isso se deve aos novos browsers que esto chegando, com suporte essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Apple Safari e Mozilla Firefox. Assim, o CSS3 facilitar o trabalho dos que trabalham com web e tambm dos usurios, pela variedade de transformaes na apresentao de um website. O suporte a CSS nos navegadores em uso atualmente est razoavelmente solidificado. A maioria dos navegadores visuais suporta a especificao CSS1 completa. A especificao CSS2, entretanto, suportada em uma escala bem menor. Navegadores de ponta, como o Mozilla e Opera, possuem um suporte quase completo, mas navegadores que no recebem atualizaes h um bom tempo, como o Internet Explorer, ainda apresentam muitos problemas e, em alguns casos, uma completa falta de suporte para determinadas partes da especificao. Apesar disso, possvel fazer uso da maior parte da especificao sem muitos inconvenientes aceitando uma certa degradao na apresentao em navegadores com menor suporte. E, como sites recentes demonstram, o que se pode usar da especificao mais do que suficiente para criar sites que so bem estruturados e possuem uma excelente apresentao visual. O maior problema, realmente, so os defeitos de implementao que exigem um maior esforo para contornar os famosos hacks. Usando CSS O bsico Como mencionado acima, o CSS uma especificao simples e os conceitos bsicos podem ser entendidos rapidamente. Um grupo de estilos CSS normalmente referido como a folha de estilos de um documento, estejam estes contidos no prprio documento ou em um arquivo parte. O bloco bsico de uma folha de estilo a regra. Uma regra define como um ou mais estilos so aplicados a um determinado elemento ou conjunto de elementos e composta por duas partes: o seletor e um grupo de declaraes. O seletor indica a quais elementos a regra se aplica e as declaraes indicam quais so os estilos a serem aplicados. Uma declarao, por sua vez, tambm composta por duas partes: uma propriedade e um valor. A propriedade indica qual estilo individual est sendo modificado do seu valor padro e o valor, obviamente, indica qual novo valor ser aplicado. O modelo de blocos Um outro conceito importante tambm para entender como CSS funciona o modelo de blocos (box model). O CSS usa um modelo simples de formatao orientado a blocos que especifica que cada elemento formatado resulta em um ou mais blocos (ou caixas) retangulares. Alm disso, esse modelo tambm especifica que todos esses blocos possuem trs outros blocos circundantes que so, respectivamente, margem (margin), borda (border) e preenchimento (padding). Obs.: Margin determina a distncia de um elemento para outro, por exemplo, a distncia entre uma coluna e outra. Padding d um espao entre o contedo deste elemento para as bordas. A figura abaixo mostra, de uma maneira simplificada, um bloco e suas reas circundantes. Obviamente, as reas esto exageradas para fins de exibio.

Cada uma dessas reas possui regras especficas que devem ser entendidas para uma boa utilizao das mesmas. Um exemplo dessas diferenas relativo cor ou imagem de fundo de um elemento. Por exemplo, a rea de preenchimento de um objeto usa a mesma propriedade do elemento. A borda, entretanto, quando existe, usa as propriedades especficas dadas para a mesma. Por fim, as margens sempre so transparentes de modo que a cor ou imagem de fundo do elemento pai aparecem na mesma.

Em relao ao modelo de blocos, existem basicamente dois tipos de elementos: elemento do tipo bloco (block-level elements) e elementos em linha (inline elements). Essa distino muito importante na hora de aplicar os estilos de um elemento e entender como as reas circundantes de cada elemento funcionam. Os elementos do tipo bloco, como o nome indica, formam um bloco completo que assume a largura mximo do elemento que os contm e a altura do seu prprio contedo. Esses elementos "empilham" no fluxo do documento comeando um novo bloco imediatamente aps o elemento anterior. Por exemplo, um elemento p, que um elemento de bloco, localizado na raiz do documento, assume a largura total do documento que, no caso, a largura da prpria janela do navegador. Um elemento p seguinte "empilharia" novamente no fluxo, comeando um outro bloco com a largura do documento. Os elementos em linha, por outro lado, aparecem dentro do prprio contedo do elemento pai que os contm. Um elemento em, por exemplo, que especifica nfase, aparece no meio do contedo de seu elemento pai (um elemento p, por exemplo). Ao contrrio dos elementos de bloco, eles no "empilham" no fluxo do documento e acompanham qualquer contedo em que estejam inseridos. Como voc pode observar no pargrafo anterior, a primeira ocorrncia da palavra em no mesmo circundada por um elemento code, indicando que ela parte do cdigo de alguma linguagem. Como o elemento em linha, o contedo do mesmo acompanha o contedo do elemento pai, sem quebrar o fluxo geral do mesmo. Por outro lado, os cabealhos da sees deste documento so elementos do tipo bloco e, consequentemente, formam blocos completos, separados tanto do contedo dos elementos anteriores como dos posteriores. A figura abaixo ilustra isso de uma maneira melhor.

Existem outros tipos de elementos que na verdade so variaes ou casos particulares do tipos acima. Por exemplo, elementos do tipo lista (list-item elements) so elementos que acrescentam um marcador automtico no incio do contedo. Existem tambm elementos flutuantes (float elements) que saem do fluxo geral do fluxo geral do documento e "empurram" o contedo do elemento que os contm em uma determinada direo. Tambm existem elementos cujo contedo substitudo (replacedcontent elements), como o caso do elemento img, cujo contedo , na verdade, a imagem para qual ele aponta. Todos esses tipos citados funcionam na prtica como elementos do tipo bloco. Formas de se utilizar os seletores: Como vimos, a forma mais simples de seletor aquela que especifica apenas um elemento. Por exemplo: h1 { ... } Elementos podem ser tambm agrupados na regra. Por exemplo: h1, h2, h3 { ... } A regra acima, por exemplo, indica que todos elementos h1, h2 e h3 possuem as propriedades especificadas no bloco de declaraes seguinte. Relaes entre os elementos tambm podem ser especificadas. Por exemplo: h1 h2 { ... } indica que as declaraes se aplicam a todos elementos h2 que so descendentes de qualquer elemento h1. h1 > h2 { ... } indica que as declaraes de aplicam a todos elementos h2 que so filhos de qualquer elemento h1. h1 + h2 { ... } indica que as declaraes se aplicam a todos elementos h2 que seguem imediatamente um elemento h1. Note a diferena entre descendente e filho: o primeiro um elemento que aparece em qualquer posio hierrquica dentro de outro elemento; o segundo aparece na posio hierrquica imediatamente abaixo de seu pai. Uma outra forma se criar um seletor usar, como mencionado acima, o atributo class de um elemento. Por exemplo: .footer { ... } indica que as declaraes se aplicam a qualquer elemento cujo atributo class seja footer. div.footer { ... } restringe as declaraes a qualquer elemento div cujo atributo class seja footer. O atributo class de um elemento qualquer pode especificar mltiplas classes. O atributo id, como tambm foi mencionado acima, tambm pode ser usado para criar um seletor. Por exemplo: #footer { ... } div#footer { ... } As mesmas regras para o atributo class se aplicam aqui com as seguintes excees: um elemento s pode ter um nico atributo id e o atributo id deve ser nico no documento. Finalmente, seletores podem ser especificados por meio de pseudo-classes. Esses pseudo-classes recebem esse nome por simularem partes ou eventos especficos para um elemento. Por exemplo: a:hover { ... } p:first-line { ... }

Na primeira linha, as declaraes sero aplicadas a qualquer elemento a quando o mouse estiver sobre o mesmo. Na segunda linha, as declaraes sero aplicadas primeira linha de qualquer elemento p. As demais linhas no recebero os estilos especificados. Os seletores podem ser combinados de qualquer forma necessria. Por exemplo: body > ul.links li#root:hover { ... } No exemplo acima, as declaraes seriam aplicadas a qualquer elemento li no estado hover (ou seja, com o mouse em cima do mesmo) cujo atributo id fosse root e que descendesse de um elemento ul cujo atributo class fosse links e que fosse, por sua vez, um filho de um elemento body. Como voc pode ver, a regra complexa e mostra que o CSS realmente muito poderoso. Identificar e criar essas regras pode ser uma tarefa complexa. Uma ferramenta muito til para qualquer desenvolvedor CSS o Selectoracle, que explica qualquer regra CSS em uma linguagem acessvel (o idioma pode ser ingls ou espanhol). A especificao CSS possui ainda maneiras de formar outros tipos de seletores, usando, por exemplo, qualquer outro atributo de um elemento ou sua posio na cadeia hierrquica. Esses seletores ainda no so suportados por todos navegadores, mas podem ser entendidos e aprendidos na especificao.

Aplicando o CSS ao elemento

Um estilo CSS pode ser aplicado a um elemento de vrias maneiras. O interpretador CSS de um renderizador qualquer ir descobrir todas as regras que se aplicam a um determinado documento e aplic-las ao mesmo para gerar a sua apresentao final. Esse estilo geralmente chamado de estilo computado do elemento. Estilos que aparecem em seletores que se referem aos elementos so automaticamente associados ao elemento em questo de acordo com as regras de precedncia. Por outro lado, a aplicao de estilos cujos seletores especificam atributos class ou id, dependem, obviamente do uso desses atributos. Por exemplo: <div id="p255" class="post first">...</div> No exemplo acima, se algum seletor para o atributo id #p255 ou algum seletor para os atributos class .post ou .first existir, os estilos correspondentes sero aplicados ao elemento na sua ordem de precedncia. Uma questo que se levanta aqui como o CSS consegue eliminar ambigidades entre dois seletores que se aplicam a um determinado elemento. Considere as regras CSS abaixo: h2 { color: blue; } h2.date { color: green; } Considere tambm o seguinte fragmento de cdigo XHTML: <h2 class="date">...</h2> Dadas as regras anteriores, qual ser a cor aplicada ao contedo do elemento? Azul ou verde? Para resolver esse tipo de problema, a especificao determina uma mecanismo de resoluo de conflitos chamado de especificidade. Esse mecanismo diz que regras mais especficas tem maior prioridade, ou seja, quanto mais detalhada a regra, maior a sua prioridade. No caso acima, o contedo do elemento seria verde j que a segunda regra mais especfica que a primeira, por indicar um atributo class. A especificao fornece algumas regras simples para determinar a especificidade de uma regra qualquer simulando um sistema de numerao com uma grande base. Assim, para determinar qual o estilo final de um elemento, encontre primeiro todas as regras que o afetam. Calcule ento a especificidade de cada uma delas e aplique todas da menor para a maior especificidade. Para calcular a especificidade, faa o seguinte: 1. Conte o nmero de atributos id no seletor e chame esse valor de a. 2. Conte o nmero de atributos class no seletor e chame esse valor de b. 3. Conte o nmero de tags no seletor e chame esse valor de c. 4. Concatene os trs nmeros na forma abc e considere esse nmero a especificidade. Por exemplo (diretamente da especificao): li {...} /* a=0 b=0 c=1 -> especificidade = 1 */ ul li {...} /* a=0 b=0 c=2 -> especificidade = 2 */ ul ol li {...} /* a=0 b=0 c=3 -> especificidade = 3 */ li.red {...} /* a=0 b=1 c=1 -> especificidade = 11 */ ul ol li.red {...} /* a=0 b=1 c=3 -> especificidade = 13 */ #x34y {...} /* a=1 b=0 c=0 -> especificidade = 100 */ Pseudo-classes so contados como classes normais. Como mencionado anteriormente, todo elemento HTML ou XHTML possui um conjunto padro de propriedades que sero aplicadas caso no haja nenhuma sobreposio por uma regra CSS. Por exemplo, na maioria dos navegadores, o elemento em aparece em itlico, ou seja, a sua propriedade CSS font-style automaticamente colocada como italic. Esse outro fator que deve ser tambm considerado ao determinar o estilo de um elemento qualquer e vale especialmente para margens, bordas e preenchimentos.

Todo elemento tambm possui um atributo style, onde propriedades podem ser aplicadas diretamente. Essas propriedades possuem precedncia sobre quaisquer regras anteriormente determinadas para o elemento. Por exemplo: <p style="color: blue">...</p> No exemplo acima, a cor do texto no pargrafo seria azul, indecentemente de quaisquer outras regras declaradas anteriormente. Um ltimo fator a considerar aqui a herana. Algumas propriedades passam os seus valores adiante por meio de herana para os elementos que esto debaixo do elemento para o qual a regra se aplica. Por exemplo, se voc especifica o tipo de fonte do elemento body por meio da propriedade font-family, todos os elementos contidos no mesmo tero o mesmo tipo de fonte, barrando, claro, problemas de implementao -- o IE, por exemplo, no respeita exatamente a herana no caso de tabelas. Se uma propriedade propaga-se ou no pode ser mais ou menos determinado por meio do que ela faz. A propagao tambm pode acontecer pelo valor computado, no caso de algumas propriedades. Mais detalhes sobre o assunto podem ser encontrados parte relativa da especificao.

Anexando uma folha de estilo ao documento

Existem duas maneiras de aplicar uma folha de estilo a um documento: folhas de estilo internas, onde o CSS includo no topo da pgina, e folhas de estilo externas, onde o CSS includo por meio de um arquivo externo. As folhas de estilo externas so geralmente melhores pois permitem que as regras sejam reutilizadas em mltiplos documentos, alm de poderem usar o mecanismo de cache dos navegadores, reduzindo o tempo de download e o uso de banda de um site. Um folha de estilo interna declarada na seo head de um documento, como mostrado no exemplo abaixo: ... <head> <style type="text/css"> p { color: blue; } p.note { font-weight: bold; } </style> ... O atributo type serve para indicar a linguagem usada e existe para o caso da inveno futura de uma outra linguagem de estilos que no o CSS. (De fato, o Netscape 4 usava uma estranha linguagem de estilos baseada em JavaScript e nesse caso o atributo era colocado como "text/javascript".) Uma folha de estilo externa declarada atravs de um elemento especial, link, e aponta para um arquivo cuja extenso geralmente .css. Embora essa extenso no seja obrigatria, de praxe us-la e a maioria dos navegadores est configurada para reconhec-la como CSS. De qualquer forma, o arquivo deve ser servido como o Content-Type configurado para text/css. A maioria dos servidores Web est configurada para fazer isso automaticamente. Um exemplo do elemento link pode ser vista abaixo: <link rel="stylesheet" href="file.css" type="text/css" /> Tanto no caso do elemento style como do elemento link, um atributo media pode ser acrescentado indicando para qual tipo de mdia o CSS vlido. Exemplo so screen (monitor), print (impresso), aural (voz) e braille. Esse atributo limita a aplicao da folha de estilo mdia especfica.

Contornando problemas de implementao

Infelizmente, como j mencionamos, existem muitos problemas de implementao CSS nos navegadores. Esses problemas acabam causando muitas dificuldades em aplicar determinados estilos aos elementos e complicam a vida do desenvolvedor. Alguns exemplos desses problemas so: o Internet Explorer 5 implementa um modelo de blocos incorreto, incluindo as reas de preenchimento e de borda na largura de um elemento; o mesmo navegador implementa uma propagao incorreta da herana de alguns propriedades impedindo um bom uso dessas propriedades; nem todos os nevegadores implementam todos os seletores CSS2 mesmo quando suportam a maioria das especificaes (o Opera 6 e Internet Explorer so exemplos disso); etc. Alm desses problemas de renderizao, alguns navegadores tambm falham em reconhecer alguns tipos corretos de declaraes CSS. Esse problema, na verdade, converteu-se em uma certa beno para os desenvolvedores, permitindo a criao de certas gambiarras que foram alguns navegadores a ser comportarem de maneira especfica. Essas gambiarras, conhecidas como CSS hacks ou filters afetam praticamente qualquer navegador e costumam ser bem especficas. Existem dezenas desses hacks e uma boa maneira de compreend-los visitar uma lista dos mesmos e estudar os exemplos. Dependendo do tipo de funcionalidade que o seu site implementa em CSS, voc ser obrigado a usar alguns dos mesmos para contornar as dificuldades surgidas. Obviamente, medida que os navegadores evoluem, os problemas so corrigidos e as implementaes devem ser testadas novamente. Alm disso, novas implementaes geralmente trazem novos problemas e estes tambm devem ser incorporados.

Propriedade padding
As margens internas (padding) so definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades padding-top, padding-bottom, padding-right e padding-left. Sintaxe: padding-top: comprimento | porcentagem % padding-bottom: comprimento | porcentagem % padding-right: comprimento | porcentagem % padding-left: comprimento | porcentagem %

Propriedade margin
Define um valor para espessura das margens dos elementos HTML. As propriedades para margens so as listadas abaixo: * margin-top..........define a margem superior; * margin-right........define a margem direita; * margin-bottom.......define a margem inferior; * margin-left.........define a margem esquerda; * margin..............maneira abreviada para todas as margens