css, uma abordagem geral

8/8/2019 CSS, Uma Abordagem Geral

1/60

SOBRE ESTA APOSTILA

Antes de mais nada, gostaria de comunicar que esta apostila ligeiramente

diferente. O que se v nas apostilas sobre CSS um tecnicismo que eu considero

muito chato! s mostrar propriedade, mostrar valor, mostrar exemplo, mostrarpropriedade, mostrar valor, mostrar exemplo... , realmente uma maneira

rpida de algum escrever uma apostila e mais rpido ainda de um outro algum

conhecer os principais conceitos abordados nela, mas no uma maneira que eu

gosto de escrever!

Por favor, no pensem que sou pretensioso, egocentrista, ou algo do tipo! Quero

distncia disso! Podem ter certeza de que no sou igual a muito blogueiroestrelinha, que diz que um blog no pode ficar num sei quantos dias sem novo post

e tudo o mais, mas se a gente for contabilizar todas as matrias publicadas,

metade sobre as estatsticas de acesso do blog dele, quantas pessoas chegam

pelo Google, quantos visitantes bl bl bl, etc. o que eu chamo de Sndrome da

Rede Globo.

Bem, voltando ao assunto principal, contrariando as tendncias minimalistas da

internet(e do mundo), meus textos so regados com muitas palavras que podem

ser consideradas desnecessrias, para a maioria, mas que, pessoalmente,

acredito ser mais fcil para aqueles que ainda no tiveram contato com o assunto.

Na verdade, creio ser dessa forma para qualquer tipo de apostila. Se eu no

conheo sobre um assunto e pego um livro (ou, no caso, apostila) para aprender,

fico um pouco intimidado com tantas novas informaes de uma s vez, e uma

informalidadezinha sempre bem vinda!

exatamente isso que tem por aqui: um monte de informalidadezinha!

Uma outra peculiaridade que no apresentarei enormes listas com as principais

propriedades e valores CSS atualmente disponveis. Para isso, j existem inmeros

excelentes websites com exemplos dos mais elucidativos! Vou me limitar a somente

prescrever alguns links, com o intuito, tambm, de no tornar a apostila muito

extensa e cansar o leitor.

CSS: uma abordagem geral - http://tarciozemel.asciijf.com/ - 20071


2/60

Mas o seguinte: ficar muito mais fcil (muito, mesmo!) continuar lendo se voc

j tiver um prvio conhecimento sobre (X)HTML1, e voc ter 0% de chances de

entender alguma coisa, caso no tenha a VONTADE de aprender!

S para esclarecer, o pblico-alvo da apostila so os iniciantes na rea de CSS.

Isso, aqueles caboclinhos que ainda no sabem ao certo o que seriam folhas deestilo em cascata, e mesmo aqueles que jamais ouviram falar em tal coisa (e

tambm os que acreditam que o certo CCS...).

Para finalizar, pedirei uma coisa para aqueles corajosos que, porventura, leiam a

apostila na ntegra: poderiam, por favor, caso encontrem algum texto errado,

algum exemplo que no funcione, enfim, alguma coisa que no deveria estar onde

est, me enviar um e-mailpara que eu possa corrigir? De quebra, se no for pedirdemais, se vocs tiverem alguma sugesto, idia, estmulo, doao (brincadeira),

podem, tambm, me enviar uma mensagem?

Vai que esse negcio todo de ter um blog e disponibilizar apostila d certo... A

outras verses tero que surgir! (-:

1 Tambm um um pouquinho de micro formatos (microformats) e, claro, j ter contato com o desenvolvimento para web,preferencialmente com alguns websites j feitos.



3/60

ALGUNS DIREITOS RESERVADOS

Esta apostila registrada pela CREATIVE COMONS Atribuio 2.5 Brasil, que diz o

seguinte:

Ou seja, voc pode fazer quantas cpias da apostila quiser e repassar para quantas

pessoas quiser, mostrar para quem quiser em qualquer lugar que desejar. Pode,

inclusive, fazer uma apostila derivada, livro, manual, ou qualquer outra coisa

baseada nos escritos que aqui constam, DESDE QUE voc cite que os textos

originais so da autoria de Trcio Zemel (no caso, eu).

Ah, s para constar nos autos, eu fiz esta apostila em ambiente Linux:

Kurumin 7 kernel 2.6.18 (SO)

Quanta+ 3.3.2 (cdigos)

Konqueror 3.5.5 (testes)

BrOffice.org 2.0 (textos)


Voc pode:

copiar, distribuir, exibir, executar a obra

criar obras derivadas

Sob as seguintes condies:

Atribuio: voc deve dar crdito ao autor original, daforma especificada pelo autor ou licenciante

Para cada novo uso ou distribuio, voc deve deixar claro para outros ostermos da licena desta obra

Qualquer uma destas condies podem ser renunciadas, desde que vocobtenha permisso do autor


4/60



5/60

SUMRIO

W3C.............................................................................................................................................................10DESENVOLVIMENTO EM CAMADAS...............................................................................................11

MARCAO x ESTILO........................................................................................................................12O QUE CSS?...........................................................................................................................................13VANTAGENS EM SE USAR CSS...........................................................................................................15

SEPARAO DAS CAMADAS DE DESENVOLVIMENTO............................................................15WEBSITES MAIS LEVES.....................................................................................................................15CONTROLE TOTAL SOBRE O LAYOUT..........................................................................................16DIFERENTES ESTILOS PARA DIFERENTES MDIAS....................................................................16

FUNDAMENTOS DE CSS.......................................................................................................................20COMO ESCREVER CSS (SINTAXE)...................................................................................................20

Regras.................................................................................................................................................20Agrupamento......................................................................................................................................23Efeito Cascata.....................................................................................................................................23Herana...............................................................................................................................................24

Seletores ID e Classe..........................................................................................................................26id....................................................................................................................................................26classe..............................................................................................................................................27

Div e Span..........................................................................................................................................28div..................................................................................................................................................28span................................................................................................................................................29

Comentrios........................................................................................................................................30MANEIRAS DE SE INSERIR CSS.......................................................................................................31

Css Inline............................................................................................................................................31Css Incorporado..................................................................................................................................31Css Externo.........................................................................................................................................32

SELETORES AVANADOS...................................................................................................................33SELETOR UNIVERSAL........................................................................................................................35SELETOR ID E SELETOR CLASSE....................................................................................................36SELETOR DESCENDENTE..................................................................................................................36SELETOR FILHO...................................................................................................................................37SELETOR IRMO ADJACENTE.........................................................................................................38SELETORES DE ATRIBUTO...............................................................................................................39

E[att]...................................................................................................................................................39E[att=val]............................................................................................................................................39E[att~=val]..........................................................................................................................................39E[att|=val]...........................................................................................................................................40

Combinao de Seletores de Atributo................................................................................................40PSEUDO-CLASSES...............................................................................................................................41:first-child...........................................................................................................................................41Pseudo-classes Para Links..................................................................................................................41

:link................................................................................................................................................42:visited............................................................................................................................................42:hover.............................................................................................................................................42:active.............................................................................................................................................43ateno com as pseudo-classes para links......................................................................................43:focus..............................................................................................................................................44

:lang....................................................................................................................................................44

PSEUDO-ELEMENTOS........................................................................................................................44:first-line.............................................................................................................................................45



6/60

:first-letter...........................................................................................................................................45:before e :after.....................................................................................................................................46

COMPATIBILIDADE............................................................................................................................46DICAS GERAIS.........................................................................................................................................51

TESTAR EM VRIOS NAVEGADORES............................................................................................51COMENTRIOS CONDICIONAIS......................................................................................................52!important................................................................................................................................................55

SEMNTICA..........................................................................................................................................55LINKS.........................................................................................................................................................57GERAL....................................................................................................................................................57BLOGS....................................................................................................................................................58

CONCLUSO............................................................................................................................................59



7/60



8/60

CAPTULO 1

INTRODUO

Neste captulo apresento algumas questes

essencialmente tericas, sem apresentar a

codificao CSS. Abordo temas como W3C,desenvolvimento em camadas e algumas

vantagens em se usar as folhas de estilo.



9/60



10/60

W3C

Para explicar o que o W3C, mesmo que rapidamente, tomarei emprestadas as

palavras de Maurcio Samy Silva, o Maujor2, em traduo feita em 08 de janeiro

de 2005, do FAQ sobre web standards do Web Standards Project:

O World Wide Web Consortium (W3C) um consrcio de mbito internacional

dedicado a "conduzir a Web ao seu pleno potencial". dirigida por Tim

Berners-Lee, o inventor da Web. Fundado em 1994, o W3C tem mais de 400

organizaes membro incluindo a a Microsoft, America Online (proprietria da

Netscape Communications), Apple Computer, [...] Sun Microsystems, e uma

vasta gama de fabricantes de hardware e software, fornecedores de

contedos, instituies acadmicas e companhias de telecomunicaes. O

Consrcio est hospedado em trs instituies de pesquisas - - MIT nos EUA,

INRIA na Europa e Keio University no Japo.

Ainda no mesmo documento, apresentada uma explicao sobre o que

exatamente o W3C faz:

O W3C desenvolve especificaes abertas (de facto standards) para aumentar

a interoperabilidade dos produtos para Web. As Recomendaes do W3C so

desenvolvidas por grupos de trabalho formados por membros do Consrcio eexperts convidados. Os grupos de trabalho criam esboos e propostas de

recomendaes , baseados em um consenso comum de companhias e

organizaes interessadas na criao de aplicaes Web. Estas so ento

submetidas apreciao dos membros do W3C e seu diretor para aprovao

formal como uma Recomendao. [...] (sic)

Ou seja, o W3C faz recomendaes a respeito de tecnologias, mtodos e tcnicas

de produo para o ambiente online, indica o que deve e o que no deve ser feitoe/ou utilizado, em se tratando de desenvolvimento para web (dentre outras coisas).

Mesmo sem ainda ter explicado o que CSS (Cascading Style Sheet), ou, como

prefiro, folha de estilo em cascata (ou, simplesmente, folha de estilo), adianto que

uma tecnologia aprovada e recomendada pelo W3C.

2 http://www.maujor.com/

http://www.maujor.com/http://www.maujor.com/


11/60

DESENVOLVIMENTO EM CAMADAS

O desenvolvimento em camadas um conceito originalmente convencionado para o

desenvolvimento de softwares, mas, em se tratando de desenvolvimento para web,

quer dizer que h a separao do contedo, apresentao e comportamentono momento da feitura de um website3.

Por camada de contedo, entende-se que seja as informaes que o website

contm: so os textos, informaes, notas, cabealhos, desenvolvimentos,

anlises, avaliaes, enfim, toda a parte escrita, seu contedo (incluindo-se a

listagens, links, tabelas e grficos).

A camada de apresentao refere-se ao modo como o que consta na camada de

contedo vai ser mostrado, apresentado. Aqui so definidas as cores e tamanhos

de links e textos e especificados os locais em que estes vo constar; onde se

coloca uma listagem esquerda ou direita, onde se especifica um plano de fundo,

onde se escolhe em qual posio uma imagem ir aparecer.

Na camada de comportamento alguns efeitos so postos s pginas para

conferir interatividade/dinamismo s mesmas, ou seja, como determinados

elementos e estruturas vo se comportar. aqui a etapa onde se define que uma

janela popup aparecer ao se clicar em um link; aqui onde se define que ao se

passar o ponteiro do mouse em um elemento, este ir se expandir e apresentar

informaes adicionais4.

Perceba como isso prtico, poupa tempo e oferece autonomia aos diferentes

estgios de produo de um website. Por exemplo: o responsvel pela camada decontedo precisa elaborar um formulrio para o cadastro de clientes;

simultaneamente, a aparncia deste formulrio (e da pgina como um todo) pode

ser feita por outro desenvolvedor. Um no precisa esperar o trmino do trabalho do

outro (muito menos ficam mutuamente dependentes), pelo contrrio, ambos

executam suas respectivas tarefas concomitantemente, poupando tempo e

3 E no somente a websites; o mesmo deve ser aplicado para minisites, hotsites, portais, sistemas de contedo interativo-dinmico e quaisquer outros que sejam feitos aos moldes de pgina da internet.

4 Ou seja, esta a camada que recebe um javascript, um vbscript, uma aplicao em AJAX (embora algunsdesenvolvedores entendam que o AJAX posto em uma quarta camada).



12/60

maximizando a produo, como um todo e, caso alguma alterao/atualizao

precise ser realizada, pode-se alterar o que foi feito em cada camada

separadamente, sem interferir em nada o contedo de outra.

MARCAO x ESTILOCom base na explicao do conceito de desenvolvimento em camadas, vou

apresentar algumas consideraes mais prticas.

A camada de contedo, tecnicamente falando, onde se insere o (X)HTML. E esta

tecnologia foi justamente idealizada para esse fim. O significado destas letras seria

algo como linguagem de marcao de hipertexto. E gostaria que voc desse

especial importncia palavra marcao.

Atravs das tags (X)HTML podemos especificar o que um ttulo primrio ou

cabealho, o que um pargrafo, onde haver uma quebra de linha num texto, o

que uma lista, uma citao de algum autor, quando um elemento deve aparecer

em negrito ou itlico, enfim, dentro das limitaes desta tecnologia, tem-se tudo o

que necessrio para a construo de pginas para a web.

Uma explicao que pode aclarar o que estou querendo dizer a seguinte: quando

um desenvolvedor est especificando todos estes itens, ele marca naquela pgina

o qu o qu5. Quando ele coloca uma palavra entre as tagse, est

marcando o local onde aparecer uma palavra em itlico em dispositivos de

renderizao em tela e, ao mesmo tempo, uma palavra que receber nfase ao ser

lida por um sintetizador de voz, por exemplo.

E para isso que serve o (X)HTML: nada mais, nada menos, que

marcar/estruturaros elementos que voc deseja em pginas web (na camada de

contedo)6. O estilo (ou estilizao) diz respeito camada de aparncia, ou seja,

deve ser feito com a utilizao de CSS.

5 Ser que usei a acentuao corretamente?6 Na verdade existem tags que servem para estilizar elementos, como alterar a cor de uma fonte, por exemplo, mas a

abordagem que fao nesta apostila no diz respeito a tcnicas antigas de desenvolvimento para web, utilizadas em pocasem que a tecnologia das folhas de estilo ainda no havia surgido.



13/60

O QUE CSS?

Depois das informaes anteriormente apresentadas, vou explicar o que so as

folhas de estilo em cascata, propriamente ditas. Mas, antes, abordarei alguns

aspectos histricos.

Anteriormente chegada de CSS no mbito das tecnologias voltadas ao

desenvolvimento para web (antes de 1996), a aparncia dos elementos das pginas

era especificada/controlada atravs de, basicamente, tags (X)HTML. Se fosse

preciso especificar, por exemplo, que os ttulos principais dos documentos fossem

vermelhos e tivessem um tamanho especial, poderia se usar:

Ttulo

Muito bem. Imagine um website com 10 ou 20 pginas, e todas elas com um ttulo

principal. Se por algum motivo voc tivesse que alterar a aparncia destes ttulos

(por solicitao do cliente, por exemplo), mudando a cor de vermelho para laranja,

o que precisaria ser feito? Exatamente: ir em cada marcao de ttulo principal e

alterar a propriedade color, da tag font, para a cor necessria. demorado e

chato, mas tudo bem... Afinal de contas, o cliente precisa disso (e,conseqentemente, voc tambm).

E se, ao invs de 10 ou 20 pginas, o website tivesse 40 ou 80 pginas e a

modificao solicitada abrangesse no somente os ttulos principais, mas os

secundrios e tercirios, alm da mudana da cor de todos os links? Um pouco mais

complicado? E se houvesse um prazo para fazer isso em uma hora, pois o cliente

precisa das modificaes para apresentar seu site a um scio ou potencialcomprador?

Essa mistura de ambientes (contedo e apresentao) certamente prejudicial

para todas as partes envolvidas na produo de pginas www. Alm das variveis

tempo e pacincia, pense em credibilidade, disponibilidade e prejuzo (pois

tempo dinheiro, e perda de tempo para atualizar um site e/ou poder tratar a

feitura de um novo, perda de dinheiro).



14/60

No exemplo acima citado, utilizando CSS o trabalho de alterao de todos os ttulos

primrios, secundrios e tercirios e links das pginas poderia ter sido realizado em

poucos minutos7 (com o estudo dos tpicos subseqentes, ser possvel entender

como). Seria possvel, para o desenvolvedor, realizar o trabalho muito antes do

prazo estabelecido terminar, sem que, com isso, ele tivesse uma crise de nervos e

pacincia. Com isso, ele poderia concentrar seus esforos na feitura ou manuteno

do site de outro cliente (ou conseguir outro trabalho, caso no tivesse mais pginas

para mexer8).

Mas a experincia deste catico exemplo que apresentei no precisa ser vivenciada

por nenhum desenvolvedor, caso este escolha adotar o desenvolvimento em

camadas e separar totalmente o contedo da apresentao nas pginas que faz.

Foi para melhorar a vida/trabalho dos desenvolvedores (e clientes) que as folhas de

estilo foram idealizadas e sua tecnologia desenvolvida! atravs delas que,

atualmente, pode-se realizar um trabalho mais consistente, profissional, moderno e

mais facilmente manutenvel.

Respondendo pergunta do presente tpico, CSS, ou folha de estilo em

cascata, um arquivo que contm especificaes de como devem serexibidos (estilizados) os elementos das pginas de um website, ou seja,

tags (X)HTML9.

7 De 3 a 5, mais ou menos.8 Melhor ainda: assistir a um anime! (-;9 E, de novo, seu ancestral o desenvolvimento de softwares. Por exemplo: em um editor de texto estilo M$ Word,

BrOffice, etc, como voc acha que, quando voc especifica que um bloco de texto um pargrafo, ele altera suaaparncia segundo um estilo pr-especificado?



15/60

VANTAGENS EM SE USAR CSS

Este tpico serve para aqueles cujo significado, importncia e utilidade das folhas

de estilo ainda no tenha ficado suficientemente claros. Talvez eu at ajude os mais

experientes a recordar de algumas coisas. (-;

SEPARAO DAS CAMADAS DE DESENVOLVIMENTO10

Como j mencionado, ao se utilizar as folhas de estilo, a proposta da separao de

todo o material em camadas pode ser cumprida.

Enquanto a camada de contedo vai sendo codificada em (X)HTML, a camada de

apresentao, por sua vez, vai sendo feita de forma separada e totalmente

independente, via CSS11.

E isso pode (e, preferencialmente, deve) ser feito por pessoas ou equipes

diferenciadas, com qualificao especial para as diferentes tarefas, poupando

tempo e aumentando a produtividade do grupo ou empresa (aumentando, dessa

forma, a lucratividade e poupando tempo).

WEBSITES MAIS LEVES

Pelo fato de se utilizar a separao em camadas (e, conseqentemente, a

apresentao das pginas ficar especificada em um arquivo parte), a largura de

banda fica reduzida, e isso acarreta em diminuio de custos12.

Via CSS, possvel criar efeitos sofisticados/arrojados, anteriormente s alcanadoscom a utilizao de tecnologias comoJava eJavascript, que so mais pesadas.

10 , estou dando nfase a essa questo! Quando conheci este mtodo de produo fiquei to perplexo com suas vantagens(e atrocidades que cometia na utilizao do antigo mtodo), que isso no poderia ser de outra forma. Tomara que todoaquele que est iniciando na carreira de desenvolvedor web tenha a sorte de j comear trabalhando com separao decamadas!

11 Caso essa independncia toda a qual me refiro constantemente ainda no tenha sido aclarada, imagine que voc podealterar TODA a aparncia do website sem alterar sequer 1 caracter na camada de contedo. Uma empresa, por exemplo,pode alterar a aparncia de sua loja virtual conforme datas comemorativas: no natal, as pginas contero flocos de nevee sacos de presente, na pscoa, a televiso ser ofertada em um ambiente achocolatado. Recomendo que visitehttp://www.csszengarden.com/.

12 Algum sempre paga pelo consumo de banda...

http://www.csszengarden.com/http://www.csszengarden.com/http://www.csszengarden.com/


16/60

CONTROLE TOTAL SOBRE O LAYOUT

H um antiquado mtodo de estruturao do layoutde websites: ele apregoa que

grficos e a disposio dos elementos que compem as pginas devem ser

montados utilizando-se tabelas e remendando possveis falhas de estruturao

com o advento de pequenas imagens ocultas (os famosos gifs transparentes).

Caso seja necessrio alterar, por exemplo, a posio de um menu que est na

esquerda, para a direita, l se vo horas, dias, semanas de trabalho braal,

dependendo do tamanho do website; essa tarefa pode at ser feita mais

rapidamente utilizando-se templates de editores WYSIWYG13, no entanto, alguns

poluem tanto o cdigo-fonte que fica quase que literalmente impossvel prestar

algum tipo de manuteno futura.

Quando se utiliza as folhas de estilo para a estruturao de layouts, esse problema

desaparece! Um menu pode ser deslocado de um lado para outro da pgina com a

mesma rapidez que se altera a cor de todos seus textos: poucos minutos!

DIFERENTES ESTILOS PARA DIFERENTES MDIAS

Com as folhas de estilo possvel especificar estilos (aparncias) diferenciados para

diversos tipos de mdia, tais como o monitor, webTV, handheld, dispositivos braile,

dentre outros.

Alm disso, utilizando determinadas tcnicas CSS, pode-se fazer um site cujo

layout seja adaptvel a qualquer resoluo de tela, terminando com o clssico

problema de reproduo de pginas para diferentes resolues e controle destas via

scripts incorporados.

E mais: mesmo que algum esteja navegando com a exibio de estilos e/ou

imagens desativada, ou mesmo atravs de browsers com suporte a somente textos

(tais como o Lynx), o contedo do site, na ntegra, pode ser visualizado.

13 Exemplos de editores WYSIWYG: Quanta+, Bluefish, Dreamweaver, HTML-Kit, NVU, HTMLGate Free...



17/60



18/60

CAPTULO 2

CODIFICAO CSS

Neste captulo abordarei a codificao CSS,

propriamente dita. Apresentarei desde a

sintaxe bsica e formas de insero (tipos deCSS) at chegar aos seletores avanados.



19/60



20/60

FUNDAMENTOS DE CSS

Antes de passar ao estudo de como efetivamente estilizar os elementos de um

website, extremamente necessria mais uma parte terica.

Os conceitos que apresentarei a seguir so a base para o entendimento de todas as

maneiras e tcnicas de utilizao de CSS, portanto, devem ser estudadas

minuciosamente a fim de se entender o tema de forma satisfatria.

Frisando: grande parte do que apresento aqui , na verdade, uma compilao de

outros materiais que encontrei em apostilas virtuais e websites. Conforme o texto

prossiga, prestarei os merecidos crditos.

COMO ESCREVER CSS (SINTAXE)14

Todas as linguagens de marcao e programao devem ser norteadas por

convenes, regras de escrita, sem as quais sua efetiva aplicao no seria

possvel. De igual maneira, para as folhas de estilo em cascata foram estipuladas

convenes, tratados, formas para que a padronizao de sua codificao fosse

possvel.

Essas regras, esses padres de escrita, essas convenes, podem ser chamadas

sintaxe, e atravs dela que se pode escrever cdigos em CSS (e nas linguagens

de programao/marcao, tambm)15.

Regras

Segundo o que consta na documentao oficial do W3C Folhas de Estilo CSS, nvel

1, de 17 de dezembro de 1996, revisada em 11 de janeiro de 199916, uma regra

composta de duas partes principais: um selector (sic) [...] e uma declarao [...].

Por sua vez, esta declarao tambm possui duas partes: uma propriedade [...] e

seu valor [...].

14 Para os estudos a seguir, o foco ser para CSS externo. Se no souber o que isso, calma, mais frente ser explicado.15 Ateno: esta palavra apresenta diferentes significaes, dependendo do contexto e rea em que usada.16 http://www.w3.org/TR/1999/REC-CSS1-19990111

http://www.w3.org/TR/1999/REC-CSS1-19990111http://www.w3.org/TR/1999/REC-CSS1-19990111


21/60

Ou seja, ao se codificar as folhas de estilo em cascata se est falando,

tecnicamente, em manipulao de regras. E estas regras, por sua vez, so

compostas por 3 partes:seletor,propriedade e valor.

Portanto, a sintaxe genrica de uma declarao CSS simples a seguinte:

Na qual:

seletor representa, em um primeiro momento, as tags (X)HTML, tais como

pargrafos (p) e ttulos primrios (h1), e, em um segundo momento, divs, spans,ids, classes epseudo-elementos (que sero explicados posteriormente).

propriedade assumindo parmetros que podem ser controlados atravs das

folhas de estilo, ou, praticamente falando, o atributo do seletor que ser

modificado.

valor como, nas palavras de Maurcio Samy Silva, o Maujor17, a caracterstica

especfica a ser assumida pela propriedade.

E, atravs da frmula acima, tambm pode-se observar mais algumas questes a

respeito da sintaxe: logo aps a declarao do seletor, as propriedades escolhidas

devem ser postas entre chaves ({ e }) e, seu(s) respectivo(s) valor(es),

declarado(s) logo aps dois-pontos (:) e finalizado(s)/separado(s) com um ponto-

e-vrgula(;).

Ficou um pouco confuso depois da explicao? Basta olhar novamente (e quantas

vezes forem necessrias) a frmula e ficar atento aos exemplos a seguir.

Se eu quiser que a cor da letra de todos os pargrafos do website sejam de uma

cor azul, uso o seguinte:

17 http://www.maujor.com/


seletor { propriedade: valor; }


22/60

p { color: #369; }

Repetindo: eu quero que todos os pargrafos (p) tenha uma cor (color) azul (#369).

Perceba que especifiquei a cor atravs da codificao hexadecimal18.

Depois disso, se revolver definir um tamanho para as letras, acrescentaria:

p { color: #369; font-size: 14px; }

Est ficando mais claro, agora? Assim como toda rea de conhecimento a ser

aprendida, inicialmente pode ser que parea muito difcil e complexo, entretanto,

com o passar do tempo e continuidade no estudo, tudo vai ficando melhor19.

Aconselho que, em regras em que o seletor possua vrias propriedades, voc

organize a codificao da seguinte maneira:

p {

color: #369;

font-size: 14px;

}

Tanto a primeira regra, quanto esta, funcionaro de igual maneira e perfeitamente,

no entanto, quando se opta pela segunda maneira, seu cdigo fica mais legvel e

voc conseguir ter mais facilidade em prestar manutenes necessrias20.

Mesmo se isso no fizer sentido pra voc, agora, saiba do seguinte: uma folha de

estilos para um website relativamente pequeno e simples, de 8 ou 10 pginas, pode

facilmente ultrapassar 80 regras. E, claro, nem a metade delas ter apenas uma

propriedade. Inclusive, em algumas, so necessrias mais de 10! Pense nisso.

Outra coisa: na verdade, para a declarao da ltima propriedade de uma regra,

no necessrio que se coloque o ponto-e-vrgula (;); entretanto, aconselho que

voc faa isso. A experincia mostra que muito fcil, depois de se inserir uma

nova propriedade ao final de uma regra, esquecer-se de incluir o ponto e vrgula na

(agora) penltima propriedade, o que acarreta em erros em sua estilizao.

18 Faa uma pesquisa a respeito, caso no saiba o que isso.19 Esse foi o momento consolo. (-:20 Algumas pessoas (dentre as quais eu me incluo) costumam estabelecer critrios para a insero das propriedades, como

ordem alfabtica, por exemplo.



23/60

Agrupamento21

Pode ser que voc queira especificar as mesmas propriedades para seletores

diferentes. Neste caso, possvel que voc o faa declarando to-somente uma

regra, separando os seletores por vrgula (,). Se, por exemplo, quiser que os

textos dos pargrafos e os ttulos secundrio e tercirio sejam de uma corvermelha, poderia usar o seguinte:

p, h2, h3 { color: #F00; }

Efeito Cascata

Se ainda no se perguntou o motivo desse nome doido que folha de estilo em

cascata, a hora agora. Afinal, eles no batizariam uma tecnologia toimportante de forma a no representar nada, no verdade? Esse cascata no

nome, remete a algo muitssimo importante: o mtodo pelo qual conflitos entre

regras so tratados. Palma, palma, no priemos cnico!

Quando temos um documento com vrias regras CSS, acontece de determinadas

regras terem um peso a mais, em detrimento de outras; serem mais especficas

ou, como dizem alguns, mais importantes. E, no momento de interpretar um cdigoCSS, o renderizador deve saber qual o peso de cada declarao, e como as regras

se interrelacionam-se entre si22.

H uma ordem pr-estabelecida para o efeito cascata, que a seguinte23:

1. Localizadas todas as regras aplicveis ao seletor/propriedade, determina-se a

especificidade de cada uma delas. A regra mais especifica entre as

conflitantes ser aplicada. Se no for encontrada uma (ou mais) regra

aplicvel ao elemento (X)HTML, este herdar as propriedades de estilo de seu

elemento pai. No havendo elemento pai ser aplicado o valor inicial default

de estilo para aquele elemento

2.Regras com declarao importante (!important) tem prioridade sobre aquelas

21 Alguns chamam de grupamento. E agora, qual correto? Ahhh, vou deixar assim, mesmo...22 Uma orao bem filosfica, h?23 Extrado do FAQ sobre CSS da pgina do Maujor (http://www.maujor.com/), com ligeiras modificaes.



24/60

sem a declarao. Se o autor e o usurio declaram regras conflitantes com

!important, as do usurio tm prioridade sobre as do autor24

3.Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo

autor, tm prioridade sobre aquelas declaradas pelo usurio. Regras do

usurio com maior especificidade que aquelas do autor, tm a prioridade.Regras com igual especificidade declaradas pelo autor tm prioridade sobre as

do usurio. Regras do autor e do usurio tm prioridade sobre as regras

defaultdas aplicaes do usurio (ex.: o browser)

4. Regras mais especficas tm a prioridade sobre as menos especficas

5. Entre regras de mesmo peso, tm prioridade aquelas declaradas por ltimo

na sequncia das regras na folha de estilos

6. Folhas de estilo inline, incorporadas, lincadas e importadas (@import), nesta

ordem, tm do maior para o menor peso (estilos inline tm o maior peso).

Entre vrias folhas de estilo lincadas tm maior prioridade aquela importada

por ltimo (mais prxima da tag head). O mesmo ocorre entre as folhas

importadas (@import)25

Herana

Um outro significado para cascata, na significao de CSS (folha de estilo em

cascata), seria herana.

Em CSS, os seletores so tratados como membros de uma famlia hierarquicamente

organizada. H pais, filhos, netos, irmos, etc. Mais ou menos como na vida real,os descendentes herdam os atributos de seus ascendentes.

Observe o seguinte trecho de cdigo XHTML:

24 O !importantser explicado em outra parte da apostila25 O @import no ser explicado nesta apostila... Faa uma pesquisa para saber mais a respeito.



25/60

Este o nosso mundo, o que demais nunca o bastante,

A primeira vez: sempre a ltima chance,

Ningum v onde chegamos:

Os assassinos esto livres, ns no

estamos

De acordo com a metodologia CSS, pelo fato de a tagstrong estar dentro da

tagp, ela sua descendente direta, sua filha (ou filho, se preferir); por sua vez, a

tagp filha de body (conseqentemente, strong neta de body). Logo, temos aseguinte hierarquia nas geraes desta famlia:body -> p -> strong.

Pelo que foi exposto a pouco, se voc especificar que body ter suas letras de uma

cor azul e pertencer a uma famlia de fontes serifadas, automaticamente estar

especificando que sua filha, p, e sua neta, strong, tero a mesma cor e serifa.

Lembre-se de que os descendentes herdam os atributos de seus respectivosascendentes.

Assim como na vida real, os descendentes no necessariamente precisam carregar

consigo todas as caractersticas de seus ascendentes. Basta querer mudar! Se for

preciso que strong tenha uma cor diferenciada da de sua me e av, no h

problemas quanto a isso. Observe:

body {

color: #00F;

font-family: serif;

}

strong { color: #0F0; }

Com isso, body e p tero suas letras com uma cor azul e sua fonte pertencente

uma famlia de fontes serifadas e, strong, uma cor verde (e continuar com o



26/60

mesmo tipo de fonte de seus ascendentes, j que nenhuma propriedade que diga o

contrrio foi declarada).

Seletores ID e Classe

H duas propriedades que elevam bastante as potencialidades das folhas de estilo:classe (class) e identificador (id). Elas permitem que voc aproveite mais o que as

folhas de estilo tm a oferecer.

id

Os seletores ID so representados por uma tralha (#). Sua funo estilizar um

elemento que tenha um nome em especial, e atente-se expresso um

elemento, pois no pode haver IDs com nomes iguais numa mesma pgina, ou

seja, um ID deve ser exclusivo, individual, singular, ou quaisquer outras

expresses redundantes que indiquem seu carter nico em um documento.

Veja um exemplo de seletor ID:

#paragrafoDestaque {

color: #F00;font-size: 120%;

}

Portanto, em uma pgina (ou conjunto de pginas) que receber(o) esta

estilizao, poder haver somente um pargrafo destaque, e seria algo como:

Este um texto com destaque!

Perceba que, na hora de especificar a qual ID um elemento pertence, no

necessrio incluir a tralha (#), basta colocar seu nome.

Tambm pode haver a presena de IDs nas hierarquias mais profundas dos

elementos das pginas. Algo como:

p a em#maior { font-size: 150%; }



27/60

Perceba que a regra que acaba de ser apresentada surtir efeito somente em uma

tagem de ID maior, que esteja presente em um link (a) dentro de um pargrafo

(p)26:

Para maiores informaes, acesse o site

da World Wide Web Consortium!

classe

Diferentemente dos IDs, as classes podem ser atribudas a elementos diferentes

na(s) pgina(s) de um website.

Pode-se, por exemplo, especificar que haver dois tipos de pargrafo em seuwebsite: um com a fonte de uma cor vermelha e famlia de fontes com serifa e

outro com a fonte de uma cor verde e famlia de fontes sem serifa. Para facilitar o

entendimento, vou apresentar um exemplo:

p.vermelho {

color: #F00;

font-family: serif;

}

p.verde {color: #0F0;font-family: sans-serif;

}

Fique atendo sintaxe: aps a declarao do seletor, h um ponto (.) e, logo

depois, o nome escolhido.

Com isso, estabeleci duas regras, ou, poderia se dizer, duas classes de pargrafo.

Agora, minha folha de estilo possui uma classe de pargrafo de nome vermelho e

outra de nome verde, cada uma delas com diferentes propriedades e, por

conseqncia, realizar diferentes estilizaes.

26 Este tipo de regra ser mais bem explicada um pouco frente.



28/60

Em algum momento do texto, caso eu queira me valer das respectivas classes,

basta inserir seus nomes com a propriedade class na tagp. Veja:

primeiro pargrafo

segundo pargrafo

terceiro pargrafo

quarto pargrafo

quinto pargrafo

Perceba at que ponto as classes podem ser teis: se eu declaro uma classe

genrica, ou seja, que no pertena a nenhum seletor (X)HTML especfico, posso

us-la em qualquer tag. Exemplo:

.azul { color: #00F; }

Agora posso utilizar isso da seguinte maneira:

Teste

primeiro pargrafo do teste.

segundo pargrafo do teste.

Viu? Quando crio uma classe genrica posso utiliz-la em qualquertag que queira,

conseguindo os resultados pretendidos.

Div e Span

DIV e SPAN so duas tags (X)HTML comuns. Com elas, possvel que se estenda

as possibilidades de estilizao numa folha de estilos.

div

Essa tag, quando usada em um documento puro (X)HTML, na verdade, faz nada!

Por outro lado, quando nos valemos de uma estilizao CSS, podemos aproveitar, e

muito, essa diviso feita no cdigo, criando regras a partir de IDs e classes em

DIVs. Observe esse cdigo XHTML:



29/60

Este um pargrafo normal, dentro de uma DIV.

No momento da renderizao, aparecer somente um texto puro, mesmo.

Observe, ento, como podemos fazer para aplicar um estilo personalizado, apenas

atribuindo um ID para a DIV em questo. O XHTML ficaria assim:

Este um pargrafo normal, dentro de uma DIV.

E o CSS:

#personalizado {

background-color: #396;

border: 3px double #369;

color: #FFF;

padding: 5px;

width: 40%;

}

Perceba: com a estilizao do trecho XHTML por essa regra CSS, a DIV que, at

ento, no tinha muito utilidade, transforma-se em um poderoso meio para

estilizar pginas e compor layouts.

span

O SPAN como se fosse uma DIV em miniatura. A DIV, que a diviso que sepode fazer em pginas (X)HTML, como se fosse de abrangncia maior, ou seja,

usa-se o SPAN para estilizar pequeninos trechos em seu cdigo de marcao. O

princpio de aplicao o mesmo, podendo, os SPANs, serem estilizados quando,

para eles, se atribui um ID ou classe. Olha o XHTML:

Com SPANS, pode-se

estilizar pequenos trechos de cdigo!



30/60

Com o seguinte CSS:

.spanDoido {

background-color: #F00;

color: #FFF;

margin-bottom: 5px;

padding: 2px;

}

com o uso de SPANs que se pode, por exemplo, especificar que determinada

palavra ou frase, num documento (X)HTML, de outro idioma, o que facilita

bastante a vida de quem precisa de um sintetizador de voz para navegar pela web:

Campanha de sade pblica: "Microsoft

, nem morto"!

Comentrios

Para facilitar o entendimento futuro de um cdigo que est sendo escrito, possvel

que se comente suas folhas de estilo, ou seja, voc pode, nos pontos que achar

conveniente, digitar textos, para si mesmo ou outras pessoas, com explicaes,

conceitos, idia, planos de implementao futura, trechos de cdigo que precisemser isolados para testes, ou qualquer outra coisa que quiser.

E, ao fazer isso, suas estilizaes no sero prejudicadas, j que quando algum tipo

de mdia interpreta um arquivo .css, desconsidera o que est comentado, quer

dizer, no toma aquele trecho como se fosse alguma inteno de declarar uma

regra, ou algo do tipo.

Os comentrios, em CSS, vm envoltos entre o par de caracteres barra-asterisco

(/*), asterisco-barra (*/).

Isto quer dizer que tudo aquilo que estiver entre este par de caracteres no ser

interpretado na hora da montagem das estilizaes. :



31/60

h2 { font-size: 120%; }

/*estou fazendo um comentrio em meu arquivo CSS,e ele pode, inclusive, ter quantas linhas eu quiser*/

p { color: #FF0; }

MANEIRAS DE SE INSERIR CSS

Basicamente, h 3 maneiras de se inserir CSS em um documento: insero inline,

insero no prprio documento e chamar uma folha externa (respectivamente

chamados de CSS inline, CSS incorporado e CSS externo).

Css Inline

Para se inserir um CSS inline, o esquema colocar as declaraes como se fossem

valores da propriedade (X)HTML style. Exemplo:

CSS!

Pde-se perceber o motivo pelo qual esse tipo de CSS no o mais usado: no h

tanta flexibilidade para a realizao de alteraes, haja vista que a regra aplica-sesomente ao elemento que recebeu a estilizao.

Css Incorporado

Para esse tipo de CSS, as regras so colocadas no prprio documento, na tag

head. Sua abrangncia to-somente a prpria pgina em que esto inseridas,

ou seja, possui um grau mediano de flexibilidade, j que potenciais alteraes

aplicar-se-o ao documento atual, e a nenhum outro. A sintaxe a seguinte:

[regras CSS]



32/60

Css Externo

Esse o tipo de insero de CSS mais usado. Nessa modalidade, as regras CSS so

escritas em um arquivo parte do (X)HTML e chamados para as estilizaes.

Voc pode preparar as regras at em editores de texto simples, como KEdit ou

Bloco de Notas. A nica observao no se esquecer de salvar o arquivo com aextenso .css.

no CSS externo que o verdadeiro poder est! H!

J que todos os documentos (X)HTML de seu website estaro chamando a mesma

folha de estilos, se precisar fazer alguma alterao em CSS, basta editar seu

arquivinho que, na mesma hora, as mudanas se aplicaro ao site por completo27!

Basta colocar o seguinte, na tag head dos documentos:

27 Agora acredita no que est escrito na pgina 14?



33/60

SELETORES AVANADOS

Lembra-se do exemplo da famlia CSS28? Em CSS existem seletores especiais

para que haja um maior controle do desenvolvedor quando este precisa trabalhar

com estilizaes mais especficas, facilitando o desenvolvimento em geral.

Antes de entrar um pouco mais a fundo no assunto, cabe mostrar um pequeno

conceito sobre os principais graus de parentesco entre elementos que recebem

estilizao. Observe a tabela:

ELEMENTO EXPLICAOdescendente elemento que seja filho, neto, bisneto (e assim por

diante) de outro elemento, dentro da hierarquiapresente na pgina

ascendente (ou ancestral) elemento que seja pai, av, bisav (e assim pordiante) de outro elemento, dentro da hierarquiapresente na pgina

pai elemento imediatamente anterior a outro, dentro dahierarquia presente na pgina

filho elemento imediatamente posterior a outro, dentro dahierarquia presente na pgina

irmo elemento adjacente a outro, dentro da hierarquiapresente na pgina; ambos filhos do mesmo pai

S para exemplificar, novamente:

Vocs esperam uma interveno divina

Mas no sabem que o tempo agora est contra vocs,

Vocs se perdem no meio de tanto medo,

De no conseguir dinheiro pra comprar sem se vender

No caso, o pargrafo (

) filho de (e, conseqentemente, seu

pai) e as tags , suas netas. Por falar nelas, reparem que so irms (filhas do

mesmo pai:

).

28 Pgina 24.



34/60

Perceba quantas relaes de hierarquia (ou parentesco, se preferir) existem em um

simples pequeno pargrafo. Pense em quantos tatatataranetos podem existir em

um documento mais complexo. Por esse motivo de essencial importncia que se

preste bastante ateno ao conceitos deste tpico e, importantssimo, que se

pratique imediatamente e que se faa testeS29 de tudo o que se vai lendo por aqui.

Muito bem, agora observe esta tabela30 que mostra a sintaxe genrica das relaes

hierrquicas que podem ser usadas com as folhas de estilo:

SELETOR FORMATO DESCRIOuniversal * relacionado a qualquer elemento

tipo E relacionado ao elemento E

classe .info relacionado a qualquer elemento cuja classeseja info

id #teste relacionado ao elemento de id teste

descendente E Frelacionado a qualquer elemento F que sejadescendente do elemento E

filho E > Frelacionado a qualquer elemento F que sejafilho do elemento E

irmo adjacente E + Frelacionado a qualquer elemento F que sigaimediatamente ao elemento E

atributo E[att]relacionado a qualquer elemento E que tenhaum atributo att, independente do valor desteatributo

atributo E[att=val]relacionado a qualquer elemento E que tenhaum atributo att de valor igual a val

atributo E[att~=val]

relacionado a qualquer elemento E que tenhaum atributo att de valor igual a um valorqualquer separado por um espao de um valorigual a val

atributo E[att|=val]

relacionado a qualquer elemento E que tenhaum atributo att de valor igual a um valorqualquer separado por um hfen de um valorcomeando com val

pseudo-classe:first-child

E:first-childrelacionado ao elemento E que for o primeirofilho do seu elemento pai

pseudo-classe E:link relacionado a link ainda no visitado (:link) ou

29 Com S, mesmo, para enfatizar que devem ser muitosss!30 Adaptada da traduo feita pelo Maujor (http://www.maujor.com/) do artigo CSS2.1 selectors, de Roger Johansson

(http://www.456bereastreet.com/).

http://www.maujor.com/http://www.456bereastreet.com/http://www.maujor.com/http://www.456bereastreet.com/


35/60

link E:visited com link j visitado (:visited).

pseudo-classesdinmicas

E:hoverE:focusE:active

relacionado a E quando de uma ao dousurio

pseudo-classe:language

E:lang(c) relacionado a elementos E escritos no idioma c

pseudo-elemento:first-line

E:first-line relacionado primeira linha do elemento E

pseudo-elemento:first-letter

E:first-letter relacionado primeira letra do elemento E

pseudo-elementos:before e :after

E:beforeE:after

usado para gerar contedo antes ou depois docontedo do elemento E

SELETOR UNIVERSAL

O seletor universal representado por um asterisco (*), e relaciona-se com

qualquer elemento presente no(s) documento(s). Para facilitar a fixao, basta

associ-lo ao caracter curinga *, usado para se fazer buscas em arquivos do

computador.

Quando, em uma folha de estilos, representamos, por exemplo,

.info { color: #F00; }

pode-se considerar que o que est posto

*.info { color: #F00; }

Pois este o elemento universal, ou seja, querendo ou no, antecede todos os

outros.

Perceba que, em virtude da herana31, caso se especifique alguma estilizao para

o seletor universal, isto ser herdado por todos os outros elementos do

documento.

Tenha bom senso e seja cuidadoso(a) ao utiliz-lo!

31 Pgina 24.



36/60

SELETOR ID E SELETOR CLASSE

Estes j foram explicados. Volte s pginas 26 e 27, respectivamente.

SELETOR DESCENDENTE

Como descrito na tabela das sintaxes genricas de seletores CSS, este seletor

relacionado a qualquer elemento que seja descendente de outro. A estilizao

feita atravs de seletores separados por um espao. Veja:

ul li { font-size: 16px; }

Neste caso, todo item de lista no-ordenada ter tamanho de 16px.

Veja como possvel elaborar regras mais avanadas:

ul#teste li.info {

color: #369;

font-size: 22px;

}

Esta ser aplicada a qualquer item de lista que seja da classe info, que esteja

dentro de uma lista no ordenada de ID teste.

Se as duas regras mostradas estivessem presentes na mesma folha de estilos,

qualquer item de lista no ordenada teria um tamanho de 16px, com exceo dos

que tivessem a classe infoe estivessem dentro de uma lista no-ordenada com id

teste.

um avano nas especificaes de estilo! Utilizando os seletores, as regras tornam-

se mais refinadas e especficas, mais elegantes e profissionais.



37/60

SELETOR FILHO

Como mostrado na tabela das sintaxes genricas de seletores CSS, o seletor filho

relaciona-se a qualquer elemento que seja filho de outro. Sua estilizao feita

atravs de seletores separados por um sinal de maior que (>); o seletor pai, fica

esquerda do sinal de maior, e, o filho, direita. Observe o trecho XHTML:

item a

item b

subitem alpha

subitem beta

item c

Caso se tenha uma regra de estilizao como esta:

ul > li { color:#00F; }

Ela mudar a cor da fonte somente de item a, item b e item c, e subitem

alpha e subitem beta no tero sua cor alterada.

Perceba que isso acontece pelo fato de as tags que esto dentro da lista

ordenada no serem filhas de . Como a estilizao foi feita utilizando-se o

seletor filho, normal que isso tenha acontecido.

Caso a regra fosse feita sem o caracter >, ou seja, atravs de simplesmente

seletor descendente, os subitem alpha e subitem beta tambm seriam afetados,

dado que so descentes (no-diretos) de .



38/60

SELETOR IRMO ADJACENTE

Segundo explicitado na tabela das sintaxes genricas de seletores CSS, este seletor

relacionado a qualquer elemento que siga imediatamente ao elemento anterior,

que deve ser o mesmo. Sua estilizao feita atravs de seletores separados por

um sinal de adio (+) Observe o seguinte:

Posso estilizar de uma forma mais eficiente!

Basta aprender a usar os seletores CSS!

Imagine uma regra para isso:

p + p { color: #F00; }

Com isso, somente o segundo pargrafo ter sua cor alterada, dado que irmo

adjacente do primeiro (ambos filhos de , no caso). Com isso, todos os

pargrafos, com exceo do primeiro, sero afetados pela estilizao.

Se o trecho XHTML fosse:

Posso estilizar de uma forma mais eficiente!

Basta aprender a usar os seletores CSS!

isso, a!

O segundo e terceiro pargrafos seriam afetados pela estilizao (e todos os que

vierem depois). Se se quisesse, por exemplo, que o primeiro e segundo pargrafos

no recebessem a estilizao, a regra seria:

p + p + p { color: #F00; }

E todos os demais pargrafos do documento seriam de uma cor vermelha.

No pense que h um limite fixo para a especificao de estilizaes de irmos,

filhos, descendentes ou quaisquer outros tipos de regras CSS. O limite para as

especificaes de estilizao so os elementos presentes no documento (e sua

imaginao).



39/60

SELETORES DE ATRIBUTO

Segundo explicitado na tabela das sintaxes genricas de seletores CSS, este tipo de

seletores podem ser usados de algumas maneiras diferentes, resultando em

diferentes tipos de estilizaes.

E[att]

Esta sintaxe diz respeito ao elemento E, de atributo att, independentemente do

valor deste. Exemplos:

a[rel] { font-variant: small-caps; }

No cdigo acima, todos os links que possurem o atributo rel, tero sua fonteexibida em small-caps, que mais ou menos como se o texto tivesse sido digitado

com o caps lockligado.

E[att=val]

Neste caso, a sintaxe refere ao elemento E, que tenha o atributo att de valor

val, como, por exemplo:

p[class=citacao] {

font-size: 80%;

margin-left: 20%;

}

No caso acima, todo pargrafo que for da classe citacao, ser exibido com a letra

com 80% de tamanho e com uma margem esquerda de 20%.

E[att~=val]

Este tipo de seletor de atributo bem parecido com o anterior, com a diferena de

que o valor val do atributo att no precisa necessariamente ser idntico ao

especificado, mas precisa cont-lo. Uma aplicao til que vejo para este tipo de

seletor quando se especifica mais de uma classe para um elemento. Por exemplo,

se se tivesse o seguinte trecho de cdigo CSS:



40/60

a[rel~=friend] {

font-size: 200%;

}

E, na pgina que recebe estilizao, o seguinte:

saul

Neste caso, todo linkem que o atributo rel tiver um friend, a estilizao ser

aplicada, independentemente de no haversomente ele.

E[att|=val]

Este, na verdade, no muito encontrado nas estilizaes CSS, em geral. A nica

aplicao que j vi para este seletor quando se especifica uma linguagem para

determinado trecho de cdigo, dado que algumas contm um hfen. Se, em um

blog, por exemplo, este CSS:

span [lang|=pt] { font-style: italic; }

estilizando este trecho:


41/60

PSEUDO-CLASSES

A palavra pseudo tem origem grega, e quer dizer falso. aquela histria do

pseudo-intelectual de miolo mole, do Caetano, lembra-se? Enfim, em CSS, as

pseudo-classes so falsas classes nativas, que podem ser utilizadas de formas

bastante interessantes.

:first-child

Essa pseudo-classe refere-se ao primeiro filho de um elemento presente no

documento; o primognito. Algo como o irmo mais velho preferido, que pode

fazer um monte de sacanagem com os irmos mais novos e nada acontece (isso

no acorre no CSS, s na vida real). Exemplo:

Eu deso desta solido,

disparo coisas sobre um cho de giz

H meros devaneios tolos a me torturar

Fotografias recortadas em jornais de folhas, amide

Se houvesse uma estilizao CSS em um documento destes, como algo do tipo:

p a:first-child {

color: #F00;

font-variant: small-caps;

}

O linkda palavra solido seria estilizado, e, os subseqentes, no. E mais: vale

para cada pargrafo, ou seja, no restante do documento, sempre que houver um

pargrafo e, nele, links, o primeiro deles ser sempre estilizado, segundo aquela

regra.

Pseudo-classes Para Links

Apesar de no estarem juntas na tabela das sintaxes genricas de seletores CSS,

vou tratar as pseudo-classes :link, :visited, :hover, :active e :focus de uma s vez.



42/60

:link

Esta pseudo-classe refere-se a links no documento que ainda no tenha sido

visitados. Um exemplo de estilizao:

a:link {

color: #369;

text-decoration: underline overline;

}

Ou seja, para os links em um documento que contenha uma folha de estilos com

essa regra, eles sero de uma cor azul e sublinhados e sobrelinhados.

:visitedEsta pseudo-classe refere-se a links que j tenham sido visitados. Por exemplo:

a:visited {

color: #39C;

text-decoration: none;

}

Neste caso, os links j visitados teriam uma cor azul (mais clara que a dos links doexemplo acima) e no seriam sublinhados nem sobrelinhados.

:hover

Quando se usa uma regra com a pseudo-classe :hover, tem-se o objetivo de

estilizar links quando o ponteiro do mouse est em cima deles. Exemplo:

a:hover {


color: #FFF;


}

No caso, quando o usurio passa o mouse por cima do link, ele ficar com uma

cor de fundo azul, o texto com a cor branca e sem sublinhado nem sobrelinhado.



43/60

:active

Essa para quando o usurio clica no link, no exato momento em que ele faz isso.

Uma prtica corriqueira, para esta pseudo-classe, repetir o que j est em

:hover, dado que os usurios comuns no clicam em um linke seguram o boto;

clicam e soltam, rapidamente. Dessa forma, o estilo aparece por umas poucasfraes de segundo e praticamente imperceptvel32. Observe:

a:active {

color: #F00;


}

Quando o usurio clicar no link, seu texto ficar de uma cor vermelha e sem

sublinhado nem sobrelinhado.

ateno com as pseudo-classes para links

Em virtude do efeito cascata, deve-se, ao estilizar links com as pseudo-classes,

seguir uma ordem especfica para evitar efeitos inesperados. Como bem escreveu o

Maujor33,

se voc define a:hover ANTES de a:visited, esta prevalecer sobre a:hover e

em consequncia, o link visitado pela primeira vez assumir a regra definida

em a:visited e a partir de ento a:hover no mais funcionar naquele link pois

a:visited prevalecer sobre a:hover.

Ou seja, a ordem em que as pseudo-classes para links devem estar :

:link

:visited

:hover

:active34

32 A no ser que se especifique que o tamanho da letra vai aumentar, ou algo do tipo, que d bastante destaque.

33 http://www.maujor.com/34 Quando utilizar, tambm, a pseudo-classe :focus (prxima a ser explicada), esta deve vir antes de :active.



44/60

:focus

Esta pseudo-classe para quando algum elemento recebe foco, ou seja, como

escreveu o Maujor35, quando aceita eventos do teclado. muito usado para estilizar

elementos de formulrios, como os inputs.

input[type=text]:focus {


color: #FFF;

}

No caso, quando a pessoa acessar esse tipo de campo para insero de textos, sua

cor de fundo mudar para um tipo de verde e a cor do texto ser branca; assim

que ele passar para outro campo, tudo voltar ao que era antes de ele dar foco

quele elemento.

:lang36

A pseudo-classe para linguagem (idioma) pode ser usada para estilizar elementos

cujo contedo est escrito em uma determinada linguagem (idioma - uma lngua

para humanos e no uma linguagem de marcao). A regra a seguir define que tipo

de aspas usar para textos inline que esto escritos no idioma da Sucia:

q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

A linguagem para humanos (idioma) de um documento, normalmente

especificada pelo atributo lang em e pelo atributo xml:lang em XHTML.

PSEUDO-ELEMENTOS

Assim como as pseudo-classes, os pseudo-elementos ajudam o desenvolvedor a

economizar com a insero de DIVs e SPANs extra, e, ao mesmo tempo, possibilita

que alguns efeitos de estilizao bem interessantes possam ser realizados.

35 http://www.maujor.com/36 Tomarei emprestadas as palavras de Maujor (http://www.maujor.com/) que esto na traduo que fez do artigo CSS2.1

selectors, Part 3 (http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/), de Roger Johansson(http://www.456bereastreet.com/).

http://www.maujor.com/http://www.maujor.com/http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/http://www.456bereastreet.com/http://www.maujor.com/http://www.maujor.com/http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/http://www.456bereastreet.com/


45/60

:first-line

Como indica o prprio nome, este pseudo-elemento diz respeito primeira linha

(de pargrafos, geralmente37). Mas, at onde vai a primeira linha de um

pargrafo? Bem, na verdade, a primeira linha literalmente a primeira linha

(d). Quer dizer, a primeira linha que exibida. Se um desenvolvedor estiliza ospargrafos com :first-line, com, por exemplo38:

p:first-line {

background-color: red;

color: white;

}

Muito bem. Mas sabe o que acontece caso a janela seja redimensionada (de modo areacomodar o texto) ou o tamanho da fonte seja alterada (pelo prprio visitante)?

Isso, parabns: a estilizao vai acompanhar a primeira linha que exibida!

:first-letter39

De maneira semelhante a :first-line, esta pseudo-propriedade estiliza a primeira

letra de elementos a nvel de bloco, list-item, table-cell, table-caption e bloco inline.

Geralmente utilizada em algumas webpages para dar aquele efeitinho de primeira

letra diferente que se encontramos em jornais e revistas. Seria algo como:

#primeiroParagrafo:first-letter {


color: #FFF;

font-family: fantasy;

font-size: 200%;

padding: 2px;

}

37 Mas pode estilizar, tambm, elementos a nvel de bloco, blocos inline, table-caption ou table-cell. Na verdade, conformeconsta no documento oficial do W3C Selectors (http://www.w3.org/TR/CSS21/selector.html), a compatibilidade dessepseudo-elemento diz respeito s propriedades de font, cor e background, "word-spacing, letter-spacing, text-decoration, vertical-align, text-transform e line-height.

38 Tudo bem, tudo bem, ningum vai querer todas as primeiras linhas de seus pargrafos com fundo vermelho e letrabranca, mas s para ilustrar o conceito, p...

39 Segundo o documento Selectors (http://www.w3.org/TR/CSS21/selector.html), o :first-letterpode ser estilizado compropriedades de font, margin,padding, border, colore background, "text-decoration", "text-transform", "letter-spacing","word-spacing" (quando apropriado), "line-height", "float" e "vertical-align" (apenas se "float" for igual a "none").

http://www.w3.org/TR/CSS21/selector.htmlhttp://www.w3.org/TR/CSS21/selector.htmlhttp://www.w3.org/TR/CSS21/selector.htmlhttp://www.w3.org/TR/CSS21/selector.html


46/60

:before e :after

A significao destas palavras , respectivamente, antes e depois. Na minha

opinio, estes pseudo-elementos so os mais poderosos em CSS, pois permitem

que voc gere contedo antes e depois do elemento que receber estilizao.

Por exemplo, para exibir a URL de um linkentre parnteses, sem precisar escrev-

lo40:

.comentarios a:after {

content: " (" attr(href) ") ";

}

Ou seja, o contedo (content) que ser apresentado depois (:after) de links (a) da

classe comentarios (.comentarios) ser o atributo (attr) caminho do link (href),

que ser colocado entre parnteses ( ( [...] ) ). realmente um pouco

complicado, no incio, mas, depois de alguns testes e implementaes, facilita

bastante.

Muitas outras coisas podem ser feitas com :before e :after, como, em um

documento, organizar os ttulos primrios (h1) assim: Captulo 1: [texto do h1],

no prximo h1, ser colocado Captulo 2: [texto do h1], com o contador

automtico, ou seja, voc pode inserir os h1 normalmente, que o CSS se encarrega

de incrementar a numerao41!

COMPATIBILIDADE

Infelizmente, nem tudo so flores quando se fala em aplicar os seletores

avanados. Os navegadores mais antigos no do suporte a esse parte da

tecnologia CSS e, o que chega a ser at triste, o navegador mais usado no mundo,

o Internet Explorer(tambm conhecido como IEca), at sua penltima verso, a

6, tambm no oferece suporte a praticamente todos os seletores avanados.

Devido ao fato de a verso 7 deste navegador ser bem recente, ainda vai demorar

40 O nome da classe do exemplo foi proposital. Quis demonstrar que uma boa aplicao para o uso do pseudo-elemento:after para exibir a URL do site de algum que faz comentrios em umpost.

41 Confira o documento do W3C Generated content, automatic numbering, and lists, que pode ser acessado atravs doendereo http://www.w3.org/TR/CSS21/generate.html .

http://www.w3.org/TR/CSS21/generate.htmlhttp://www.w3.org/TR/CSS21/generate.html


47/60

alguns bons meses (ou anos) para que a maioria de seus usurios atualizem sua

verso.

De qualquer forma, ficam expostos os seletores avanados. Como pde ser visto,

eles so muito poderosos, mas devido ao que foi dito no ltimo pargrafo, ainda

devem ser usados com cautela.

Uma coisa legal de se fazer colocar alguns recursos que s funcionam em bons

navegadores (leia-se, navegadores que no sejam o IEca, tais como

Firefox/Iceweasel e Opera), sem prejudicar o funcionamento do site, como um

todo. Apenas colocar elementos para que ele fique mais interessante, quando

acessado por navegadores decentes.

A, para fazer uma contra manipulao, voc coloca no rodap: otimizado para

Firefox (por exemplo), com um linkpara pegar o browser.



48/60



49/60

CAPTULO 3

COMPLEMENTOSPara fechar a apostila, discorro, neste captulo,

sobre alguns temas que so pertinentes ao

desenvolvimento para web. Tambm indico

alguns links interessantes e/ou indispensveis.



50/60



51/60

DICAS GERAIS

Depois dessa abordagem geral sobre CSS, cabe, agora, algumas questes

referentes ao modus operandida coisa, ou seja, algumas dicas de como otimizar

seu trabalho e rendimento e como evitar frustraes futuras.

TESTAR EM VRIOS NAVEGADORES

de conhecimento geral entre os membros da comunidade de desenvolvedores o

no seguimento s normas do W3C, todas as falhas e pontos negativos intrnsecos

ao navegador Internet Explorer(frisando: o IEca).

Devido atitudes negligentes e descaso com o usurio final, a Micro$oft, mesmo

aps insistentes e emocionados apelos de variados setores e presses advindas de

empresas de grande porte, insiste em no dar suporte a inmeros elementos da

tecnologia CSS (dentre muitas outras coisas, mas estou focando no assunto da

apostila). Todos sabemos que existem motivos escusos por trs desta gracinha que

eles fazem, pois, de conhecimento mundial que a citada empresa (ou corporao,

ou sei l o qu) uma das que mais tm recursos disponveis (se no a mais) para

investir em qualquer coisa que queira42.

Se realmente seus dirigentes tivessem o mnimo de responsabilidade social e

considerao com os usurios do no menos infame Rwindows (aglutinao de

Ruim o Windows, afff!), tomariam medidas para que a qualidade final de seus

produtos se elevasse pelo menos ao ponto de no obrigar desenvolvedores

inocentes de pginas para a interneta desperdiar horas para identificar e corrigir

bugs provenientes da falta de qualidade de seu navegador meia boca43.

Desabafos parte, o que quero mostrar com esse tpico a importncia de realizar

muitos (mas muitos, mesmo) testes em navegadores diferentes durante a fase de

desenvolvimento das pginas dos websites. de suma importncia que se faa

testes em, no mnimo, 2 navegadores: Firefox/Iceweasele IEca. Preferencialmente,

42 Nem sei como eles ainda so aceitos no W3C...43 Ou exigir 1GB de RAM para rodar um efeitinho chul de flip entre janelas ou, o que o maior absurdo da histria dos

sistemas operacionais: exigir, nada mais, nada menos, que 3BG de RAM para rodar a nova verso do Rwindows emdesempenho total...



52/60

contudo, seria indicado que os testes abrangessem tambm browsers como Opera,

Konqueror, Safari44e Lynx (sim, claro!), a fim de garantir, mesmo, que o resultado

pretendido ser semelhante em diversas situaes e plataformas45.

E perceba a ordem que est l: Firefox/Iceweasel e, depois, IEca! O melhor

caminho a seguir esse, acredite46. Devido ao fato de o Firefox/Iceweasel tersuporte mais abrangente aos padres do W3C, o mais sensato desenvolver com

foco nele para, s depois, rodar as pginas no IEca e conferir as falhas existentes.

Acontece que, devido a fatores vrios, tais como estilos de desenvolvimento,

marketing e propaganda, viso e misso, e muitos outros, as empresas tomam

rumos diferentes em se tratando da elaborao de novas tecnologias e suporte s

j existentes, o que, invariavelmente, causa distrbios, inconsistncias entre osdiversos navegadores disponveis na praa.

At verses diferentes do mesmo navegador podem trazer mudanas drsticas e

resultados surpreendentes na visualizao; alm, claro, de praticamente obrigar

os desenvolvedores a engatilhar suas pginas para que sejam exibidas

corretamente nas diferentes verses.

De qualquer maneira, a vida... Isso acontece, mesmo, no tem jeito, e quem est

interessado em ser profissional da rea tem de aceitar ou, pelo menos, se

conformar ( o meu caso) com esse tipo de acontecimento.

Meu conselho : pacincia e perseverana!

COMENTRIOS CONDICIONAISTudo, bem, tudo bem. Depois de ler o tpico anterior fiquei sensibilizado e seguirei

seu conselho de ser paciente e dedicado, mas, afinal de contas, o que realmente

posso fazer para eliminar os problemas que esto acontecendo quando meus

websites so visualizado no IEca? Boa pergunta!

44 Uma boa notcia: saiu, para PC, o Safari 3 (beta)!45 Evidente que, caso no se tenha acesso a MACs e/ou outros sistemas operacionais do que atualmente se usa (e tomara

que no esteja falando do navegador azul de logomarca feia), o teste, infelizmente, limitar-se- aos dois necessriospara testes mnimos.

46 Se no quiser acreditar, tudo bem. De repente voc daqueles religiosos que tm que ver para crer, ou daquelesmetrossexuais que gostam de sentir na pele essa emoo. (-:



53/60

Na verdade, existem diversas respostas para ela, mas me reservo a mostrar a que

penso ser a melhor alternativa para tal: comentrios condicionais.

A prpria empresa que desenvolve o IEca (que me recuso a escrever o nome mais

uma vez), ciente de sua falta de vergonha na cara, apareceu com uma soluo at

certo ponto agradvel para tentar resolver as inmeras diferenas advindas da faltade suporte a padres internacionais de um de seus produtos, desenvolvendo,

ento, os comentrios condicionais, tambm conhecidos como CC.

Atravs dos CC podemos alterar regras CSS especificamente para IEca, atravs de

uma folha de estilo parte, que s entra em ao caso o browser que visita a

pgina seja esse a.

Vou exemplificar. Lembra-se de como se faz para se vincular um arquivo CSS a um

determinado documento? Isso, mesmo! No head do documento, coloca-se:

Pois bem, atravs de uma implementao nos comentrios (X)HTML tradicionais47,

pode-se indicar uma outra folha de estilos para ser exibida exclusivamente para o

IEca (geralmente alcunhada iehacks). E seria o seguinte:

Isto , depois de vincular sua folha de estilos normalmente, voc ir, atravs dos

CC, vincular, tambm, uma outra, que a iehacks.

Devido ao efeito cascata, quando uma folha de estilos vinculada a um documento

posteriormente a outra, no caso, o iehacks, ela vai sobrepor as regras contidas na

folha de estilos anterior.

47 Como voc bem deve saber, os comentrios (X)HTML comeam com .



54/60

Ou seja, se no arquivo nomeDaSuaFolhaDeEstilos.css estivesse a seguinte regra:

#corpo #elementoPrincipal .citacao {


border: 3px double #999;

color: #FFF;

display: block;

margin-left: 10% 15%;

padding-right: 5%;

position: absolute;

}

Vamos supor que, quando renderizado no Firefox/Iceweasel, as pginas sejam

exibidas corretamente, da maneira que foram idealizadas. No entanto, no IEca,

voc percebe que o que est contido nessa classe no se apresenta de igual

maneira: ele est mais para a direita do que voc gostaria, e o problema na

propriedade padding-right. Voc simplesmente teria, dentro do arquivo iehacks, o

seguinte:


padding-right: 15%;

}

Entendeu? Voc especificou que, se, e somente se, o navegador que renderiza a

pgina for IEca, a classe citacao ter um padding-rightde 15%; do contrario,

quer dizer, em qualquer outro navegador, continuar com seus 5% originais48.

Se, por exemplo, sua vontade fosse a de que, no IEca, as letras dessa classe

aparecessem em uma cor vermelha, a regra seria a seguinte:


color: #F00;

padding-right: 15%;

}

H muito mais coisas a se saber sobre os comentrios condicionais! de vital

importncia que se faa uma pesquisa sobre o tema!

48 Como deve ter notado, no preciso inserir toda a regra, mas somente a propriedade que se queira modificar.



55/60

!important

Lembra-se do efeito cascata? Pois deveria... De qualquer maneira, quando se usa

!important, est se querendo modificar o grau de prioridade de uma propriedade.

Se, por exemplo, dentro de um documento qualquer tem-se uma folha de estilos

externa e uma declarao inline, ambas com uma propriedade tratando da mesmaregra, qual delas vai prevalecer? Isso, mesmo, a inline! A no ser que, naquele

arquivo externo, a declarao tivesse um !important. Se, no arquivo externo,

estivesse:

.qqCoisa { color: #F00 !important; }

E, no estilo inline:

Qualquer coisa...

De qualquer maneira, o pargrafo seria exibido com uma cor vermelha, e no

verde, como era para normalmente acontecer. E isso aconteceu devido ao

!important, que especificou que, naquela folha externa, a propriedade que tratava

da cor era mais !important.

Mais uma vez: pesquise, pesquise, pesquise...

SEMNTICA

Um assunto muito abordado no meio de desenvolvedores web conscientes a

semntica. Inclusive, este um tema que deve ser estudado e principalmente,

praticado efetivamente, caso se queira atingir um grau de amadurecimento

profissional adequado e oferecer um servio de qualidade para os clientes.

Semntica, no contexto da web, tem um significado ligeiramente diferente

daquele ensinado pela Tia Cotinha, na 4 srie. Aqui o sentido do termo dar

sentido ao contedo das pginas, dar significado!

Quando estamos codificando pginas web, inserimos tags (X)HTML para marcar os

trechos e elementos que queremos. Se queremos indicar que uma palavra um



56/60

ttulo primrio, esta vai entre e . Se um bloco de texto um pargrafo,

logo o colocamos envolto ao par de tags

e
. At aqui nenhuma novidade,
estamos dando o significado correto para os elementos. Infelizmente, no desse

jeito que todos fazem.

Quem j no se deparou com pginas cujo layout todo feito com tabelas? Quem

j no viu um pargrafo todo em h2, para que o texto aparea maior, com mais

destaque? esse tipo de barbaridade a que estou me referindo. Ao fazer essa

atrocidade, o desenvolvedor est ferindo a semntica! As tabelas no foram

idealizadas para que fossem utilizadas em montagens de aparncia para os sites;

os ttulos secundrios no foram feitos para dar destaque a um pargrafo...

Quando algum no elabora um cdigo semanticamente correto, est prejudicandono somente seu cliente, que pagou por um servio de qualidade e est levando

para casa um site que vai aparecer na 15 pgina de resultados do Google, mas,

principalmente, a si mesmo! bvio! E esse prejuzo tem vrias nuances: quando

seu cliente ficar sabendo que existem mtodos de desenvolvimento melhores que o

seu, vai mandar um e-mail de despedida, e ainda por cima te queimar com quem

ele tiver oportunidade. Voc perdeu um cliente e deixou de ganhar pelo menos o

dobro, que poderia vir por indicao.

Com isso, seu nome vai ficando enlameado e sua reputao despenca. Dependendo

do tipo do seu ex-cliente, fique muitssimo feliz caso no receba uma cartinha do

advogado dele... J pensou se ele resolve pegar o dinheiro de volta por no ter tido

uma prestao de servio de qualidade que, ainda por cima, prejudicou seus

negcios?

No que esta situao sempre acontea, mas tambm no pense que nunca

acontea...

Enfim, quando se fala em semntica, fala-se em dar o correto significado aos

elementos que compem as pginas. Em descrever as informaes de forma

acertada, de forma que os mecanismos de busca possam lhe dar o merecido crdito

por seu profissionalismo e colocar seu site nas primeiras colocaes de resultado

49

!49 No sei se j aconselhei isso, mas: pesquise sobre semntica e mecanismos de busca (SEO)!



57/60

LINKS

Como prometido, vou indicar alguns links interessantes para que voc possa

expandir seus horizontes de conhecimento! Lembrando que sempre, mas sempre,

mesmo, devemos fazer pesquisas constantes para aprender coisas novas efixar/aprimorar as que j sabemos. Se no for assim, o mercado chega primeiro...

GERAL

http://www.maujor.com/

Ao longo da apostila, citei vrias vezes o endereo do Maujor (e isso foi proposital).

Foi l que eu tive o primeiro contato com o CSS e assuntos afins. Eu considero queo site seja uma imensa apostila virtual, e julgo ser a melhor referncia que

atualmente se tem no Brasil! Se no fosse o site de Maurcio Samy Silva,

provavelmente hoje eu ainda estaria compondo layouts em tabelas... Eu sei que

voc no sabe que eu existo, mas eu e muitas outras pessoas sabemos que voc

existe, e pudemos elaborar websites melhores graas a sua ajuda e dedicao!

Muito obrigado, Maujor!

http://webinsider.uol.com.br/

O Webinsider um daqueles portais com dezenas de sees direcionadas aos mais

variados assuntos e pblicos. A qualidade das informaes que seus autores

transmitem muito boa, e, l, podem-se encontram temas voltados tanto

programao, propriamente dita, quanto

css, uma abordagem geral

Documents