desenvolva aplicaes web profissionais com uso dos poderosos recursos de estilizao das css3

CSS3
Maurcio Samy Silva

Novatec

Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. proibida a reproduo desta obra, mesmo parcial, por qualquer processo, sem prvia autorizao, por escrito, do autor e da Editora. Editor: Rubens Prates Reviso gramatical: Marta Almeida de S Editorao eletrnica: Carolina Kuwabata Capa: Victor Bittow/Carolina Kuwabata Ilustrao da capa: Roberto Coelho ISBN: 978-85-7522-289-8 Histrico das impresses: Dezembro/2011 Primeira edio

Novatec Editora Ltda. Rua Lus Antnio dos Santos 110 02460-000 So Paulo, SP Brasil Tel.: +55 11 2959-6529 Fax: +55 11 2950-8869 E-mail: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

Dados

Internacionais de Catalogao na Publicao (Cmara Brasileira do Livro, SP, Brasil)

Silva, Maurcio Samy CSS3 : desenvolva aplicaes web profissionais com uso dos poderosos recursos de estilizao das CSS3 / Maurcio Samy Silva ; [traduo Rafael Zanolli]. -- So Paulo : Novatec Editora, 2012. ISBN 978-85-7522-289-8 1. CSS (Linguagem de programao) 2. XHTML (Linguagem de programao) 3. Web sites - Criao 4. Web sites - Desenvolvimento 5. Web sites Design I. Ttulo.

(CIP)

11-12858

CDD-004.678 ndices para catlogo sistemtico: 1. CSS3 : Linguagem de programao : Computadores : Processamento de dados 004.678

VC20111128

captulo 1

Fundamentos CSS

Neste captulo, teremos uma introduo s CSS. Veremos sua definio e um breve histrico de seu aparecimento. Em seguida, passaremos ao estudo da sintaxe, dissecando a regra CSS. Veremos a conceituao de unidades de medida CSS e os mtodos para vincular folhas de estilo a documentos HTML. Ao final do captulo, o leitor ter uma viso geral da evoluo das CSS desde a sua criao, reconhecer a terminologia dos fragmentos que compem uma folha de estilo, ter uma noo slida das unidades de medida CSS e saber como linkar folhas de estilo a documentos HTML.

1.1 Definies e conceitos CSS

1.1.1 Definio
CSS a abreviao para o termo em ingls Cascading Style Sheet, traduzido para o portugus como folhas de estilo em cascata. Neste livro, adotaremos CSS como abreviao e folhas de estilo em cascata para o termo por extenso. A definio mais precisa e simples para folha de estilo encontra-se na homepage das CSS no site do W3C e diz:
Folha de estilo em cascata um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaamentos) aos documentos web.

24

Captulo 1 Fundamentos CSS

25

1.1.2 Finalidade
As CSS tm por finalidade devolver marcao HTML/XML o propsito inicial da linguagem. A HTML foi criada para ser uma linguagem exclusivamente de marcao e estruturao de contedos. Isso significa que, segundo seus idealizadores, no cabe HTML fornecer informaes ao agente do usurio sobre a apresentao dos elementos. Por exemplo: cores de fontes, tamanhos de textos, posicionamentos e todo o aspecto visual de um documento no devem ser funes da HTML. Cabem s CSS todas as funes de apresentao de um documento, e essa sua finalidade maior. Da a j consagrada frase que resume a dobradinha CSS + HTML: HTML para estruturar e CSS para apresentar.
O termo agente de usurio empregado para se fazer referncia a qualquer dispositivo capaz de interpretar um documento escrito em linguagem de marcao. O exemplo mais comum e conhecido de agente de usurio o navegador. Leitores de tela, robs de indexao e busca, dispositivos mveis como tablets e smartphones so tambm alguns exemplos de agentes de usurio.

1.1.3 Histrico
Tim Berners-Lee, ao desenvolver o navegador Nexus, que serviu para implementar suas invenes, escreveu tambm, ainda que de forma bastante limitada, algumas funcionalidades intrnsecas que controlavam a apresentao dos documentos. Navegadores que se seguiram, nos anos de 1992 e 1993, tambm vinham com funcionalidades de estilizao padro, tais como no modelo desenvolvido por Tim. No navegador Mosaic, lanado em 1993 e que popularizou a web, tambm foram previstas funcionalidades mnimas para aplicar estilos. Na verdade, apenas o controle de algumas fontes e de cores era possvel. As funcionalidades intrnsecas aqui referidas so aquelas que hoje em dia conhecemos como folhas de estilo padro do navegador. Um conjunto de regras de estilo forma uma folha de estilo que o navegador aplica aos documentos por padro nos casos em que o autor do documento ou o usurio no tenham definido nenhuma regra de estilo. Adiante, veremos detalhes da folha de estilo. Em setembro de 1994, surgiu a primeira proposta para implementao das CSS. At ento, o prprio Tim considerava que a estilizao era uma questo a ser resolvida pelo navegador, razo pela qual no se preocupou em publicar a sintaxe usada para criar a folha de estilo padro do seu navegador. No ms de dezembro de 1996, as CSS1 foram lanadas como uma Recomendao oficial do W3C.

26

CSS3

1.1.4 Regra CSS

Regra CSS a unidade bsica de uma folha de estilo. Nessa definio, o termo unidade bsica significa a menor poro de cdigo capaz de produzir efeito de estilizao. Uma regra CSS composta de duas partes: o seletor e a declarao. A declarao compreende uma propriedade e um valor. A sintaxe para se escrever uma regra CSS mostrada na figura 1.1.

Figura 1.1 Sintaxe da regra CSS.

Definio dos componentes de uma regra CSS: Seletor: o alvo da regra CSS. Declarao: determina os parmetros de estilizao. Compreende a propriedade e o valor. Propriedade: define qual ser a caracterstica do seletor a ser estilizada. Valor: a quantificao ou a qualificao da propriedade.
A terminologia mostrada a adotada pelo W3C e recomendo que voc a adote tambm. Evite usar expresses em desacordo com a sintaxe oficial, tais como atributo CSS no lugar de propriedade CSS, comando CSS no lugar de declarao CSS e outras.

Uma regra CSS poder conter vrias declaraes separadas por ponto e vrgula. Observe o exemplo a seguir:
p { color: red; background-color: black; font-size: 12px; }

Nesse exemplo identificamos os seguintes componentes da regra CSS: Seletor: o elemento p. Seletores para elementos da marcao so denominados seletores tipos.

Captulo 1 Fundamentos CSS

27

Declaraes: so trs color: red; background-color: black; font-size: 12px;. Propriedades: so trs color, que define a cor dos textos contidos em p, background-color, que define a cor de fundo do elemento p e font-size, que define o tamanho da fonte para o elemento p.
Para ver a relao completa das propriedades CSS3, seus valores possveis, valores iniciais e sua herana, consulte o apndice A.

Note que, no exemplo anterior, colocamos uma declarao em cada linha. Fizemos isso apenas para facilitar a leitura do cdigo, pois poderamos ter colocado todas as declaraes na mesma linha, sendo obrigatrio apenas o uso de ponto e vrgula para separ-las. O uso de espaos em branco, entre os componentes de uma regra CSS, facultativo e visa apenas a facilitar a leitura do cdigo. A regra mostrada seguir, em uma linha, tem o mesmo efeito.
p { color:red; background-color:black; font-size:12px; } /* Menos legvel, no ? */

O ponto e vrgula colocado na ltima declarao de uma regra de estilo, ou colocado na declarao nica de uma regra, facultativo, porm de boa prtica us-lo, como fizemos no exemplo mostrado, pois, se no futuro tivermos que acrescentar mais declaraes regra, estamos livres da obrigao de colocar o ponto e vrgula e, melhor ainda, no correremos o risco de interromper o funcionamento da regra CSS por termos nos esquecido dele. Quando o valor de uma propriedade for uma palavra composta, separada por espaos, deve-se usar sinais de aspas duplas (" ") ou, alternativamente, de aspas simples (' '), conforme mostrado a seguir:
p { font-family: "Times New Roman"; }

ou
p { font-family: 'Times New Roman'; }

No se usam aspas em palavras compostas separadas por hfen:

p { font-family: Sans-serif; }

28

CSS3

A sintaxe da regra CSS no sensvel ao tamanho de caixa da fonte (voc pode usar letras minsculas ou maisculas, indiferentemente) e mltiplos espaos so tratados como espao simples. Usar ou no espaos entre os componentes da regra CSS fica a critrio do desenvolvedor. Todas as regras CSS mostradas a seguir so vlidas:
h1 { border: 1px solid red; } h1 {border:1px solid red;} h1{ border: 1px solid red;} H1 { border: 1px solid RED;} h1{ BORDER: 1px solid red; }

Eliminar o espao entre o seletor e o sinal de abrir chaves pode causar confuso em alguns navegadores antigos e de boa prtica evit-lo.

Tratando-se de linguagem de programao, sempre que houver mais de uma forma vlida de escrever o cdigo, o desenvolvedor deve escolher uma delas e adot-la como seu padro pessoal. Isso torna o cdigo consistente e facilita a manuteno. Com as folhas de estilo aplica-se essa prtica, e voc pode escolher qualquer uma das formas mostradas anteriormente ou, mesmo, outras variaes para escrever suas folhas de estilo. Contudo, as duas formas de uso mais difundidas so as mostradas no primeiro e no segundo itens do exemplo anterior. A primeira adota um espao em branco junto ao sinal de chaves ({ }). A segunda, um espao somente para separar o seletor da declarao. A forma estendida de declarar as propriedades em linhas distintas escrita conforme mostrado a seguir, sendo a endentao a critrio do desenvolvedor.
h1 { border: 1px solid red; }

Um componente facultativo, mas de grande utilidade na escrita de folhas de estilo, o sinal para inserir comentrios. semelhana de qualquer linguagem de programao, existe um sinal prprio para marcar comentrios no cdigo de estilos, conforme mostrado nos exemplos a seguir: Comentrio em uma linha:
/* Este um comentrio em uma linha */

Captulo 1 Fundamentos CSS

29

Bloco de comentrio:
/* Este um bloco de comentrio em linhas diferentes contendo muitas informaes sobre um trecho da folha de estilo */

Voc comea um comentrio com o sinal /* e termina com o sinal */. Um conjunto de regras CSS denominado folha de estilo. O conjunto das regras pode ser escrito no prprio documento ao qual as regras sero aplicadas ou em um arquivo externo gravado com a extenso padro .css. Por exemplo: principal.css.

1.1.5 Categorias de valores CSS

Para aplicar uma regra CSS, o agente de usurio (por exemplo: o navegador) identifica o valor da propriedade e renderiza o elemento, casado pelo seletor, de acordo com aquele valor. Observe as regras CSS que se seguem:
p { font-family: Arial, Sans-serif; } p { width: 400px; } p { font-size: 120%; } p { background-color: red; } p { height: 2em; } /* estiliza p com fonte na famlia especificada (valor) */ /* estiliza p com largura 400px */ /* estiliza p com tamanho de fonte 1.2 vezes o valor de referncia */ /* estiliza p com fundo na cor vermelha */ /* estiliza p com altura 2 vezes o valor de referncia */

Observe que alguns valores so absolutos ( aquele valor e pronto!) e outros relativos (dependem de um valor de referncia), tais como as medidas CSS em porcentagem e em. Os valores CSS podem ser agrupados em oito categorias, conforme descrito nos subitens a seguir.

1.1.5.1 Palavra-chave
Um valor CSS do tipo palavra-chave quando expresso por uma string predefinida nas especificaes. O exemplo tpico para esse caso quando usamos palavra-chave para definir cores, conforme mostrado no exemplo a seguir:
p { color: red; background-color: acqua; border-color: teal; }

30

CSS3

Os valores red, acqua e teal so palavras-chave para cores, previstas nas especificaes para as CSS3. Consulte a lista completa das palavras-chave para cores no apndice D. Outros exemplos de palavra-chave para expressar valores CSS so:
Palavra-chave
inherit collapse italic uppercase

Utilizada para definir uma propriedade que dever ser herdada. para definir bordas de clulas de tabelas unidas. para definir fonte em itlico. para definir texto em caixa-alta.

1.1.5.2 Nmero
Um valor CSS do tipo nmero quando expresso por um nmero inteiro ou por um nmero real. A especificao adota a sintaxe <integer> para designar nmeros inteiros e <number> para designar nmeros reais. Nmeros inteiros so aqueles formados por um ou mais algarismos de 0 a 9, e nmeros reais so formados por um ou mais algarismos de 0 a 9, seguidos de uma vrgula e seguidos de um ou mais algarismos de 0 a 9. Todo nmero real tambm nmero inteiro. Em CSS, nmeros podem ser precedidos dos sinais + e - para indicar o sinal do nmero. Esses dois caracteres, quando usados, passam a fazer parte do valor CSS.

1.1.5.3 Nmero no negativo

Muitas das propriedades CSS que admitem um valor do tipo nmero fazem restrio quanto faixa de nmeros admitidos. Por exemplo: h propriedades CSS, tal como a propriedade width, destinada a definir a largura de um elemento, que no admitem nmeros negativos. Nesses casos, a sintaxe prevista nas especificaes <non-negative-integer> para nmeros inteiros no negativos e <non-negative-number> para nmeros reais no negativos. Convm notar que para esses casos a restrio no se aplica ao nmero zero, que um nmero no negativo.

Captulo 1 Fundamentos CSS

31

1.1.5.4 Nmero com unidade de medida

Os valores CSS, quando expressos com nmeros seguidos por uma unidade de medida, so classificados em cinco categorias, conforme descritas nos subttulos a seguir.

Comprimento
Comprimento se refere s medidas horizontal e vertical. A sintaxe prevista nas especificaes para designar essa categoria <length>. Um valor CSS que usa uma medida de comprimento formado por um nmero seguido da abrevitura para uma unidade de medida. Por exemplo: 14px, 12em, 18pt. Se o nmero zero, a unidade de medida opcional. Recomendo no usar unidade de medida nesses casos, pois no vejo sentido em 0px, 0em, 0cm, pois zero zero, independentemente de unidades. A nica exceo a essa grafia na sintaxe de definio da posio do primeiro frame de uma animao CSS. Nesse caso, a definio do frame deve ser 0%, sendo obrigatrio constar o sinal de porcentagem depois do valor zero (ver captulo 15).

Medida relativa
Unidade de medida relativa aquela cujo valor determinado em funo de outro valor para uma propriedade que lhe serve de referncia. Definir medidas relativas em uma folha de estilo facilita o escalonamento e possibilita servi-la para diferentes tipos de mdias, por exemplo: para uma tela de computador ou para uma mdia de impresso. As unidades de medidas relativas nas CSS3 so mostradas no quadro a seguir:
Unidade
em ex px gd rem vw vh vm ch

Relativa font-size do elemento (ou do elemento-pai). ao valor x-height da fonte do elemento. ao dispositivo de renderizao. ao grid definido pelo layout-grid , descrito no Mdulo Texto da CSS3. font-size do elemento raiz. largura da viewport. altura da viewport. largura ou altura da viewport (a menor das duas). largura do nmero 0 , renderizado de acordo com font-size. Se no existir 0 na fonte especificada, a largura mdia dos caracteres.

32

CSS3

Medida absoluta
Unidade de medida absoluta aquela cujo valor determinado e fixo. Essas unidades so teis para uso quando se conhece as dimenses fsicas da mdia para a qual a folha de estilo ser servida. As unidades de medidas absolutas nas CSS3 so mostradas no quadro a seguir:
Unidade
in cm mm pt pc

Descrio polegada; 1 polegada = 2,54 cm centmetro milmetro ponto; 1 ponto = 1/72 polegada pica; 1 pica = 12 pontos

Porcentagem
O formato para definir um valor CSS em porcentagem um nmero imediatamente seguido pelo sinal %. A sintaxe prevista nas especificaes para designar essa categoria <percentage>. Porcentagens so valores dependentes de outro valor, por exemplo: de um valor do tipo <length>. As propriedades CSS que admitem valores em porcentagem tambm definem qual o valor de referncia a considerar para clculo da porcentagem. O valor de referncia pode ser o valor de outra propriedade do mesmo elemento ao qual a porcentagem foi aplicada, o de um elemento ancestral ou o valor de um contexto de formatao, como a largura de um bloco de contedo.

ngulo
O formato para definir um valor CSS em medida angular um nmero imediatamente seguido por uma unidade de medida angular. A sintaxe prevista nas especificaes para designar essa categoria <angle>. As unidades de medida angular em CSS so:
Unidade
deg grad rad turn

Descrio Graus Grados Radianos Volta

Captulo 1 Fundamentos CSS

33

Valores expressos em medidas angulares so usados, por exemplo, para definir propriedades destinadas mdia speech (mdia falada, tal como leitores de tela) ou s transformaes CSS3.

1.1.5.5 Nmero no negativo com unidade de medida

Valores CSS expressos com nmeros no negativos com unidade de medida so classificados em duas categorias, conforme descritas nos subttulos a seguir.

Hora
O formato para definir um valor CSS em medida de hora um nmero imediatamente seguido por uma unidade identificadora de tempo em segundos. A sintaxe prevista nas especificaes para designar essa categoria <time>. As unidades de medida de tempo em CSS so:
Unidade
ms s

Descrio Milissegundo Segundo

Valores expressos em medidas de tempo so usados, por exemplo, para definir propriedades destinadas mdia speech (mdia falada, tal como leitores de tela) ou durao de animaes e transies CSS3.

Frequncia
O formato para definir um valor CSS em medida de frequncia um nmero imediatamente seguido por uma unidade identificadora de frequncia em hertz. A sintaxe prevista nas especificaes para designar essa categoria <frequency>. As unidades de medida de frequncia em CSS so:
Unidade
Hz kHz

Descrio Hertz Quilohertz

Valores expressos em medidas de frequncia so usados, por exemplo, para definir propriedades destinadas a mdia speech (mdia falada, tal como leitores de tela).

34

CSS3

1.1.5.6 String
Valores CSS expressos com strings devem ser grafados com aspas simples () ou duplas (). Uma no pode ocorrer dentro de outra, a menos que seja escapada com uma barra invertida (\). Uma string no pode conter uma quebra de linha, a menos que se use o caractere \A, que representa uma nova linha em CSS. Para fins de legibilidade, possvel quebrar uma string em substrings com uso do caractere barra invertida (\). Observe os exemplos a seguir, que esclarecem essas sintaxes:
"Esta 'Esta "Esta 'Esta uma uma uma uma 'string'." "string".' \"string\"." \'string\'.' /* /* /* /* aspas aspas aspas aspas simples dentro de aspas duplas */ duplas dentro de aspas simples */ duplas escapadas dentro de aspas duplas */ simples escapadas dentro de aspas simples */

"Esta string est na primeira linha. \A E esta na segunda" "Esta uma string longa\ que foi quebrada para\ fins de legibilidade."

1.1.5.7 Notao funcional

Valores CSS podem ser expressos por uma funo, e nesses casos so classificados como valores em notao funcional. Em CSS3, valores funcionais so usados para definir cores, atributos e URIs. A sintaxe para escrita de um valor funcional : nome da funo seguido de uma lista de argumentos entre parnteses. Considere os exemplos mostrados a seguir:
p { background-color: rgb(255, 0, 0); } img { margin-top: attr(height, px); } div { background-image: url(http://maujor.com/avatar.gif); }

Nos trs exemplos mostrados, os valores das propriedades CSS, em destaque no cdigo, so do tipo valor funcional e as respectivas funes CSS rgb, attr e url retornam um valor a ser aplicado nas propriedades definidas para os seletores p, img e div, respectivamente.

Captulo 1 Fundamentos CSS

35

1.1.5.8 Casos especiais

Valores CSS que no se enquadram em nenhuma das sete categorias anteriores pertencem a uma categoria denominada casos especiais . Os valores CSS enquadrados nessa categoria so os valores para definio de famlias de fontes e valores para definio de cores em sintaxe hexadecimal. Observe os exemplos a seguir, que mostram o uso de valores pertencentes a essa categoria:
p { background-color: #f00; } h1 { font-family: Arial, Verdana, Sans-serif; }

1.1.6 Tipos de valores CSS

Vimos no item anterior [1.1.5] os oito grupamentos para classificao de valores CSS. importante tambm conhecer o conceito de valor CSS para efeito de aplicao da regra CSS no elemento. Observe o exemplo a seguir:
p { font-size: 120%; }

O valor 120% para a propriedade font-size dessa regra CSS enquadra-se no grupamento de valores denominado Nmero com unidade de medida , conforme vimos em [1.1.5.4]. Contudo, como o navegador aplica um tamanho de fonte igual a 120%? Qual o valor em pixels? 120% do qu? Para aplicar valores CSS o navegador precisa, em certos casos, efetuar clculos e, em outros, tirar algumas concluses para chegar ao valor a aplicar. Ao longo do processo de investigao o navegador passa por etapas, e em cada etapa chega a um tipo de valor. Veremos a seguir esses tipos de valores. Observe as regras CSS que se seguem, j mostradas anteriormente:
p { font-family: Arial, Sans-serif; } p { width: 400px; } p { font-size: 120%; } p { background-color: red; } p { height: 2em; } /* estiliza p com fonte na famlia especificada (valor) */ /* estiliza p com largura 400px */ /* estiliza p com tamanho de fonte 1.2 vezes o valor de referncia */ /* estiliza p com fundo na cor vermelha */ /* estiliza p com altura 2 vezes o valor de referncia */

36

CSS3

Observe que alguns valores so absolutos ( aquele valor e pronto!) e outros relativos (dependem de outros valores), tais como as medidas CSS em porcentagem e em. Para aplicar valores CSS, os mecanismos das CSS consideram cinco tipos de valores, que veremos a seguir.

1.1.6.1 Valor inicial

A todas as propriedades CSS atribudo, por padro, um valor denominado valor inicial. O valor inicial de cada uma das propriedades CSS definido por um mecanismo nativo do agente de usurio (por exemplo: navegador). Infelizmente, no h padronizao para o valor inicial das propriedades CSS e cada navegador implementa essa funcionalidade sua maneira. Esse comportamento pode trazer inconsistncia de renderizao em diferentes navegadores. Felizmente, todos os navegadores adotam o mesmo valor para muitas das propriedades CSS. As inconsistncias, em sua maioria, esto relacionadas definio de valores iniciais para margin e padding. Observe a seguir o valor inicial de algumas propriedades CSS:
border: none; color: black; background: transparent; font-family: serif; font-size: 16px;

Todas as propriedades CSS admitem a palavra-chave initial para forar a adoo do valor inicial da propriedade. Observe o exemplo a seguir, baseado no exemplo mostrado anteriormente:
u

HTML
<div> <p>Pargrafo com <em>palavra</em> marcada com nfase</p> </div>

CSS
div { color: red; border: 1px solid blue; } p { color: initial; }

Captulo 1 Fundamentos CSS

37

Nesse caso, foramos o elemento p a ser estilizado com a cor inicial preta, anulando o efeito herana. Nota: O valor initial no existia nas verses anteriores das CSS. Os navegadores Chrome e Safari j suportam nativamente esse valor e o navegador Firefox4 implementa-o com uso do prefixo -moz-, como mostrado a seguir:
p { color: -moz-initial; }

Em abril de 2007, Eric Meyer publicou em seu blog uma matria comentando as inconsistncias de renderizao entre navegadores em razo da no padronizao de valores iniciais, para as diferentes propriedades CSS. Props ento uma soluo que consistia em criar uma folha de estilos padro que, em resumo, se destinava a padronizar os valores iniciais. Eric exps ainda razes para preservar determinados valores iniciais e fez algumas consideraes a mais, mas no do escopo deste livro detalhar a matria. Se voc estiver interessado em aprofundar-se no assunto, a matria encontra-se em http://kwz.me/rb. Como consequncia, Eric criou uma folha de estilos que vem sendo atualizada regularmente e hoje se encontra em sua verso 2.0, lanada em 26 de janeiro de 2011. A folha de estilos, mundialmente conhecida e usada, foi denominada CSS Reset e lanada para uso livre e gratuito sob o rtulo de domnio pblico. Inmeros frameworks, ferramentas de desenvolvimento e desenvolvedores em geral usam a folha de estilos criada por Eric como ponto de partida para os valores iniciais das propriedades CSS. Para obter uma cpia atualizada da CSS Reset , visite http://kwz.me/rt. comum encontrarmos em fruns e matrias publicadas em blogs a indicao do uso de uma regra CSS para zerar os valores de margin e padding de todos os elementos da marcao com uso do seletor universal, como mostrado a seguir:
* { margin: 0; padding: 0; }

Eric adverte que, embora esse seja um bom ponto de partida, preciso estar ciente de que todos os elementos da marcao tero aquelas duas propriedades zeradas e isso nem sempre ocorre na prtica, pois para elementos de formulrio, por exemplo, dependendo do navegador, a regra ser ignorada ou ainda poder haver alterao na apresentao do elemento, perdendo-se nesses casos a consistncia.

38

CSS3

1.1.6.2 Valor especificado

To logo um documento seja parseado e a rvore do documento tenha sido construda, o agente de usurio dever atribuir a cada propriedade CSS um valor. A atribuio do valor segue um mecanismo que obedece a trs ordens de precedncia, como mostrado a seguir: se o efeito cascata resulta em um valor, adote esse valor; no havendo um valor de cascata e se o valor da propriedade for herdvel, adote o valor herdado; no ocorrendo as hipteses anteriores, adote o valor inicial da propriedade. O valor resultante da aplicao desse mecanismo denominado valor especificado.

1.1.6.3 Valor computado

O valor especificado pode ser absoluto (por exemplo: 2 mm, red etc.) ou relativo (por exemplo: 80%, 2 em etc.). Se o valor especificado for absoluto, ento o valor computado igual a ele e nenhum clculo necessrio para se chegar ao valor computado. Caso o valor especificado seja expresso em medida relativa, necessrio fazer um clculo para chegar ao valor computado. Por exemplo: porcentagens devem ser tomadas em relao a um valor de referncia, que definido por padro para cada propriedade; valores relativos para unidades de medida, tais como px, em e ex devem ser tornados absolutos, multiplicando-se por tamanhos de fonte ou de pixel apropriados; valores auto devem ser calculados por frmulas definidas para cada uma das propriedades e assim por diante.

1.1.6.4 Valor usado

o valor efetivamente usado para renderizar o documento. Valores computados podem ser processados antes mesmo de o documento ter sido formatado, contudo alguns valores s podem ser computados com o conhecimento do layout do documento. Por exemplo: um valor definido em porcentagem para

Captulo 1 Fundamentos CSS

39

a largura de um box somente poder ser computado aps o conhecimento da largura do box que o contm. Denominamos de valor usado aquele resultante do valor computado depois de resolvidas todas as pendncias de layout.

1.1.6.5 Valor atual

A princpio, o valor usado aquele adotado para renderizar o documento; contudo, pode ocorrer o caso em que o agente de usurio no seja capaz de renderizar o valor usado. Por exemplo: chega-se a um valor usado para a espessura da borda de um elemento igual a 4.2px. Nesse caso, o valor atual dever ser o resultado do arredondamento do valor usado, pois no h como representar fraes de pixel.

1.2 Vinculando folhas de estilo a documentos

Depois que voc acabou de escrever sua folha de estilo, precisa informar ao documento onde ele deve busc-la. Ou seja, voc precisa de um mtodo capaz de vincular a folha de estilo ao documento ao qual ela ser aplicada. As folhas de estilo podem ser escritas no prprio documento HTML ao qual sero aplicadas ou ser arquivos externos independentes, gravados com a extenso .css, como, por exemplo, um arquivo chamado de main.css, e linkados ao documento.

1.2.1 Estilos inline

O mtodo direto e simples de aplicar estilos a um elemento da marcao com o emprego do atributo style da HTML. Voc escreve as regras de estilo diretamente dentro da tag de abertura do elemento a estilizar, conforme mostra o exemplo a seguir:
<p style="width: 200px; color: white; background: red; font-size: 1.8em;"> <!-- Pargrafo com aplicao de estilos inline --> </p>

Esse mtodo dificulta a manuteno e retira um dos maiores poderes da folha de estilo, que o controle centralizado da apresentao. Toda vez que

40

CSS3

for preciso alterar a apresentao, ser necessrio percorrer todo o cdigo de marcao do documento ou centenas de documentos, se o site for grande, procura das regras de estilo inline.

1.2.2 Estilos incorporados

Outro mtodo de escrever a folha de estilos no prprio documento HTML com o emprego do elemento style. Voc escreve as regras de estilo dentro das tags <style></style>, como mostrado no exemplo a seguir:
<head> <style type="text/css" media="all"> body { margin: 0; padding: 0; font-size: 80%; color: black; background: white; } </style> </head>

A vantagem desse mtodo sobre o anterior que, agora, localizamos com mais facilidade a folha de estilo, mas h a desvantagem de colocar a folha de estilos dentro do prprio documento. No seria sensato vincular uma mesma folha de estilo a vrios documentos empregando esse mtodo. Toda vez que for preciso alterar a apresentao, ser necessrio abrir o documento ou centenas de documentos, se o site for grande, e fazer a mesma alterao de estilo em todos eles. Uma boa escolha para uso desse mtodo seria para o caso de aplicao de estilos especficos a um documento do site. O elemento style deve estar contido na seo head do documento. Note que em marcao HTML5 o uso de atributos no elemento style facultativo. O atributo type informa qual tipo de dado est sendo enviado e o atributo media informa a qual tipo de mdia devem ser aplicados os estilos. Os valores do atributo media e a mdia a que se destinam so listados a seguir:
Valor
screen tty tv

Mdia Telas de monitores Teletipo e similares Dispositivos tipo televiso

Nota

Captulo 1 Fundamentos CSS

Valor
projection handheld print braille aural all speech embossed

41
Mdia Nota

Projetores Dispositivos portteis Impressoras e visualizao no modo impresso Dispositivos tteis Sintetizadores de voz Todos os tipos de mdia Sintetizadores de voz Impressoras braille criada pela CSS3 criada pela CSS3 em desuso pela CSS3

1.2.3 Estilos externos

Folha de estilo externa aquela que no foi escrita no documento HTML. Trata-se de um arquivo de texto contendo as regras de estilo e os comentrios CSS. Um arquivo de folha de estilo deve ser gravado com a extenso .css e pode ser vinculado a um documento HTML de duas maneiras distintas, conforme explicado em seguida.

1.2.3.1 Folhas de estilo linkadas

Voc vincula uma folha de estilo externa a um documento empregando o elemento link. O elemento link deve estar contido na seo head do documento e tem por finalidade associar outros documentos ao documento no qual ele est contido. Veja, a seguir, o uso de link para associar (ou vincular) uma folha de estilo ao documento:
<head> ... <link rel="stylesheet" type="text/css" href="estilos.css" media="all" /> ... </head>

O atributo href aponta para o endereo no qual se encontra o arquivo da folha de estilo.

1.2.3.2 Folhas de estilo importadas

Nesse mtodo, voc vincula uma folha de estilo externa a um documento usando a diretiva @import dentro do elemento style. A sintaxe para esse tipo de vinculao mostrada a seguir:

42
<head> ... <style type="text/css"> @import url("estilos.css") screen, projection; </style> ... </head>

CSS3

Alternativamente, voc pode usar uma forma abreviada da sintaxe, como se mostra a seguir:
<style type="text/css"> @import "estilos.css" screen, projection; </style>

As duas sintaxes apresentadas (com ou sem a notao url (...) na diretiva) so equivalentes. O tipo de mdia definido em uma lista separada por vrgula na prpria diretiva. Na ausncia do tipo de mdia, os estilos sero aplicados para todas as mdias, ou seja, o efeito o mesmo que o de declarar mdia all. Declarando ou no a mdia, deve-se terminar a diretiva com um ponto e vrgula. Podemos tambm vincular uma folha de estilo externa a outra folha de estilo usando a diretiva @import dentro da folha de estilo. A sintaxe para esse tipo de vinculao idntica mostrada anteriormente. O exemplo a seguir mostra uma folha de estilo externa na qual importamos uma folha de estilo denominada main.css:
@import "main.css" body { margin: 0; font: 62.5% Arial, Sans-serif; } ... mais regras de estilo ...

vlido importar mais de uma folha de estilo. A declarao de importao de uma folha de estilo dentro de outra deve ocupar a primeira linha da folha, exceto no caso em que se use uma declarao de codificao de caracteres da folha de estilo. A diretiva @charset destina-se a declarar a codificao de caracteres de uma folha de estilos e deve ocupar a primeira linha na folha de estilo. Observe o exemplo a seguir, que demonstra as duas diretivas inseridas em uma folha de estilo:

Captulo 1 Fundamentos CSS

@charset "utf-8" @import "main.css" body { margin: 0; font: 62.5% Arial, Sans-serif; } ... mais regras de estilo ...

43

A diretiva @import deve preceder todas as demais regras de estilo para o documento. Havendo necessidade de vincular outras folhas de estilo ao documento, elas devero ser declaradas aps a diretiva. O mtodo de vincular folhas de estilo externas permite que se apliquem regras de estilo comuns a todos os documentos de um site. A grande vantagem do mtodo que o autor controla a apresentao do site em um arquivo central. A alterao de uma cor ou do tamanho de fonte na folha de estilo imediatamente se reflete no site inteiro, quer ele tenha 10 ou 10.000 pginas.

1.3 Mdulos CSS3

A primeira verso das especificaes do W3C para as Folhas de Estilos em Cascata foi para as CSS nvel 1, lanada em 17 de dezembro de 1996, em documento nico, que est dividido em nove sees e cinco apndices. Em 12 de maio de 1998, foi lanada a verso para as CSS nvel 2, em documento nico, contendo 19 sees e oito apndices. Em 2 de agosto de 2002, foi proposta a reviso da especificao, dando origem verso das CSS nvel 2.1, em documento nico, contendo 18 sees e sete apndices. A verso para as CSS nvel 2.1 passou para o status de Recomendao do W3C em 7 de junho de 2011. O W3C prefere o termo nvel em vez de verso, para designar a progresso dos diferentes documentos que especificam as CSS, alegando ser aquele termo mais apropriado. Argumenta informando que cada novo nvel projetado com base no nvel anterior, refinando definies e acrescentando novas funcionalidades s j existentes. O conjunto de funcionalidades de nveis anteriores , sempre, um subconjunto das funcionalidades da verso atual, portanto por ela plenamente suportado. Dessa forma, um agente de usurio que suporte as funcionalidades das CSS de nvel atual suporta tambm todas as funcionalidades das CSS de nveis anteriores.

44
Neste livro, deixaremos de lado essa considerao semntica a respeito de verses e nveis e adotaremos, por simplificao, o termo verso para designar os diferentes nveis de desenvolvimento das CSS. Assim, teremos CSS1, CSS2, CSS2.1 e CSS3.

CSS3

O modelo de desenvolvimento das especificaes para as CSS3 alterou o modelo adotado pelas verses anteriores. Enquanto estas foram desenvolvidas em um documento nico, as CSS3 esto sendo desenvolvidas em mdulos. Dividiu-se a especificao existente em assuntos e criou-se para cada assunto uma especificao independente. Por exemplo: as especificaes para seletores CSS3 constituem um mdulo, as bordas e fundos (background), outro mdulo, as cores, outro, e assim por diante. Cada mdulo desenvolvido de forma independente e segue um cronograma prprio. Hoje, temos mdulos cujas especificaes esto em fase de Candidata a Recomendao, outros em fase de Rascunho de Trabalho e outros ainda cujas especificaes nem comearam a ser desenvolvidas. A grande vantagem da modularizao est no fato de que o desenvolvimento das funcionalidades de um mdulo no mais depende do andamento dos outros mdulos, como aconteceu com o desenvolvimento das verses anteriores das CSS. Isso possibilita que fabricantes comecem a implementar, desde j, funcionalidades previstas em mdulos mais adiantados no seu desenvolvimento. Muitas funcionalidades das CSS3 j vm sendo largamente empregadas. Nas tabelas mostradas a seguir, esto relacionados os mdulos previstos para as CSS3 e o respectivo status de desenvolvimento.

1.4 Status dos mdulos

O desenvolvimento das especificaes no W3C segue etapas que so denominadas de status. As etapas ou os status das especificaes so mostrados a seguir:
Etapa WD LC Descrio Working Draft ou Rascunho de Trabalho. Essa etapa comea com a publicao de um rascunho das especificaes para conhecimento e discusso pblicos. Last Call ou ltima Chamada. Essa etapa comea depois de supostamente concludos os estudos e a discusso pblica. uma ltima chamada s consideraes pblicas.

Captulo 1 Fundamentos CSS

Etapa CR PR REC

45

Descrio Candidate Recommendation ou Candidata a Recomendao. Essa fase comea quando o W3C acredita que foram resolvidas todas as pendncias tcnicas e a fase de implementao j pode comear. Proposed Recommendation ou Proposta de Recomendao. Essa fase comea quando as implementaes j demonstraram a maturidade tcnica da especificao. A especificao remetida para o Comit Consultivo para endosso pelo W3C. W3C Recommendation ou Recomendao do W3C. A especificao est terminada e foi aprovada pelos membros e pelo diretor do W3C.

A sequncia de progresso pelas etapas no irreversvel, ou seja, uma especificao pode ter atingido um status de desenvolvimento e por razes diversas regredir para status anteriores. A ttulo meramente informativo, as tabelas a seguir mostram o status de cada um dos mdulos das CSS3 e suas prioridades para desenvolvimento estabelecidas pelo W3C. Nas tabelas, os nomes dos mdulos foram mantidos em ingls.
Concludo Selectors CSS Colors Alta prioridade CSS Namespaces CSS Backgrounds and Borders CSS Multi-column Layout Media Queries Prioridade mdia CSS Snapshot 2007 CSS Snapshot 2010 CSS Mobile Profile 2.0 CSS Marquee CSS Paged Media CSS Print Profile CSS Values and Units CSS Cascading and Inheritance CSS Text CSS Writing Modes CSS Line Grid CSS Ruby Status Recomendao do W3C Recomendao do W3C Status Candidata a Recomendao Candidata a Recomendao Candidata a Recomendao Candidata a Recomendao Status ltima Chamada Rascunho de Trabalho Candidata a Recomendao Candidata a Recomendao ltima Chamada ltima Chamada Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho No iniciado Candidata a Recomendao

46
Prioridade mdia CSS Fonts CSS Basic Box Model CSS Template Layout CSS Speech CSS Basic User Interface CSS Scoping CSS Grid Positioning CSS Grid Layout CSS Regions CSS Flexible Box Layout CSS Image Values CSS 2D Transformations CSS 3D Transformations CSS Transitions CSS Animations CSS style Attribute Syntax Baixa prioridade CSSOM View CSS Extended Box Model CSS Object Model CSS Syntax CSS Lists and Counters CSS Tables CSS Reader Media Type CSS Positioning CSS Generated and Replaced Content Rascunho de Trabalho CSS Line Layout CSS Hyperlink Presentation CSS Math CSS Presentation Levels CSS Aural Style Sheets CSS TV Profile 1.0 Behavioral Extensions to CSS CSS Introduction Rascunho de Trabalho Rascunho de Trabalho No iniciado Rascunho de Trabalho No iniciado Candidata a Recomendao Rascunho de Trabalho Rascunho de Trabalho Status Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Candidata a Recomendao No iniciado Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Rascunho de Trabalho Candidata a Recomendao Status Rascunho de Trabalho No iniciado No iniciado Rascunho de Trabalho Rascunho de Trabalho No iniciado Rascunho de Trabalho

CSS3

CSS Generated Content for Paged Media Rascunho de Trabalho