HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 238-351

Machine Translated by Google
9
Definindo Seletores
Como você viu em “Construindo uma regra de estilo”

no Capítulo 7, existem duas partes principais de Neste capítulo
uma regra de estilo CSS. O seletor determina a
quais elementos a formatação será aplicada e as Construindo Seletores 214
declarações definem exatamente qual formatação Selecionando Elementos por Nome 216
será aplicada. Neste capítulo, você aprenderá como
Selecionando Elementos por Classe ou ID 218
definir seletores CSS.
Selecionando Elementos por Contexto 221
Enquanto os seletores mais simples permitem formatar Selecionando Parte de um Elemento 227
todos os elementos de um determinado tipo Selecionando Links Baseados em Seu Estado 230
(digamos, todos os títulos h1 ), os seletores mais
Selecionando Elementos Baseados em Atributos 232
complexos permitem aplicar regras de formatação a
elementos com base em sua classe ou id, contexto, Especificando grupos de elementos 236
estado e muito mais.
Combinando Seletores 238
Depois de definir os seletores, você poderá criar 240

Recapitulação dos Seletores
as declarações (com propriedades e valores
reais) nos Capítulos 10–14. Algumas
propriedades de estilo mais especializadas são
discutidas no restante deste livro. Até então, você
usará o muito simples e relativamente óbvio {color:
red;} nos exemplos.
Construindo Seletores Nome do elemento desejado
O seletor determina quais elementos

h1 {
uma regra de estilo é aplicada. Por exemplo, se
cor vermelha;
você quiser formatar todos os elementos p com a
fonte Times, com 12 pixels de altura, será }
necessário criar um seletor que identifique apenas os p
elementos, deixando os outros elementos em seu R O tipo mais simples de seletor é simplesmente o nome
código sozinhos. Se quiser formatar o primeiro do tipo de elemento que deve ser formatado — neste
caso, o elemento h1 .
p em cada seção com um recuo especial, você
precisará criar um seletor um pouco mais complicado
que identifique apenas os elementos p que são Contexto
o primeiro elemento em sua seção da página. Nome do elemento desejado
h1 em {
Um seletor pode definir até cinco critérios
cor vermelha;
diferentes para escolha dos elementos que
devem ser formatados: }
n O tipo ou nome do elemento A.

B Este seletor usa contexto. O estilo só será aplicado aos
n O contexto em que o elemento está
elementos em dentro dos elementos h1 .
encontrou B. Os elementos em encontrados em outros lugares não
são afetados.
n A classe ou id de um elemento (C e
D).
Aula
n A pseudoclasse de um elemento ou
pseudoelemento E (explicarei ambos, prometo). .muito {
cor vermelha;
n Se um elemento tem ou não certas
}
atributos e valores F.
EU IA
#gaudi {
cor vermelha;
}
C O primeiro seletor escolhe todos os elementos que

pertencem à própria classe. Em outras palavras,
qualquer elemento com class="very" em sua tag inicial HTML.
O segundo seletor escolhe o único elemento
com um id de gaudi, conforme especificado por id="gaudi"
em sua tag de início HTML. Você deve se lembrar que um
id pode aparecer uma vez em cada página, enquanto uma
classe pode aparecer inúmeras vezes.
214 Capítulo 9
Os seletores podem incluir qualquer combinação

Nome do elemento desejado
destes para identificar os elementos desejados.
Aula
Principalmente, você usa um ou dois de cada vez.
em.muito { Além disso, você pode aplicar as mesmas

declarações a vários seletores de uma só vez se
cor vermelha;
você precisa aplicar as mesmas regras de estilo a
} diferentes grupos de elementos (consulte
“Especificando grupos de elementos”, mais
Nome do elemento desejado
adiante neste capítulo).
EU IA
O restante deste capítulo explica exatamente

artigo#gaudi { como definir seletores.
cor vermelha;
}
D Você pode ser mais específico prefixando uma classe

ou seletor de id com o nome do elemento a ser direcionado.
Neste caso, o primeiro seletor escolhe apenas o em
elementos com a própria classe, em vez de todos os
elementos com a própria classe. Da mesma forma, o segundo
seletor escolhe o elemento de artigo com
uma identificação de Gaudí. Em geral, não use essa abordagem
a menos que seja necessário; o seletor menos específico no
exemplo anterior C é preferido.
Nome
Pseudo-classe
a: link {
cor vermelha;
}
E Neste exemplo, o seletor escolhe um elemento que pertence à

pseudoclasse do link (ou seja, o a
elementos que ainda não foram visitados).
Nome
Atributo
um nome] {
cor vermelha;
}
F Você pode usar colchetes para adicionar informações

a um seletor sobre os atributos, valores ou ambos do
elemento desejado.
Definindo Seletores 215

Selecionando
Elementos por Nome
Talvez o critério mais comum para
escolher quais elementos formatar seja o
nome ou tipo do elemento. Por exemplo,
você pode querer deixar todos os elementos
h1 grandes e em negrito e formatar todos
os elementos p com uma fonte sem serifa.
A Este código HTML possui dois elementos h2 . (Caso você esteja se perguntando, o atributo lang indica que o
conteúdo está em um idioma diferente do idioma padrão da página, que é especificado no elemento html que segue
o DOCTYPE no início de cada página. Nesse caso, lang= "es" em cada h2 indica que seu conteúdo está em
espanhol.)
<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
...
</head>
<corpo>
...
<artigo class="sobre">
<h1>Antoni Gaudí</h1>
<p>Muitos turistas são atraídos a Barcelona para ver a incrível arquitetura de Antoni Gaudí.</p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">comemorou o 150º aniversário </a>
do nascimento de Gaudí em 2002.</p>
<seção class="projeto">
<h2 lang="es">La Casa Milà</h2>
<p>O trabalho de Gaudí foi essencialmente útil. <span lang="es">La Casa Milà é um prédio de apartamentos
onde vivem <em>pessoas reais</em>.</p>
</seção>
<h2 lang="es">A Sagrada Família</h2>
<p>O Templo Expiatório da Sagrada Família, de nome complicado e curiosamente inacabado, é ÿ o edifício
<em>mais visitado</em> de Barcelona.</p>
</seção>
</artigo>
...
216 Capítulo 9
Para selecionar elementos para

B Este seletor escolherá todos os elementos h2 do documento e os
tornará vermelhos C. formatar com base em seu tipo:
h2 { Seletor de tipo , onde seletor é o
cor vermelha; nome do tipo de elemento desejado,
}
sem nenhum atributoB.
A menos que você especifique o contrário

(usando as técnicas do restante deste capítulo),
todos os elementos do tipo especificado serão
formatados, não importa onde apareçam no
seu documento.
Nem todos os seletores precisam especificar

o nome de um elemento. Se você quiser aplicar
formatação a uma classe inteira de elementos,
independentemente do tipo de elemento
identificado com essa classe, deixe o nome fora
do seletor. A próxima seção explica como fazer
isso.
O curinga, * (asterisco), corresponde

a qualquer nome de elemento no seu código.
Por exemplo, * {borda: 2px verde sólido; } dá a cada
elemento uma borda sólida verde de dois pixels!
Você pode escolher um grupo de nomes

de elementos para um seletor usando vírgula
para separá-los. Para obter mais detalhes,
consulte “Especificando grupos de elementos”,
posteriormente neste capítulo.
C Todos os elementos h2 são coloridos em vermelho.

Selecionando Elementos
por Classe ou ID
Se você rotulou elementos com classe A
ou um id (veja o Capítulo 3), você pode
usar esse critério em um seletor para aplicar
formatação apenas aos elementos
rotulados como B.
A Existem dois elementos de artigo com uma classe about . Um pequeno parágrafo sem a classe está em
entre eles.
...
<artigo id="gaudi" class="sobre">
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">comemorou o 150º aniversário
</a> do nascimento de Gaudí em 2002.</p>
<p>O trabalho de Gaudí foi essencialmente útil. <span lang="es">La Casa Milà é um prédio de
apartamentos onde vivem <em>pessoas reais</em>.</p>
</seção>
...
</artigo>
<p>Este parágrafo não tem <code>class="about"</code>, portanto não fica vermelho quando o CSS é ÿ aplicado.</p>
<h1>Lluís Domènech i Montaner</h1>
<p>Lluís Domènech i Montaner foi contemporâneo de Gaudí.</p>

...
</artigo>
...
218 Capítulo 9
B Este seletor escolherá os elementos com classe Para selecionar elementos para
igual a about. Nesse caso, ambos são elementos formatar com base em sua classe:
de artigo , mas você pode aplicar as classes a qualquer
elemento. Se você quisesse aplicar o estilo somente 1. Digite . (um periodo).
quando um elemento de artigo tivesse essa classe,
você escreveria o seletor como article.about. Mas 2. Sem espaço intermediário, digite imediatamente
isso é mais específico do que você normalmente precisa ser. classname, onde classname
identifica a classe à qual você gostaria de
.sobre {
cor vermelha; aplicar os estilos.
}
formatar com base em seu ID:
1. Digite # (um sinal de cerquilha ou cerquilha).
2. Sem espaço, digite imediatamente id, onde

id identifica exclusivamente o elemento
ao qual você deseja aplicar os estilos.
Você pode usar seletores de classe e id

sozinho ou em conjunto com outros critérios seletores.
Por exemplo, .news { color: red; } afetaria todos os
elementos com a classe news , enquanto h1.news
{ color: red; } afetaria apenas os elementos h1 com
a classe news . É melhor omitir o nome do
elemento de um seletor de ID ou classe , a menos
que você precise direcioná-lo especificamente.
continua na próxima página
C O artigo com a classe about é exibido em vermelho,

mas o elemento p no final da página não. (Caso você
esteja se perguntando, o link está em azul por causa
dos estilos padrão do navegador, mas você pode
escrever sua própria regra para substituí-lo.)

Observe em A e B que usei uma classe

nome (sobre) que transmite o significado do conteúdo
ao qual é aplicado, em vez de chamá-lo de
vermelho. É melhor evitar criar uma classe
nome que descreve a aparência de algo, porque
você pode alterar os estilos posteriormente,
como deixar o texto verde neste caso. E as
classes adicionam valor semântico ao seu HTML,
assim como os elementos.
Se o exemplo em B fosse escrito em vez disso

como #gaudi { cor: vermelho; }, apenas o texto
do primeiro artigo ficaria vermelho, pois é o
único com id="gaudi". Cada id deve ser único,
portanto você não pode reutilizá-lo no artigo
sobre Lluís Domènech i Montaner.
Para obter mais informações sobre

como atribuir classes a elementos no código
HTML, consulte “Nomeando Elementos com uma
Classe ou ID” no Capítulo 3.
Seletores de classe vs. seletores de ID

Ao decidir entre seletores de classe e seletores de id , sugiro usar classes sempre que possível, em grande parte
porque você pode reutilizá-las. Alguns defendem o não uso de ids , um argumento que eu entendo, embora, em última
análise, a escolha caia sobre você à medida que desenvolve seus sites. É um assunto que pode gerar opiniões bastante
fortes de ambos os lados. De qualquer forma, aqui estão dois dos problemas que os seletores de id apresentam:
. Seus estilos associados não podem ser reutilizados em outros elementos (lembre-se, um id pode aparecer em
apenas um elemento de uma página). Isso pode levar à repetição de estilos em outros elementos, em vez de
compartilhá-los por meio de uma classe.
. Eles são muito mais específicos que os seletores de classe . Isso significa que se você precisar substituir o estilo que
foi definido com um seletor de id , você precisará escrever uma regra CSS que seja ainda mais específica. Alguns
deles podem não ser difíceis de gerenciar, mas quando você estiver trabalhando em um site de tamanho decente,
seu CSS pode ficar mais longo e complicado do que o necessário.
Esses dois pontos provavelmente ficarão mais claros para você à medida que você trabalhar mais com CSS. (Por outro
lado, um dos motivos pelos quais algumas pessoas gostam de usar ids é para saberem rapidamente se um elemento é único.)
Então, eu recomendo procurar oportunidades para combinar estilos compartilhados em uma ou mais classes para que
você possa reutilizá-los, e para manter os seletores de id no mínimo se você usá-los (veja a página de exemplo no
Capítulo 11 para um exemplo de como você poderia fazem isto). Você pode achar suas folhas de estilo mais curtas e mais
fáceis de gerenciar.
220 Capítulo 9
R Reduzi o texto para facilitar a visualização das

relações entre os elementos. Cada recuo representa
Selecionando
uma geração. Observe que neste trecho há dois
elementos p de segunda geração diretamente no
Elementos por Contexto
artigo com a classe about e um elemento p de
terceira geração nas seções do projeto (dentro do Em CSS, você pode identificar elementos
artigo). dependendo de seus ancestrais, pais ou
Há outro p de terceira geração no código completo,
irmãos (consulte “Pais e Filhos” no
não mostrado. As instâncias h2 também são de terceira
geração. Capítulo 1) (A a D).
... Um ancestral é qualquer elemento que

<artigo class="sobre"> contenha o elemento desejado (o
<h1>Antoni Gaudí</h1> descendente), independentemente do
número de gerações que os separam.
<p>Muitos turistas... </p>
<p>Barcelona...</p>
<p>O trabalho de Gaudí... </p>
</seção>
...
</seção>
</artigo>
...
C Geralmente há mais de uma maneira de criar seus
seletores para obter o efeito desejado. Tudo se resume
a quão específico você precisa ser. O seletor no primeiro
B O espaço entre article.about e p exemplo aqui (artigo p { }) é menos específico do que
significa que este seletor encontrará qualquer elemento aquele que o segue (.about p { }) e aquele em B. O
p que seja descendente de artigos com o about segundo exemplo aqui combina um seletor de classe com
classe, independentemente da sua geração. No um seletor descendente; você também pode combinar
entanto, prefixar a classe (ou especialmente um id) com seletores de ID . Você se verá usando isso o
com o nome do elemento geralmente é mais específico tempo todo, em vez do
do que você precisa na prática. Veja o próximo exemplo modelo mais específico e detalhado em B.
para seletores menos específicos C.
/* Outras maneiras de obter o mesmo efeito
artigo.sobre p { -------------------------------------- */
cor vermelha;
} /* Qualquer p que seja descendente de qualquer
artigo. ÿ A abordagem menos específica. */
artigo p {
cor vermelha;
}
/* Qualquer p que seja descendente de qualquer elemento

ÿ com a aula sobre. O segundo mais
ÿ específico dos três. */
.sobre p {
cor vermelha;
}

Para selecionar um elemento para

formatar com base em seu ancestral:
1. Digite ancestral, onde ancestral é o seletor do

elemento que contém o elemento que você
deseja formatar.
2. Digite um espaço.
3. Se necessário, repita as etapas 1 e 2

para cada geração sucessiva de
ancestrais.
4. Digite descendente, onde descendente é o

seletor do elemento que deseja formatar.
Um seletor baseado no ancestral de um

elemento era conhecido como seletor descendente,
mas o CSS3 o renomeou como combinador
descendente. (Algumas pessoas ainda dizem “seletor”.)
Não se surpreenda com a parte do

artigo .about do exemplo B. Lembre-se de que D Todos os p elementos contidos em
o elemento com a classe about é vermelho, mesmo
significa simplesmente “o artigo cuja classe
que também esteja dentro de outros elementos dentro
é igual a about”. Então artigo.sobre
do elemento com a classe about . Cada uma das
p significa “qualquer elemento p contido no
regras de estilo em B e C produz o resultado mostrado aqui.
elemento do artigo cuja classe é igual a
aproximadamente”. Em comparação, o menos
específico .about p significa “qualquer
elemento p que esteja contido em qualquer
elemento cuja classe seja igual a cerca de” C.
Isso ocorre porque os seletores de id neste
contexto são mais específicos do que os seletores de elemento e classe .
222 Capítulo 9
E Este seletor escolherá apenas os elementos p Os exemplos anteriores mostraram

que são filhos (não netos, bisnetos e combinadores descendentes. CSS também tem filho
assim por diante) de elementos de artigo com combinadores, que permitem definir uma regra
a classe about . Para serem qualificados, eles
não podem estar contidos em nenhum outro elemento. para um descendente imediato (em outras
palavras, um filho) de um elemento pai. Você
artigo.sobre > p { pode conhecê-los como seletores filhos, a
cor vermelha;
terminologia pré-CSS3. Um pai é um elemento
}
que contém diretamente outro elemento (um
filho), o que significa que eles estão a apenas
uma geração de distância.

formatar com base em seu pai:
1. Digite parent, onde parent é o seletor do

elemento que contém diretamente o elemento
que você deseja formatar.
2. Digite > (sinal de maior que) E.
3. Se necessário, repita os passos 1 e 2 para
cada geração sucessiva de pais.
4. Digite filho, onde filho é o seletor do elemento
que deseja formatar.
Assim como você viu com o combinador

descendente, você pode omitir o nome do
elemento antes da classe. Na verdade, eu
recomendo (a menos que você precise de
especificidade extra para obter o estilo
desejado). Por exemplo, .about > p { color: red; }
F Apenas os dois primeiros elementos p são filhos
produz o mesmo efeito neste caso. Ou, para ser
do artigo da classe about . Os outros dois
elementos p são filhos dos elementos de seção ainda menos específico, deixe a classe totalmente de fora, como no ar
do artigo. Para o código HTML usado neste p {cor: vermelho; }. Utilize estes formulários mais
exemplo, consulte A. simples sempre que possível antes de recorrer a
outros mais específicos. Alguns dos exemplos
que se seguem no resto do capítulo poderiam ser
simplificados de maneira semelhante. Agora que
você já sabe como isso é feito, não vou citar essas
alternativas, mas tenha em mente que geralmente é
melhor ser menos específico para manter seus
estilos mais fáceis de reutilizar.
Você também pode usar seletores de id em

combinadores filhos, embora eu recomende usar
seletores menos específicos, como tipo de elemento ou classe
quando possível.
O Internet Explorer 6 não suporta o

seletor filho.

Às vezes é útil poder selecionar G O pseudo-seletor :first-child escolhe apenas o

apenas o primeiro filho de um elemento, em primeiro filho de um elemento, não a primeira
instância de um elemento que é filho. Portanto, embora
oposição a todos os filhos de um elemento.
você possa estar inclinado a pensar que a regra
Use a pseudoclasse :first-child para conseguir isso mostrada tornará o primeiro parágrafo da página de
(G a J). exemplo vermelho, não será H, porque h1 é o primeiro
filho do artigo que tem a classe about atribuída a ele.
Para o código HTML usado neste exemplo, consulte A.
formatar que seja o primeiro filho de seu pai: /* Você pode pensar que isso deixará o primeiro ÿ
parágrafo vermelho, mas não vai! */
1. Opcionalmente, digite pai, onde pai
é o seletor para o elemento desejado .about > p: primeiro filho {
cor vermelha;
pai.
}
2. Se você incluiu um pai na etapa 1, digite um espaço
seguido de > seguido de outro espaço.
3. Opcionalmente, digite o seletor que representa

se ressente do primeiro filho que você deseja
estilizar (por exemplo, p ou .news).
4. Digite :first-child (simplesmente assim) I.

(Observe que você não precisa especificar um pai
na etapa 1. Por exemplo, p:first-child { font-
weight: bold; } deixaria qualquer parágrafo que
fosse o primeiro filho de qualquer elemento em
negrito.)
H A regra não tem efeito na página, porque não

existe um elemento p que seja o primeiro filho de
um elemento com a classe about .
224 Capítulo 9
I Este seletor escolhe apenas o elemento h1 que é Continuando com o tema familiar, irmão
o primeiro filho dos elementos com class="about" elementos são elementos de qualquer
atribuído no HTML. Esta regra afeta a exibição
da nossa página J.
tipo que são filhos do mesmo pai. Irmãos
adjacentes são elementos que estão
/* h1 é o primeiro filho, então funciona. */ diretamente próximos um do outro, o
que significa que nenhum outro irmão fica
.about > h1:primeiro filho {
entre eles. No exemplo bruto a seguir, h1
cor vermelha;
} e p são irmãos adjacentes, e p e h2 são
irmãos adjacentes, mas h1 e h2 não são.
No entanto, são todos irmãos (e filhos
do elemento corpo ):
...
<corpo>
<h1>...</h1>
<p>...</p>
<h2>...</h2>
</body>
</html>
J O elemento h1 contido no artigo é vermelho

porque é o primeiro filho de um elemento com a
classe about . Se houvesse outros elementos h1
dentro do artigo, eles não seriam vermelhos.

O combinador irmão adjacente CSS K Este combinador de irmãos adjacentes escolhe apenas
permite que você direcione um elemento irmão que é aqueles p elementos que seguem diretamente um irmão p
elemento.
precedido imediatamente por um irmão especificado
por você. (Veja a última dica sobre o combinador .sobre p + p {
geral de irmãos, novo no CSS3.) cor vermelha;
}
formatar com base em um irmão adjacente:
1. Digite sibling, onde sibling é o seletor do
elemento que precede diretamente o elemento
desejado dentro do mesmo elemento pai. (Eles
não precisam ser do mesmo tipo de elemento,
desde que estejam diretamente próximos um
do outro, conforme explicado anteriormente.)
2. Digite + (um sinal de mais).
3. Se necessário, repita as etapas 1 e 2 para cada

irmão sucessivo.
4. Digite element, onde element é o seletor do

elemento que você deseja formatar K.
L Somente os elementos p que seguem diretamente
um elemento p irmão são vermelhos. Se houvesse um
terceiro, quarto ou mais parágrafos consecutivos, eles
também seriam vermelhos. Por exemplo, um combinador
Veja também “Pais e Filhos” em
irmão adjacente seria útil para recuar todos os
Capítulo 1. parágrafos, exceto o primeiro.
A parte :first-child do seletor é chamada de

pseudoclasse, porque identifica um grupo de elementos
sem que você (o designer ou desenvolvedor) precise marcá-
los no código HTML.
Nem o :first-child nem o adjacente

seletores irmãos são suportados pelo IE 6.
CSS3 apresenta o sistema irmão geral

binator, que permite selecionar um irmão que
não é necessariamente precedido
imediatamente por outro irmão. A única
diferença na sintaxe de um combinador de
vez de + irmãos adjacente é que ~ (til) em
para separar você usa os irmãos. Por exemplo, h1~h2 { cor:
vermelho; } tornaria qualquer elemento h2
vermelho, desde que fosse precedido por
um irmão h1 em algum lugar dentro do pai
(poderia ser imediatamente adjacente, mas não precisa ser).
226 Capítulo 9
R Não há como saber quais palavras serão afetadas

pela primeira linha até que você visualize a
Selecionando Parte
página no navegador e veja como o conteúdo flui. de um Elemento
Não é determinado pela linha em que as palavras
estão no próprio HTML.
Você também pode selecionar apenas a primeira letra
<artigo class="sobre"> ou primeira linha de um elemento e aplicar
formatação a ela.
<p>Muitos turistas são atraídos a Barcelona ÿ para

ver a incrível arquitetura ÿ de Antoni Gaudí .</ Para selecionar a primeira linha de um elemento:
p> 1. Digite element, onde element é o
<p>Barcelona <a href="http:// ÿ
seletor para o elemento cuja primeira linha você
www.gaudi2002.bcn.es/english/" ÿ
rel="external"> celebrou o 150º ÿ aniversário</a> deseja formatar.
do nascimento de Gaudí em ÿ 2002.</ p> 2. Digite :first-line para selecionar toda a primeira linha
do elemento referenciado em
passo 1.
<p>O trabalho de Gaudí foi essencialmente
ÿ útil. <span lang="es">La Casa ÿ Milà é um
apartamento ÿ prédio e <em>pessoas
reais</em> ÿ moram lá.</p>
</seção>
<p>O Templo Expiatório da Sagrada
Família, de nome complicado e ÿ
curiosamente inacabado, é o edifício ÿ <em>mais
visitado</em> de ÿ Barcelona.</p>
</seção>
</artigo>
B Aqui o seletor escolherá a primeira linha de cada

elemento p .
p:primeira linha {
cor vermelha; C Ajustar a largura da janela altera o conteúdo
}
das primeiras linhas (e, portanto, o que é
formatado).

Para selecionar a primeira D Aqui o seletor escolherá apenas a primeira letra de

letra de um elemento: cada elemento p . Para o código HTML
correspondente, consulte A.
1. Digite element, onde element é o
seletor para o elemento cuja primeira linha p:primeira letra {
cor vermelha;
você deseja formatar.
}
2. Digite :first-letter para selecionar a primeira
letra do elemento referenciado na
etapa 1.
De acordo com as especificações CSS,

a pontuação que precede a primeira letra
deve ser incluída no seletor. Os navegadores
E A primeira letra
modernos suportam isso, mas as versões mais
O seletor pode ser usado
antigas do IE não. Em vez disso, eles consideram para criar capitulares (depois
a pontuação em si como a primeira letra. que você aprender mais
propriedades além da cor).
Apenas certas propriedades
CSS podem ser aplicadas a
pseudoelementos :first-letter : font,
color, background, text-decoration,
vertical-align (desde que :first-letter não
esteja flutuando), text-transform, line-
height , margem, preenchimento, borda,
flutuação e limpeza. Você aprenderá sobre tudo isso nos Capítulos 10 e 11.
Você pode combinar :first-letter ou

: pseudoelementos de primeira linha
com seletores mais complicados do que
os usados neste exemplo. Por exemplo, se
você quiser selecionar apenas a primeira
letra de cada parágrafo contido nos elementos do projeto
class, seu seletor seria .project
p: primeira letra.
228 Capítulo 9
Pseudoelementos, Pseudoclasses e
CSS3 ::primeira linha e ::primeira letra Sintaxe
Em CSS3, a sintaxe de :first-line é ::first-line e :first-letter é ::first-letter. Observe os dois pontos duplos em vez dos
dois pontos simples.
A intenção dessa mudança era distinguir os quatro pseudoelementos—::first-line, ::first-

letter, ::before, ::after—de pseudoclasses como :first-child, :link, :hover, e mais.
Um pseudoelemento é aquele que não existe como elemento no HTML. Por exemplo, você não marca sua
primeira letra ou primeira linha de texto com HTML que a define como tal. Em vez disso, eles são conteúdos que
fazem parte de outro elemento, como os elementos p no exemplo.
Uma pseudoclasse, por outro lado, se aplica a um elemento HTML. Você viu isso com :first-child, que
seleciona o elemento especificado que é o primeiro filho de seu elemento pai.
A sintaxe de dois pontos duplos de ::first-line e ::first-letter é preferida no futuro, e os navegadores modernos a
suportam. A sintaxe original de dois pontos está obsoleta, mas os navegadores continuam a suportá-la para
compatibilidade com versões anteriores. No entanto, nenhuma versão do Internet Explorer anterior ao IE9 oferece
suporte a dois pontos duplos, portanto, você pode decidir continuar usando a sintaxe de dois pontos únicos, a
menos que forneça CSS diferente do IE8 e anteriores.

R Você não pode especificar no código qual estado um link

Selecionando links com terá; é controlado por seus visitantes. As pseudoclasses
base em seu estado permitem que você acesse o estado e altere a exibição como
desejar.
CSS permite aplicar formatação a links com ...

base em seu estado atual; isto é, se o <p>Muitos turistas são atraídos a Barcelona
visitante está passando o cursor sobre um deles, ÿ para ver a incrível arquitetura ÿ de
se um link foi visitado ou algo assim. Você Antoni Gaudí .</p>
<p>Barcelona<http://www.gaudi2002.
consegue isso com uma série de pseudoclasses.
ÿ bcn.es/ english/">comemorou</a> o ÿ
150º aniversário do nascimento de
Gaudí ÿ em 2002.</p>
Para selecionar links para ...
formatar com base em seu estado:
1. Digite a (já que a é o nome do elemento para B Os estilos para links devem sempre ser definidos nesta
ordem, para evitar a substituição de propriedades quando um
links). link estiver em mais de um estado (por exemplo, visitado e pairado).
2. Digite : (dois pontos).
a: link {
3. Digite link para alterar a aparência de links cor vermelha;
que ainda não foram ou não estão sendo }
ativados ou apontados.
a:visitou {
Ou digite visitado para alterar links que o cor laranja;
visitante já ativou. }
Ou digite focus se o link for selecionado um foco {

pelo teclado e estiver pronto para ser cor roxa;
ativado. }
Ou digite hover para alterar a aparência a: passar o mouse {
dos links quando apontados. cor verde;

}
Ou digite ativo para alterar a aparência dos
links quando ativados.
a:ativo {
cor azul;
}
230 Capítulo 9
Você também pode aplicar as

pseudoclasses :active e :hover a outros elementos.
C Os links ficarão Por exemplo, p:hover { color: red; }
vermelhos quando novos
mudaria a cor de cada parágrafo para vermelho
e não visitados.
quando você passa o mouse sobre ele. (Se você
estiver registrando a pontuação, isso funciona
no Internet Explorer 7 e superior, mas não no IE6.
Nem o IE6 nem o IE7 suportam :active em elementos
D Depois que o link for além de a. Todos os outros navegadores suportam ambos os recursos.
visitado, ele ficará laranja.
Como um link pode estar em mais
de um estado ao mesmo tempo (digamos,
simultaneamente ativo e pairado acima) e
as regras posteriores substituem as
E Se o link receber o foco anteriores, é importante definir as regras na
(como acontece com a tecla seguinte ordem: link, visitado, foco, foco,
Tab), ele ficará roxo. ativo ( LVFHA). Uma maneira popular de
lembrar isso é o mnemônico “Ex-Punho
Anakin de Lord Vader”. Alguns defendem a ordenação das re
F Quando o visitante
passa o mouse sobre o
link com o ponteiro, ele
fica verde.
G Como visitante
ativa o link, ele fica
azul.

Selecionando Elementos
Baseado em atributos
Você também pode aplicar formatação aos
elementos que possuem um determinado atributo
ou valor de atributo.

formatar com base em seus atributos:
1. Digite element, onde element é o seletor do

elemento cujo atributo
butes estão em questão.
2. Digite [atributo, onde atributo é o nome do atributo

que um elemento
deve ser selecionado.
3. Digite ="valor" se desejar especificar

o valor que o valor do atributo deve
igual para que seu elemento seja selecionado.
Ou digite ~="value" para especificar um valor

exato que o valor do atributo deve
contém (juntamente com outro conteúdo
R Para fins de demonstração, alterei o valor da classe no segundo elemento da seção do projeto para o
trabalho.
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">comemorou o 150º aniversário </a> do
nascimento de Gaudí em 2002.</p>
<p>O trabalho de Gaudí foi essencialmente útil. <span lang="es">La Casa Milà é um prédio de apartamentos onde vivem
<em>pessoas reais</em>.</p>
</seção>
<seção class="trabalho">
<p>O Templo Expiatório da Sagrada Família, de nome complicado e curiosamente inacabado, é ÿ o edifício <em>mais
visitado</em> de Barcelona.</p>
</seção>
</artigo>
232 Capítulo 9
valores separados por espaço) para que seu elemento

B Os colchetes colocam o atributo desejado e qualquer
valor desejado. Neste caso, o valor é omitido para selecionar seja selecionado. Corresponde a uma palavra
qualquer seção com qualquer atributo de classe . completa, não a parte de uma palavra.
Ou digite |="valor" (que era o símbolo de barra

seção[classe] {
vertical, não um “1” ou a letra “l”) para especificar
cor vermelha;
que o valor do atributo deve ser igual a valor ou
}
começar com valor
(ou seja, o que você digitou seguido de um hífen)
para que seu elemento seja selecionado. (Isso é
mais comum ao procurar elementos que contenham
o atributo lang .)
Ou digite ^="valor" para especificar que o valor

do atributo deve começar com valor
como uma palavra completa ou substring (novo em
CSS3; veja a dica nesta seção).
Ou digite $="value" para especificar que o valor

do atributo deve terminar com valor como
uma palavra completa ou uma substring para seu

elemento ser selecionado (novo no CSS3; veja a dica
nesta seção).
Ou digite *="value" para especificar que o valor

do atributo deve conter pelo menos
uma instância da substring de valor para seu

elemento ser selecionado. Em outro
palavras, valor não precisa ser uma palavra completa
no valor do atributo (novidade no CSS3; veja a dica
C Todo elemento de seção que contém uma classe
atributo, independentemente do valor da classe , é vermelho.
nesta seção).
4. Digite ].
A seleção de elementos com base nos atributos

(e valores) que eles contêm é suportada por todos os
principais navegadores atuais (incluindo o IE a
partir da versão 7). O IE7 e o IE8 têm algumas
peculiaridades relacionadas aos três seletores de
atributos observados na etapa 3 como sendo novos no CSS3.
Consulte http://reference.sitepoint.com/css/
css3attributeselectors para obter mais informações.

Mais exemplos de seletores de atributos

Os seletores de atributos são bastante poderosos. Aqui estão mais alguns exemplos para demonstrar algumas das
diversas maneiras pelas quais você pode usá-los.
. Isso seleciona qualquer elemento com um atributo rel igual a external (deve ser uma correspondência exata).
a[rel="externo"]
{ cor: vermelho;
}
. Imagine que você tem um elemento de seção com duas classes, como <section class="project barcelona">,
e outro que possui uma, <section class="barcelona">. A sintaxe ~= testa uma correspondência parcial
de uma palavra completa dentro de uma lista de palavras separadas por espaços em branco, tornando ambos
os elementos vermelhos neste caso.
seção[class~="barcelona"] { cor:
vermelho;
}
/* Isso também corresponderia porque este seletor corresponde a

strings parciais ÿ (palavras completas não são
necessárias). */
seção[class*="barc"] { cor: vermelho;
}
/* Isso NÃO corresponderia porque barc não é uma palavra completa no
ÿ lista separada por espaços em

branco. */
seção[class~="barc"] { cor: vermelho;
}
. Isso seleciona qualquer h2 com um atributo lang que comece com es. Existem dois casos destes
no exemplo de código HTML A.
h2[lang|="es"]
{ color: red;
}
234 Capítulo 9
Mais exemplos de seletores de atributos (continuação)

. Ao usar o seletor universal, seleciona qualquer elemento com um atributo lang que começa com es.
Existem três instâncias destes no exemplo de código HTML A.
*[lang|="es"]
{ cor: vermelho;
}
. Combinando alguns dos métodos, isso seleciona qualquer elemento com qualquer atributo href
e qualquer atributo de título contendo a palavra Olá.
a[href][title~="olá"] {
cor vermelha;
}
. Como uma variação menos precisa do anterior, isto seleciona qualquer elemento com qualquer atributo href e
qualquer atributo title contendo how como uma palavra completa ou uma substring (corresponde se o valor
do título for how, howdy, show, e assim por diante , independentemente de onde aparece no valor ).
a[href][title*="como"]
{ cor: vermelho;
}
. Isso corresponde a qualquer elemento com um valor de atributo href que começa com http://.
a[href^="http://"]
{ cor: laranja;
}
. Isso corresponde a qualquer elemento img com um valor de atributo src exatamente logo.png.
img[src="logo.png"]
{ borda: 1px verde sólido;
}
. Isso é menos específico que o anterior, combinando qualquer elemento img com um valor de atributo src que
termina com .png.
img[src$=".png"]
{ borda: 1px verde sólido;
}
Esse não é de forma alguma o limite do que você pode fazer, mas espero que inspire você a explorar mais.

Especificando A O código contém um h1 e dois h2

elementos.
grupos de elementos ...
<artigo id="gaudi" class="sobre">
Muitas vezes é necessário aplicar as mesmas regras de <h1>Antoni Gaudí</h1>
estilo a mais de um elemento. Você pode
reitere as regras para cada elemento ou combine <p>Muitos turistas são atraídos...</p>
seletores e aplique as regras de uma só vez. <p>Barcelona...</p>
Obviamente, a última abordagem é mais eficiente
e geralmente facilita a manutenção das folhas de
estilo. <p>O trabalho de Gaudí foi...</p>
</seção>
Para aplicar estilos a
<h2 lang="es">A Sagrada Família
grupos de elementos: ÿ </h2>
<p>O nome complicado...</p>
1. Digite seletor1, onde seletor1
</seção>
é o nome do primeiro elemento que </artigo>
deve ser afetado pela regra de estilo. ...
2. Digite , (uma vírgula).
3. Digite selector2, onde selector2 é

a próxima tag que deve ser afetada pela regra de
estilo.
4. Repita as etapas 2 e 3 para cada adição

elemento nacional.
236 Capítulo 9
B Você pode listar qualquer número de seletores individuais Estilizar elementos como um grupo
(incluam nomes de elementos, ids ou classes), desde nada mais é do que um atalho útil. A regra h1, h2
que separe cada um com uma vírgula. Cada seletor { cor vermelha; } é precisamente igual às
não precisa estar em sua própria linha, como mostrado, duas regras
mas muitos desenvolvedores usam essa convenção para
facilitar a leitura. O benefício é mais óbvio quando os seletores h1 {cor: vermelho; } e h2 { cor: vermelho; }.
são mais longos.
Você pode agrupar qualquer tipo
h1, de seletor, desde o mais simples (como
h2 { mostrado em B) até o mais complexo. Por
cor vermelha; exemplo, você poderia usar h1, .project
} p:first-letter para escolher os títulos do
nível um e a primeira letra dos elementos p
em elementos cuja classe é igual ao projeto.
Às vezes é útil criar uma única regra de estilo

com os estilos comuns que se aplicam a vários
seletores e depois criar regras de estilo individuais com
os estilos que eles não compartilham.
Lembre-se de que as regras especificadas
posteriormente substituem as regras especificadas
anteriormente na folha de estilo (consulte “A cascata:
quando as regras colidem” no Capítulo 7).
C Os elementos h1 e h2 são coloridos em vermelho com

uma única regra.

Combinando Seletores R: Aqui está uma surpresa para você. Movendo da direita
para a esquerda, diz “escolha apenas os elementos em
encontrados nos elementos p que são irmãos
Os exemplos ao longo do capítulo foram
imediatamente adjacentes aos elementos h2 que possuem
simples para ajudá-lo a entender os vários tipos um atributo lang cujo valor começa com es dentro de
de seletores. No entanto, o verdadeiro poder qualquer elemento com classe igual a project”. Percebido?
Você raramente, ou nunca, terá oportunidade de escrever
reside no fato de que você pode combinar
algo tão complicado, mas pelo menos sabe que pode, se
qualquer uma das técnicas para identificar os necessário. Ou se você apenas quer assustar alguém
elementos que deseja formatar. que esteja lendo seu código.
.projeto h2[lang|="es"] + p em {
Um exemplo um pouco extremo é mostrado em A cor vermelha;
para demonstrar o que é possível. Aqui estão }
algumas maneiras de obter os mesmos
resultados, passando do menos específico para
o mais específico:
em {
cor vermelha;
}
.projeto em {
cor vermelha;
}
.sobre .projeto em {
cor vermelha;
}
#gaudi em { B Todo aquele código A só para deixar os elementos em

vermelhos?!? Se você está pensando que seria muito
cor vermelha;
melhor (e mais fácil) simplesmente escrever algo
} como .about em { color: red; }, você está absolutamente correto.
A menos que você precise ser altamente específico,
nesse caso você pode usar o doozy.
238 Capítulo 9
Cada um deles é típico do tipo de seletor que

Mais seletores em CSS3 você escreverá no dia a dia (embora, como observado
anteriormente, seja uma boa ideia minimizar o uso
CSS3 adiciona muitos novos seletores à sua caixa
de ferramentas. Você viu alguns deles neste de seletores de id ). Não são necessários muitos
capítulo. A maioria das outras novas são seletores malucos para implementar a maioria dos
pseudoclasses, algumas das quais são bastante designs, não importa quão complexos eles sejam
complexas, mas como resultado poderosas. aparecer.
Você pode encontrar uma tabela de todos os seletores CSS3
Portanto, combine seletores quando fizer
e descrições completas em www.w3.org/TR/
sentido, mas recomendo que suas regras de estilo
css3-selectors/#selectors, breves descrições e
sejam tão específicas quanto necessário. Por
exemplos em www.w3.org/wiki/
CSS/seletores e suporte ao navegador em http:// exemplo, se você deseja apenas direcionar
findmebyip.com/litmus. Como você verá, o elementos dentro de elementos com class =
suporte a navegadores é sólido, exceto no "projeto", vá com .project em
Internet Explorer, que não começou a suportar a { cor vermelha; }. Mesmo que eles
maioria dos novos seletores CSS3 (particularmente os elementos estão aninhados dentro dos
as pseudoclasses e pseudoelementos) até o elementos p no HTML, não faz sentido
IE9.
escrever .project p em { color: red; } a menos
que haja elementos em fora dos parágrafos que
você deseja deixar de lado. Resumindo, comece de
forma simples e seja mais específico conforme
necessário.

Recapitulação dos Seletores
Para recapitular, focamos nestes seletores,

qualquer um dos quais pode ser combinado:
n Selecionando elementos por contexto
n Selecionando elementos por nome
n Selecionando elementos por classe ou id
n Selecionando com uma pseudoclasse ou

pseudo-elemento
n Selecionando elementos com base em atributos
240 Capítulo 9
10
Formatando Texto
com Estilos
Com CSS, você pode alterar a fonte, o tamanho, a
espessura, a inclinação, a altura da linha, a cor do Neste capítulo
primeiro plano e do plano de fundo, além do
espaçamento e alinhamento do texto. Você pode decidir se Escolhendo uma família de fontes 243
deve ser sublinhado ou riscado e você pode Especificando fontes alternativas 244
convertê-lo para letras maiúsculas, minúsculas ou
Criando Itálico 246
versalete. E você pode aplicar essas alterações
a um documento ou site inteiro com apenas Aplicando formatação em negrito 248
algumas linhas de código. Neste capítulo, você Configurando o tamanho da fonte 250
aprenderá como.
Definir a altura da linha 255
Configurando todos os valores de fonte de uma só vez 256
Configurando a cor 258
Alterando o plano de fundo do texto 260
Controlando o espaçamento 264
Adicionando recuos 265
Configurando propriedades de espaço em branco 266
Alinhando Texto 268
Alterando a caixa do texto 270
Usando Versalete 271
Decorando Texto 272

Embora muitas das propriedades discutidas neste

capítulo se apliquem principalmente a texto, isso
não significa que funcionem apenas com texto.
Muitos deles também funcionam bem em outros tipos
de conteúdo.
Continuaremos com o layout CSS no Capítulo 11.
A Esta é a aparência da página sem nenhuma folha

de estilo aplicada. (Os tamanhos de cabeçalho
padrão, em particular, podem ser diferentes entre
navegadores.) Você pode encontrar o código-fonte HTML
(e todos os exemplos CSS subsequentes) na seção
Exemplos do site do livro: www.bruceontheloose.com/htmlcss/
exemplos/.
242 Capítulo 10
R Como especifiquei Palatino Linotype no elemento body ,

ele se espalha para outros elementos.
Escolhendo uma família de fontes
Substituí essa configuração para os elementos h1 e h2 definindo
Uma das escolhas mais importantes que você
sua fonte como Arial Black. No entanto, como você verá,
definir uma única fonte por vez não é suficiente, porque nem fará para o seu site é a fonte do corpo e dos
todos os sistemas operacionais podem suportá-la. No caso do títulos. Como você aprenderá, nem todo
Palatino Linotype, é comum no Windows, mas pode não
sistema oferece suporte às mesmas fontes
estar disponível em sistemas Mac OS ou Linux.
por padrão, portanto, você deve definir
fontes alternativas como substitutas. Mas
corpo {
primeiro vamos ver como definir uma única
família de fontes: "Linotipo Palatino";
}
família de fontes (A e B) e as ramificações de
não fornecer as alternativas C.
h1, h2 {
família de fontes: "Arial Black"; Para definir a família de fontes:
}
Após o seletor desejado em sua folha de
estilos, digite font-family: name, onde
name é sua primeira escolha de fonte.
Coloque nomes de fontes com várias palavras entre

aspas (simples ou duplas).
Se os nomes das suas fontes contiverem

caracteres não-ASCII, você terá que declarar a codificação
da sua folha de estilos. Faça isso adicionando
@charset "UTF-8"; na primeira linha da sua folha de
estilo. Na verdade, não há mal nenhum em incluí-lo em
todas as suas folhas de estilo, mesmo que não seja
B Neste sistema Windows, o Palatino Linotype foi instalado e, necessário imediatamente. Fazer isso pode ajudá-lo a
portanto, é exibido corretamente aqui. Como você pode ver, a evitar problemas mais tarde.
configuração da família de fontes do corpo desceu em
cascata para os elementos a e p . O h1 e h2 Embora você possa especificar qualquer fonte desejada,
elementos também mostrariam isso, se não tivéssemos seu visitante verá apenas as fontes que já possui
especificado Arial Black para eles.
instaladas em seu sistema. Consulte a próxima seção para
obter mais detalhes.
Você pode definir a família da fonte, o tamanho da fonte e

altura da linha de uma só vez usando a propriedade
geral da fonte . Consulte “Definindo todos os valores de
fonte de uma só vez”, mais adiante neste capítulo.
A propriedade font-family é herdada.
C Palatino Linotype não vem instalado em alguns

sistemas Mac. Se você escolher uma fonte que não
esteja instalada no sistema do visitante, o
navegador dele, conforme mostrado aqui, usará a
fonte padrão (nesse caso, Times).
Formatando Texto com Estilos 243

A propriedade font-family permite incluir fontes

Especificando alternativas que o navegador deve usar caso o sistema
Fontes alternativas não tenha a primeira instalada. Nesse caso, você pode
dizer ao navegador para procurar Palatino em sistemas
que não possuem Palatino Linotype C instalado e,
Embora você possa especificar a fonte desejada, em seguida, voltar para uma fonte serif padrão
seus visitantes só verão essa fonte se a tiverem se nenhuma estiver instalada. Uma lista de fontes é
conhecida como pilha de fontes. Eu adicionei
instalada em seus computadores. Portanto, é
alternativas para os títulos também.
melhor usar fontes que você possa razoavelmente
esperar que elas tenham. Há uma pequena lista corpo {
de fontes que tanto o Windows família de fontes: "Linotipo Palatino",
ÿ Palatino, serif;
e o Mac OS tem por padrão (veja a próxima barra
}
lateral para obter detalhes).
Depois, há outros casos a serem considerados. h1,
Se a fonte tiver nomes diferentes em cada h2 {
família de fontes: "Arial Black", Arial, ÿ
sistema, você pode especificar ambos os nomes e sans-serif;
cada sistema operacional usará aquele que instalou. }
Da mesma forma, se a fonte desejada estiver
disponível apenas em um sistema operacional, você
poderá escolher uma fonte alternativa para o outro
sistema. Pode ou não corresponder exatamente, mas
o objetivo é especificar uma fonte que seja o mais
próxima possível. Finalmente, é melhor especificar
uma fonte padrão genérica caso os sistemas não
suportem as outras listadas A.
Fontes padrão compartilhadas por Mac OS e Windows

Há uma lista muito limitada de fontes para escolher, que tanto o Mac OS quanto o Windows têm por padrão: Arial, Arial Black,
Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman e Verdana. Conseqüentemente,
a grande maioria dos sites na Web usa uma dessas fontes (Arial é provavelmente a mais comum). Eles podem não ser
renderizados exatamente da mesma maneira nos navegadores Mac OS e Windows, mas você pode ter certeza de que eles
serão exibidos.
Você também tem opções além dessas. Tanto o Mac OS quanto o Windows incluem mais (mas diferentes) fontes de
sistema que você pode usar em suas pilhas de fontes. Pesquise on-line por “pilhas de fontes” para ver uma variedade
de declarações de famílias de fontes que você pode copiar e colar em suas folhas de estilo para fornecer a cada visitante uma
fonte semelhante.
Também é possível carregar uma fonte que os sistemas não possuem por padrão, uma abordagem que está se tornando
cada vez mais comum. Aprenda como no Capítulo 13.
244 Capítulo 10
Para especificar fontes alternativas:
1. Digite font-family: name, onde name é sua

primeira escolha de fonte.
2. Digite name2 , onde name2 é sua segunda
opção de fonte. Separe cada opção com
vírgula e espaço.
3. Repita a etapa 2 conforme desejado e
finalize sua lista de fontes com um nome
de fonte genérico (serif, sans-serif,
cursiva, fantasia ou monoespaçada; o
estilo que for mais apropriado com base na
fonte de sua preferência).
Os sistemas B que possuem Palatino Linotype instalado Você pode especificar fontes para
continuarão a usar essa fonte.
diferentes alfabetos na mesma regra de família
de fontes (como japonês e inglês) para formatar
um pedaço de texto que contém diferentes
idiomas e sistemas de escrita.
Os sistemas normalmente possuem uma fonte que mapeia

aos seguintes nomes de fontes genéricos:
serif, sans-serif, cursive, fantasy e monospace—
é por isso que é prática padrão especificar uma
no final da pilha de fontes, caso todo o resto
falhe. Destas, você usará mais fontes com
serifa e sem serifa (de longe), pois elas
correspondem às fontes mais comumente usadas.
Os sistemas C que não possuem Palatino Linotype usarão

o Palatino, desde que o possuam (como a maioria dos
sistemas Mac). Se também não tiverem o Palatino, o
navegador tentará a terceira opção. Praticamente todos
os sistemas incluem fontes genéricas com serifa e sem serifa.
Observe que a altura da linha padrão ainda é diferente.
Você ajustará isso um pouco mais tarde.

Criando Itálico R Neste exemplo, fiz com que os parágrafos fossem

exibidos em itálico.
Na publicação tradicional, o itálico é frequentemente

corpo {
usado para destacar citações, texto enfatizado, família de fontes: "Linotipo Palatino",
palavras que são estrangeiras em relação a um ÿ Palatino, serif;
idioma (por exemplo, de rigueur), alguns nomes }
científicos (por exemplo, Homo sapiens), títulos de
filmes e muito mais. h1,
h2 {
Os navegadores normalmente colocam alguns família de fontes: "Arial Black", Arial, ÿ
elementos HTML em itálico (como cite, em e i) sans-serif;
}
por padrão, então você não precisa colocá-los em
itálico em seu CSS. Como você aprendeu em “HTML p{
Semântico: Marcação com Significado” no Capítulo 1, estilo da fonte: itálico;
você usa HTML para descrever o significado do }
conteúdo, não para fazê-lo parecer de uma determinada maneira.
Às vezes você vai querer colocar algo em itálico, mas
não é apropriado marcar o conteúdo com um dos
elementos que também renderiza texto em itálico. A
propriedade CSS font-style permite que você faça
isso com qualquer elemento.
Apenas como exemplo, vamos ver como fazer isso com

os parágrafos A. (Não os deixaremos assim porque
seriam extremamente difíceis de ler, por isso
omitiremos a regra dos exemplos subsequentes.)
A versão em itálico de uma fonte geralmente é criada

por um designer de fontes do zero, especialmente
para fontes serifadas. Não é apenas uma versão
inclinada do texto normal, mas inclui diferenças
adequadas à forma. Por exemplo, Palatino
Linotype tem uma fonte B em itálico verdadeiro. A letra
“a” em particular claramente não é apenas inclinada
para imitar o itálico. Mas uma fonte pode não ter
uma versão em itálico. Se você definir o texto
dessa fonte como estilo de fonte: itálico, o
navegador poderá exibir um itálico falso simulado por
computador que não
simplesmente incline as letras normais para imitar o
estilo. Porém, a qualidade não é a mesma.
246 Capítulo 10
Além disso, um designer de fontes pode criar

uma versão oblíqua de uma fonte, que
normalmente são as letras normais inclinadas,
talvez com alguns ajustes de espaçamento e
similares, mas com as mesmas letras. Você pode
definir font-style: oblique;, embora seja incomum
fazer isso. O itálico falso pode aparecer na
ausência de uma versão oblíqua ou itálica da
fonte.
Para criar itálico:

1. Digite estilo de fonte:.
2. Após os dois pontos (:), digite itálico para texto

em itálico ou oblíquo para texto oblíquo. (Você
B Os parágrafos estão em itálico, mas não os
provavelmente usará itálico 99 por cento das
itens da lista no topo ou os títulos.
vezes. Talvez você não perceba uma diferença
com o oblíquo em todos os casos.)
Para remover o itálico:

Digite estilo de fonte: normal.
Um motivo pelo qual você pode querer remover

itálico é para enfatizar algum texto em um
parágrafo que herdou a formatação em itálico de um
elemento pai. Para obter mais detalhes sobre
herança, consulte “A Cascata: Quando as
Regras Colidem” no Capítulo 7.
A propriedade font-style é herdada.

Aplicando Negrito R Os navegadores adicionam formatação em negrito

aos títulos (como h1 e h2) automaticamente. Apliquei
uma espessura de fonte normal para removê-la de
Formatação todos os elementos h2 para que você pudesse ver
a diferença na página. Também adicionei formatação
A formatação em negrito é provavelmente a maneira em negrito ao texto e links novos e flutuantes B.
mais comum e eficaz de destacar o texto. Por (Observe que alterei a família de fontes dos títulos
de Arial Black para Arial apenas para os exemplos nesta
exemplo, os navegadores normalmente estilizam os
seção. Veja o penúltimo dica.)
títulos h1–h6 em negrito por padrão.
Assim como acontece com o itálico, você pode corpo {
estilizar qualquer texto em negrito ou desativá-lo. As família de fontes: "Linotipo Palatino", ÿ
Palatino, serif;
folhas de estilo oferecem muita flexibilidade com
}
texto em negrito, fornecendo valores relativos.
No entanto, as próprias fontes nem sempre incluem h1,
pesos diferentes que mapeiam os valores relativos, h2 {
muitas vezes fazendo com que pareçam iguais (em família de fontes: Arial, Helvetica, ÿ
sans-serif;}
caso de dúvida, apenas especifique o peso em negrito)
(A e B). h2 {
peso da fonte: normal;
Para aplicar formatação em negrito: }
1. Digite peso da fonte:. em,

um: link,
2. Digite negrito para obter um negrito médio
a: passar o mouse {
peso ao texto. Você provavelmente usará esse
intensidade da fonte: Negrito;
valor na grande maioria das vezes. }
Ou digite mais negrito ou mais claro para

usar um valor relativo ao peso atual.
Ou digite um múltiplo de 100 entre 100 e 900,

onde 400 representa a gramatura normal ou
de livro e 700 representa negrito.
Essa abordagem é útil quando você trabalha
com fontes que possuem vários pesos disponíveis.
Para remover a formatação em negrito:
Digite peso da fonte: normal.
B O título h1 está em negrito e h2 tem peso

normal. Os novos links se destacam, enquanto os
visitados são menos intrusivos.
248 Capítulo 10
Como a forma como os pesos são definidos varia

de fonte para fonte, os valores predefinidos podem
não ser relativos de fonte para fonte. Eles são
projetados para serem relativos dentro de uma
determinada família de fontes.
Se a família de fontes tiver menos de nove

espessuras, ou se estiverem concentradas em uma
extremidade da escala, alguns valores numéricos
corresponderão à mesma espessura da fonte.
Pelas razões apontadas nas duas dicas

anteriores, é costume atribuir negrito simplesmente
com font-weight: bold, que sempre funcionará.
Do que você pode remover a formatação em

negrito? Qualquer elemento onde tenha sido
aplicado automaticamente (strong, h1–h6 e b vêm à
C Na parte inferior da página, você vê um link (“A mente) ou onde tenha sido herdado de um elemento
Nascente”) e a palavra “todos”. Ambos não estão pai (veja “A Cascata: Quando as Regras Colidem” no
apenas em negrito devido à nossa nova regra de Capítulo 7).
estilo, mas também em itálico devido à renderização
padrão do navegador dos elementos que os contêm. O restante dos exemplos neste capítulo usa
Eles são marcados com cite e em, respectivamente, para refletir seuArial
significado.
Black como família de fontes para o h1
(Você também notará que o “Park Guell” h2 tem peso e h2 em vez da configuração Arial mostrada de A a
normal, não ousado.)
C. No entanto, nos exemplos restantes, defini a
espessura da fonte:
normal; tanto em h1 quanto em h2, porque Arial
Black já é uma fonte em negrito por natureza. Quando
você aplica font-weight: negrito; para Arial Black, o
navegador pode exibir um estilo falso em negrito na
tentativa de torná-lo mais ousado. Ao definir font-
weight: normal; para esses títulos Arial Black, eu os
devolvi ao estado natural e muito pesado da fonte.
Veja uma discussão relacionada sobre itálico falso em
“Criando itálico”.
A propriedade font-weight é herdada.

Configurando o tamanho da fonte R Aqui eu uso valores de pixel para ter controle sobre
o tamanho inicial do texto (que diminuí de tamanho, em
comparação com os padrões da maioria dos
Existem duas maneiras básicas de definir o
navegadores). Os parágrafos herdam o tamanho da fonte
tamanho da fonte do texto em sua página da Web. definido no corpo. Você pode ver os resultados em B.
Você pode exigir que um tamanho específico seja
usado A ou pode fazer com que o tamanho seja corpo {
família de fontes: "Linotipo Palatino",
relativo ao tamanho da fonte pai C do elemento.
Palatino, serifa;
Definir o tamanho em relação ao pai demora um tamanho da fonte: 14px;
}
pouco para se acostumar; você precisa entender
como o navegador trata essas unidades
h1,
em relação aos seus pais, e explicarei isso mais em h2 {
um minuto. família de fontes: "Arial Black", Arial, ÿ
sans-serif;
Mas primeiro, quando você usa esse
peso da fonte: normal; /* remove o falso ÿ
método, é melhor estabelecer uma linha de
negrito do já pesado Arial ÿ Black */
base no elemento body , ou seja,
declarando body { font-size: 100%; } C. Na maioria }
das vezes, isso define o tamanho equivalente a
h1 {
16px, que é o tamanho de fonte padrão na maioria
tamanho da fonte: 22px;
dos sistemas. Como de costume, esse valor }
desce em cascata para os outros elementos
(lembre-se, font-size é uma propriedade herdada), h2 {
a menos que seja fornecido seu próprio tamanho de fonte.
}
em,
um: link,
a: passar o mouse {

}
/* Navegação no índice */
.tocar {
}
B Os tamanhos que especifiquei são exibidos no

navegador. Os links no índice (parte superior da página),
os títulos e os parágrafos refletem as adições de
tamanho da fonte à folha de estilo.
250 Capítulo 10
C O tamanho da fonte: declaração de 100% no corpo Então, como você descobre quais valores em
define uma linha de base a partir da qual os tamanhos especificar? Bem, 1em é igual ao tamanho padrão,
das fontes em são baseados. Esses 100% se traduzem
neste caso 16px. A partir daí você pode determinar
em um tamanho de texto padrão equivalente de 16 pixels
na maioria dos sistemas. Como tal, o resultado desta folha os valores em (ou porcentagem) com apenas uma
de estilo será equivalente ao mostrado em A. O comentário pequena divisão.
após cada valor de tamanho de fonte explica como foi
calculado, mostrando os equivalentes típicos de pixels. tamanho desejado / tamanho dos pais = valor
Por exemplo, você deseja que h1 se assemelhe a
corpo {
família de fontes: "Linotipo Palatino", 22px e já sabe que o tamanho do pai é 16px. Então:
ÿ Palatino, serif;
tamanho da fonte: 100%; /* 16 pixels */
22/16 = 1,375
}
Então, definindo h1 { font-size: 1.375em; }, está tudo
h1,
pronto para C. O que isso diz é: “Faça o texto h1
h2 {
1,375 vezes maior que o texto de seu pai”.
sans-serif; Outra forma de escrever a regra seria h1 { font-
peso da fonte: normal; size: 137,5%; }.
} No entanto, além de definir o tamanho da
fonte base no corpo com uma porcentagem, é mais
h1 {
tamanho da fonte: 1.375em; /* 22 px / 16 px */
comum dimensionar o tipo em ems do que em
} porcentagens.
Aqui está mais um. Você deseja que os

h2 {
tamanho da fonte: .9375em; /* 15px / 16px */
parágrafos tenham 14px e:
} 14/16 = 0,875
p{ Então, você define p { font-size: .875em; } C.

tamanho da fonte: .875em; /* 14 px / 16 px */ (Alternativamente, isso poderia ser 87,5%.)
}
em,
um: link,
a: passar o mouse {

}
.tocar {
tamanho da fonte: .75em; /* 12 px / 16 px */
}

Vamos discutir mais um exemplo, já que é aqui

que você pode tropeçar. O primeiro parágrafo
contém dois links (D e E).
Suponha que você queira fazer os links com
16px enquanto deixa o texto do outro parágrafo
nos 14px definidos. Você pode querer definir o
tamanho da fonte do link como 1em, pensando
que 1em = 16px.
Mas, lembre-se, esses valores são relativos
ao seu pai, e o pai, neste caso, é o p, não o
corpo. E o tamanho do parágrafo é 14px. Então,
para deixar os links com 16px, você precisa usar
um valor em maior que 1em.
D Na maioria dos sistemas com configurações padrão, os
tamanhos de fonte baseados em em correspondem aos da
16/14 = 1,1428457 versão B baseada em pixels.
Então, o ligeiramente detalhado a { font-size:

1,1428457em; } nos dá o resultado desejado.
Um último ponto: lembre-se que um corpo

font-size de 100% mapeia para um padrão
de 16px na maioria das vezes. Um caso em
que isso pode divergir é se um usuário substituir
o padrão nas configurações do navegador;
por exemplo, aumentando 20px se forem
deficientes visuais. Com o corpo definido como
100%, sua página respeita isso e dimensiona o
resto do texto de acordo, relativamente! Essa é a
beleza de dimensionar seu texto com ems e
porcentagens.
E Parte do HTML, que possui dois elementos a aninhados em seu pai p.
...
<p>O inconformismo de Gaudí, já visível na sua adolescência, aliado à sua ÿ devoção tranquila mas
firme à Igreja, constituiu uma base única para os seus pensamentos e ideias. Sua busca pela ÿ
simplicidade, baseada em suas observações cuidadosas da natureza, são bastante evidentes em seu
trabalho, desde o ÿ <a href="#park-guell">Parque Guell</a> e suas incríveis esculturas e mosaicos,
até a Igreja ÿ da <a href="#sagrada-familia">Família Sagrada</a> e suas torres orgânicas e bulbosas.</p>
...
252 Capítulo 10
Para exigir um tamanho de fonte específico:
1. Digite tamanho da fonte:.
2. Digite um tamanho específico após os dois pontos (:),

como 13px.
Ou use uma palavra-chave para especificar o tamanho:
xx-pequeno, x-pequeno, pequeno,

médio, grande , extragrande ou xx-grande.
Consulte “O valor de uma propriedade” no Capítulo 7

para obter detalhes sobre unidades.
Não deve haver espaços entre o número e a

unidade.
Se você definir o tamanho da fonte

com pixels, os visitantes que usam o Internet
Explorer não poderão aumentar ou diminuir o
texto com a opção de tamanho de texto do
navegador. Esse é um argumento para
dimensionar suas fontes com ems ou porcentagens.
A partir do IE7, os visitantes podem aumentar
e diminuir o zoom de toda a página, o que é uma
melhoria em relação ao IE6, embora não seja o
mesmo que alterar apenas o tamanho do texto. Se
você está se perguntando sobre o alcance do IE6
(já que ele não tem zoom de página), ele sofreu
uma queda dramática no uso geral em todo o
mundo nos últimos anos, então alguns
designers e desenvolvedores o ignoram totalmente
(é notoriamente bugado também). No entanto,
ainda possui uma grande base de usuários em
alguns países, principalmente na China e na Coreia do Sul. Você pod
Diferentes navegadores podem interpretar as

palavras-chave de maneiras diferentes.
Use pontos (pt) como tipo de unidade apenas em

imprimir folhas de estilo, não para a tela.
Devido às grandes variações nas resoluções de

tela, evite definir o tamanho da fonte em cm, mm e picas.
Eles raramente são usados na prática.
A propriedade font-size é herdada.

Para definir um tamanho que

depende do tamanho do elemento pai:
1. Digite tamanho da fonte:.
2. Digite o valor relativo após os dois pontos (:),

como 1,5em ou 150%.
Ou use uma palavra-chave relativa: maior ou

menor. (Estes são menos comuns de usar do
que porcentagens, que são menos comuns do que
ems.)
Uma unidade em (não deve ser confundida com o

elemento HTML em ) é igual ao tamanho da fonte. Então
um em é igual a 100%.
O tamanho do elemento pai pode ser definido pelo

usuário ou por você (o designer), pode ser herdado ou
pode vir dos padrões do navegador.
Conforme mencionado, na maioria dos navegadores
atuais o tamanho padrão do elemento body é 16 pixels.
O filho de um elemento com um parente

size herda o tamanho, não o fator. Portanto, os
elementos a em p E herdam um tamanho de 14
pixels C, não um valor relativo de 0,875em. Os links são
exibidos como 14px, a menos que você os substitua.
Você pode definir o tamanho da fonte junto com outros

valores de fonte. Consulte “Definindo todos os valores de
fonte de uma só vez”, mais adiante neste capítulo.
CSS3 apresenta algumas novas unidades. Um dos

mais interessantes é rem, abreviação de root em. É como
o em, mas dimensiona tudo em relação à raiz, então você
não precisa fazer a divisão do tamanho da fonte do
elemento pai que descrevi para o ems.
O suporte ao navegador é forte nos navegadores modernos.
O Internet Explorer não o suportava até a versão 9 (http://
caniuse.com/#search=rem), então você teria que
fornecer um valor padrão para versões anteriores do IE.
Jonathan Snook descreve como usar rem e uma
estratégia possível para abordar o IE8 e versões
anteriores: http://snook.ca/archives/
html_and_css/tamanho da fonte com rem. (Eu
recomendo definir o corpo para 100%, em vez de 62,5%,
como ele mostra, e criar seus tamanhos rem a partir daí.)
Há também uma unidade ex, que se refere à

altura x do elemento pai, mas não é amplamente suportada.
254 Capítulo 10
A Supondo um elemento de corpo padrão de 16

pixels, o tamanho da fonte do elemento p será Definir a altura da linha
0,875em, ou cerca de 14 pixels. A altura da linha
A altura da linha refere-se ao início de um
será 1,6 vezes esses 14 pixels, ou cerca de 22,4 pixels.
parágrafo, que é a quantidade de espaço entre cada
corpo { linha de um parágrafo. Usar uma altura de linha
família de fontes: "Linotipo Palatino", ÿ grande às vezes pode tornar o corpo do texto mais
Palatino, serif;
fácil de ler. Uma pequena altura de linha para títulos
tamanho da fonte: 100%;
} com mais de uma linha geralmente faz com que
pareçam mais elegantes.
h1,
h2 {
Para definir a altura da linha:
sans-serif; 1. Digite altura da linha:.
peso da fonte: normal;
}
2. Digite n, onde n é um número que irá
ser multiplicado pelo tamanho da fonte do
h1 { elemento para obter a altura de linha desejada.
tamanho da fonte: 1.375em; (Esta é a abordagem mais comum, apenas
}
um número sem unidade.)
h2 { Ou digite a, onde a é um valor em ems,

tamanho da fonte: .9375em; pixels ou pontos (use pontos apenas para
}
impressão).
p{ Ou digite p%, onde p% é uma porcentagem do

tamanho da fonte: .875em; /* 16 px / 14 px */ tamanho da fonte.
altura da linha: 1,6;
}
Você pode especificar a altura da linha juntos
... com a família da fonte, tamanho, espessura, estilo
e variante, conforme descrito na próxima seção.
Se você usar um número para determinar

a altura da linha, esse fator será herdado por todos
os itens filhos. Portanto, se o tamanho da fonte do
pai for 16 pixels (ou o equivalente em ems ou
algo semelhante) e a altura da linha for 1,5, a altura
da linha do pai será 24 (16 × 1,5). Se o tamanho da
fonte da criança for 10, a altura da linha será 15 (10 × 1,5).
Se você usar uma porcentagem ou valor

em, apenas o tamanho resultante (ou “valor
calculado”) será herdado. Portanto, dado um pai
de 16 pixels com uma altura de linha de 150%, a
altura da linha do pai ainda será de 24 pixels. No
entanto, todos os elementos filhos também
herdarão uma altura de linha de 24 pixels, independentemente do taman
B Espaçar as linhas com a altura da linha pode fazer

torná-los mais atraentes e fáceis de ler.

A Esta folha de estilo é equivalente àquela

Configurando todas as fontes mostrada em A em “Definindo a altura da linha”,
Valores de uma só vez assim como a exibição resultante B. Simplesmente
consolidei as propriedades da fonte para as regras body, h1 e h2 .
Observe que não precisei especificar que o peso da fonte
Você pode definir o estilo da fonte, espessura, variante,
seja normal para h1 e h2, pois normal é o padrão para a
tamanho, altura da linha e família, tudo de uma vez . propriedade font . Além disso, não consegui consolidar as
Este é o caminho a seguir sempre que possível para que você declarações do elemento p porque a abreviação da fonte requer
no mínimo as propriedades de família e tamanho. Veja
possa manter suas folhas de estilo enxutas.
exemplos na primeira dica que incluem estilo de fonte, variante
de fonte, espessura da fonte e altura da linha na fonte
Para definir todos os valores de fonte de uma vez:
forma abreviada.
1. Digite a fonte:.
corpo {
2. Opcionalmente, digite normal, itálico ou fonte: 100% "Linotipo Palatino", Palatino, ÿ serifa;
oblíquo para definir o estilo da fonte (veja “Criando
}
Itálico”).
3. Opcionalmente, digite normal, negrito, mais negrito, h1,

mais claro ou um múltiplo de 100 (até 900) para definir a h2 {
fonte: 1.375em "Arial Black", Arial, ÿ sans-
espessura da fonte (consulte “Aplicar formatação em
serif;
negrito”).
}
4. Opcionalmente, digite normal ou small-caps
h2 {
para remover ou definir versaletes (consulte “Usando
tamanho da fonte: .9375em;
Versaletes”).
}
5. Digite o tamanho de fonte desejado (consulte “Configurando
p{
o tamanho da fonte”).
/* Não é possível combiná-los em
6. Se desejar, digite /line-height, onde line-height é a abreviação de fonte, a menos que declare ÿ a
quantidade de espaço que deve haver entre as linhas família de fontes com eles ao mesmo tempo. */
(consulte “Configurando a altura da linha”).

7. Digite um espaço seguido da família ou famílias de fontes }
desejadas em ordem de preferência, separadas

em,
por vírgulas, conforme descrito em “Escolher uma
um: link,
família de fontes”. a: passar o mouse {

}
.tocar {
}
256 Capítulo 10
Um exemplo de combinação de
tamanho da fonte, altura da linha e família da fonte
declarações em fonte abreviada é fonte:
.875em/1.6 "Linótipo Palatino",
Palatino, serifa;. A altura da linha segue o tamanho e
a barra. Você também pode
inclua o estilo da fonte, a variante da fonte
e a espessura da fonte. A seguir está
um exemplo com todas as propriedades
possíveis em uma declaração de fonte: font: italic small-caps
negrito .875em/1.6 "Linotipo Palatino",
Palatino, serifa;. A ordem das propriedades é importante.
Você pode usar qualquer combinação de propriedades,
desde que o tamanho e a família sejam declarados.
Você também pode definir cada propriedade

B Esta página é idêntica à mostrada em B em separadamente, mas deve combinar as propriedades
“Definir a altura da linha”. com a abreviação da fonte sempre que possível.
As três primeiras propriedades podem ser

especificadas em qualquer ordem ou omitidas. Se você
os omitir, eles serão definidos como normais – o
que pode não ser o que você esperava A.
As propriedades de tamanho e família

devem sempre ser especificadas explicitamente:
primeiro o tamanho, depois a família.
A altura da linha, que é opcional, deve vir logo

após o tamanho e a barra.
A propriedade da fonte é herdada.

Configurando a cor R Você pode usar nomes de cores, hexadecimais

ou valores RGB, HSL, RGBA ou HSLA para definir
suas cores. Observe que as cores a:visited e a:hover
Você também pode alterar a cor dos elementos
(#909 e #c3f, respectivamente) usam a abreviatura
da sua página da Web A. discutida na segunda dica.
corpo {
Para definir a cor:
cor: #909;
1. Digite cor:. fonte: 100% "Linotipo Palatino", Palatino, ÿ
serifa;
2. Digite colorname, onde colorname é }
uma das cores predefinidas (veja “Cores CSS”
no Capítulo 7). h1,
h2 {
Ou digite #rrggbb, onde rrggbb é a cor: marinho;
representação hexadecimal da cor. fonte: 1.375em "Arial Black", Arial, ÿ
Esta é a maneira mais comum de especificar sans-serif;
cores. }
Ou digite rgb(r, g, b), onde r, g e b h2 {

são números inteiros de 0 a 255 que tamanho da fonte: .9375em;
especificam a quantidade de vermelho, }
verde e azul, respectivamente, na cor desejada.

p{
Ou digite rgb(r%, g%, b%), onde r, g e b tamanho da fonte: .875em;
fornecem a porcentagem de vermelho, altura da linha: 1,6;

}
verde e azul na cor desejada.
Ou digite hsl(h, s, l), onde h é um em {
número inteiro de 0 a 360 que especifica intensidade da fonte: Negrito;

}
o matiz, e s e l são porcentagens de 0 a
100 que especificam a quantidade de /* Links */
saturação e luminosidade, respectivamente, a: link {
na cor desejada. . (Geralmente, é melhor cor: #74269d;
usar hexadecimal ou RGB para não- intensidade da fonte: Negrito;
}
cores transparentes.)
a:visitou {
cor: #909;
}
a: passar o mouse {
cor: #c3f;
}
.tocar {
}
258 Capítulo 10
Ou digite rgba(r, g, b, a), onde r, g e b são

números inteiros de 0 a 255 que especificam
a quantidade de vermelho, verde e azul, e a é
um decimal de 0 a 1 que especifica a quantidade
de vermelho, verde e azul. quantidade de
transparência alfa na cor desejada.
Ou digite hsla(h, s, l, a), onde h é um número

inteiro de 0 a 360 que especifica o matiz, s e l
são porcentagens de 0 a 100 que especificam a
quantidade de saturação e luminosidade, e a é
um decimal de 0 a 1 que especifica a quantidade
de transparência alfa na cor desejada.
B Os títulos são em azul marinho e o texto em

roxo claro. Os links são roxos escuros, mas ficam Se você digitar um valor superior a 255 para
mais claros após serem visitados, e ficam roxos r, g ou b, 255 serão usados. Da mesma forma,
rosados quando passam o mouse para se destacarem. uma percentagem superior a 100 será substituída
por 100.
Você também pode usar #rgb para definir a cor

onde os valores hexadecimais são dígitos repetidos.
Na verdade, eu recomendo. Então você poderia
(e deveria) escrever #FF0099 como #F09 ou #fo9.
O número hexadecimal não deve ser incluído

entre aspas duplas.
Lembre-se de que o Internet Explorer

não suportava HSL, RGBA e HSLA até o IE9, portanto,
se você usar qualquer um deles em suas
declarações de cores, terá que definir cores
substitutas para versões mais antigas do IE. Consulte “Cores CSS” em
Capítulo 7 para detalhes.
A propriedade color é herdada.

A Definir a cor de fundo do corpo

Alterando o texto elemento colore o plano de fundo de toda a página.
Fundo O plano de fundo definido no elemento com o toc

classe distingue o índice de outras partes da página B.
Você pode definir o plano de fundo de elementos

individuais, da página inteira ou de qualquer corpo {
combinação dos dois A. Ao fazer isso, você pode histórico: #eef;
cor: #909;
alterar o plano de fundo de apenas alguns parágrafos
fonte: 100% "Linotipo Palatino", Palatino, ÿ
ou palavras, links em seus diferentes estados, seções
serifa;
de conteúdo, e mais. }
Para alterar o fundo do texto: ... [outro CSS está aqui] ...
1. Digite plano de fundo:.
2. Digite transparente ou colorido, onde

color é um nome de cor ou um valor de cor .toc {
hexadecimal, rgb, hsl, rgba ou hsla (consulte plano de fundo: #ebc6f9;
“Configurando a cor”). As cores hexadecimais são as mais }
comum.
.tocar {
3. Se desejar, digite url(image.gif) para usar uma tamanho da fonte: .75em;
imagem como plano de fundo, onde image.gif }

é o caminho e o nome do arquivo da imagem
relativo ao local da folha de estilos.
Se desejar, digite repetir para colocar a imagem lado a

lado horizontalmente e verticalmente, ou repetir-
x para colocar a imagem lado a lado apenas
horizontalmente, ou repetir-y para colocar a imagem lado
a lado apenas verticalmente, ou no-repeat para não
colocar a imagem lado a lado.
Se desejar, digite fixo ou role para determinar

se o plano de fundo deve rolar junto com a tela.
(Deixando-o de fora, como geralmente acontece,

o padrão é rolar.)
Se desejar, digite xy para definir a

posição da imagem de fundo, onde x e y
podem ser expressos como uma
distância absoluta ou como uma
porcentagem do canto superior
esquerdo. Ou use os valores esquerda,
centro ou direita para x e superior, central ou inferior para y.
260 Capítulo 10
Você pode especificar uma cor e

um URL de imagem para o plano de fundo.
A cor será usada até que a imagem seja
carregada — ou se não puder ser carregada
por algum motivo — e será vista através de
qualquer parte transparente da imagem. Se
você definir uma imagem de fundo para um
elemento, geralmente é uma boa prática
definir uma cor de fundo que forneça contraste
suficiente entre a cor do texto e o fundo. Isso
garantirá que seu texto permaneça legível
se o visitante tiver desativado as imagens em
seu navegador ou se a imagem não carregar
por algum motivo. Se você não definir uma
cor de fundo explícita, será a cor que o
elemento herda de seu pai, como o branco
padrão do elemento body . Isso seria um
B O fundo do elemento body é azul problema se você desejasse mostrar um
claro. O fundo do índice é roxo claro. texto claro em uma imagem de fundo
escura. Consulte a barra lateral “Mais sobre planos de fundo”
Crie contraste suficiente entre o

Vários planos de fundo e muito fundo e o primeiro plano para que os
mais com CSS3 visitantes possam realmente ler o texto.
Isso não apenas ajuda o usuário médio, mas
CSS3 apresenta um punhado de novos back-backs também é importante para a acessibilidade.
recursos relacionados ao solo, incluindo os tão O contraste é especialmente importante para visitantes daltôn
esperados planos de fundo múltiplos,
A propriedade background não é
redimensionamento de plano de fundo e muito mais. herdada.
Você pode aprender sobre alguns deles no Capítulo 14.
Consulte www.w3.org/TR/css3-background/ se
quiser se aprofundar em todos esses recursos no
módulo CSS3 relacionado.

Mais sobre planos de fundo

A propriedade background é poderosa e você encontrará muitas ocasiões para usá-la. Compreensivelmente, você
pode estar um pouco inseguro sobre como aproveitar a etapa 3 de “Para alterar o plano de fundo do texto”. Aqui
está um exemplo:
corpo {
plano de fundo: #foc url (bg-page.png) repetir-x scroll 0 0;
}
Na verdade, isso é uma notação abreviada, assim como você usa a propriedade font para combinar família de
fontes, tamanho da fonte, altura da linha e outras propriedades em uma declaração.
Movendo da esquerda para a direita, essa notação abreviada de fundo poderia ser reescrita assim:
corpo {
cor de fundo: #foc;
imagem de fundo: url(bg-page.png);
repetição em segundo plano: repetição-x;
anexo de fundo: rolagem;
posição de fundo: 0 0;
}
Isso é muito código, então você pode ver por que a abreviação é a melhor opção, a menos que você tenha
motivos para dividi-la. Na verdade, você pode até tornar nosso exemplo um pouco mais curto removendo a rolagem e 0 0
valores padrão:
corpo {
plano de fundo: #foc url (bg-page.png) repetir-x;
}
Na prática, sua URL será algo como ../img/bg-page.png, porque você não vai querer manter suas imagens na
mesma pasta que suas folhas de estilo.
Então, o que isso faz? Imagine que a imagem de fundo, bg-page.png, é um padrão repetitivo com 15 pixels de
largura e 600 pixels de altura. O exemplo de regra abreviada acima diz: “Repita a imagem infinitamente na
horizontal e mostre a cor #foc infinitamente onde a imagem não estiver”. Então, você veria a imagem inteira nos
primeiros 600 pixels de altura. Sempre que o conteúdo tiver mais de 600 pixels, você verá #foc (rosa choque,
perfeito para o seu site de homenagem à Hello Kitty).
262 Capítulo 10
Mais sobre planos de fundo (continuação)

Presumivelmente, a imagem foi projetada para combinar perfeitamente com a cor, para que os visitantes não vejam uma linha
óbvia onde a imagem termina e a cor começa. E como o plano de fundo foi definido para o corpo, todo o conteúdo da
página fica sobre a imagem e a cor do plano de fundo. Se você pesquisar o CSS de praticamente qualquer site,
provavelmente encontrará alguma variação do plano de fundo definido no corpo.
Aqui estão mais alguns exemplos para lhe dar uma ideia das possibilidades:
Cor de fundo preta combinada com imagem que se repete infinitamente na vertical.
corpo {
plano de fundo: #000 url(../../image/bg-page.png) repetir-y;
}
Imagem de fundo que se repete infinitamente em todas as direções. Amarelo mostra se a imagem não carrega ou até que a
imagem seja carregada.
corpo {
fundo: url amarelo (../img/bg-smiley-faces.png);
}
Cor de fundo verde escuro com imagem de fundo que não se repete e que está posicionada a 200 pixels da borda esquerda
da página e a 125 pixels do topo. Valores negativos também são permitidos. Use center para centralizá-lo na página.
corpo {
plano de fundo: #3f8916 url(../../img/bg-gumby.png) sem repetição 200px 125px;
}
Concentrei-me nos planos de fundo do corpo devido ao seu impacto no design da sua página, mas você pode aplicar
propriedades de plano de fundo a qualquer elemento. Então, se você realmente quiser, poderá definir uma foto de Telly
Savalas como plano de fundo de todos os seus parágrafos. Na verdade, eu incentivo isso.

Controlando o espaçamento A Aqui adicionei 0,4em de espaço extra entre as

letras do título, o que com um tamanho de fonte
de 22 pixels significará quase 9 pixels entre cada
Você pode adicionar ou reduzir o espaço entre
letra B.
palavras (o que é chamado de rastreamento) ou entre
as letras (o que é chamado de kerning) A. corpo {
histórico: #eef;
cor: #909;
Para especificar o rastreamento:
fonte: 100% "Linotipo Palatino", Palatino, ÿ
Digite espaçamento entre palavras: comprimento, serifa;
}
onde comprimento é um número com unidades, como em 0,4em
ou 5px. h1,
h2 {
Para especificar o kerning: cor: marinho;
fonte: 1.375em "Arial Black", Arial, ÿ
Digite espaçamento entre letras: comprimento, onde sans-serif;
comprimento é um número com unidades, como em 0,4em espaçamento entre letras: .4em;
ou 5px. }
h2 {
Você pode usar valores negativos para tamanho da fonte: .9375em;
espaçamento entre palavras e letras. }
Os valores de espaçamento entre palavras e letras também podem ... [resto do CSS] ...
ser afetado pela sua escolha de alinhamento e família
de fontes.
Use um valor normal ou 0 para definir o

espaçamento entre letras e palavras de volta aos padrões
(ou seja, para não adicionar espaço extra).
Se você usar um valor em, apenas o valor resultante

tamanho (ou “valor calculado”) é herdado. Portanto, um
pai de 16 pixels com 0,1em de espaçamento extra
entre palavras terá 1,6 pixels de espaço extra entre
cada palavra. E todos os elementos filhos também terão
1,6 pixels de espaço extra entre as palavras,
independentemente do tamanho da fonte. Defina
explicitamente o espaçamento extra para os elementos
filhos se precisar substituir esse valor.
B As letras dos títulos agora têm mais espaço
entre eles.
O espaçamento entre palavras e letras
propriedades de espaçamento são herdadas.
264 Capítulo 10
A Este código adiciona um recuo de 1,5em ao p

elementos, que, como o tamanho da fonte é de
Adicionando recuos
cerca de 14 pixels, terão um recuo de cerca de 21 pixels B. Você pode determinar quanto espaço deve
corpo { preceder a primeira linha de um parágrafo definindo
histórico: #eef; a propriedade text-indent A.
cor: #909;
fonte: 100% "Linotipo Palatino", Palatino, ÿ Para adicionar recuos:
serifa;
} Digite text-indent: comprimento, onde comprimento
é um número com unidades, como 1,5em ou 18px.
h1,
h2 {
cor: marinho; Um valor negativo cria um recuo deslocado.
fonte: 1.375em "Arial Black", Arial, ÿ Talvez seja necessário aumentar o preenchimento ou as
sans-serif; margens ao redor de uma caixa de texto com recuo
espaçamento entre letras: .4em; deslocado para acomodar o texto saliente. (Consulte
} “Adicionando preenchimento ao redor de um
elemento” e “Definindo as margens ao redor de um
h2 { elemento” no Capítulo 11.)
} Os valores Em, como sempre, são calculados em
relação ao tamanho da fonte do elemento. As porcentagens
p{ são calculadas em relação à largura do elemento pai.
recuo do texto: 1,5em; A propriedade text-indent é herdada.
}
... [resto do CSS] ... Se você usar uma porcentagem ou um valor em,
apenas o tamanho resultante (ou “valor calculado”) será
herdado. Portanto, se o pai tiver 300 pixels de largura,
um recuo de texto de 10% terá 30 pixels. E
todos os elementos filhos também terão suas primeiras linhas
recuados 30 pixels, independentemente da largura de
seus respectivos pais.
Use um valor de 0 para remover um herdado

recuar.
B Cada parágrafo tem recuo de 21 pixels.

Configuração de branco A O valor nowrap para espaço em branco trata os

espaços como não separáveis.
Propriedades do espaço
corpo {
histórico: #eef;
Por padrão, vários espaços e retornos em um documento
cor: #909;
HTML são exibidos como um único espaço ou ignorados. Se
fonte: 100% "Linotipo Palatino", Palatino, ÿ serifa;
você quiser que o navegador exiba esses espaços extras,
use a propriedade white-space . }
h1,
h2 {
Para definir propriedades de espaço em branco: cor: marinho;
1. Digite espaço em branco:.
serif;
2. Digite pre para que os navegadores exibam todos os espaçamento entre letras: .4em;
espaços e retornos no texto original. }
h2 {
Ou digite nowrap para tratar todos os espaços como tamanho da fonte: .9375em;
inseparáveis. }
Ou digite normal para tratar os espaços em branco p{

normalmente. tamanho da fonte: .875em;
recuo do texto: 1,5em;
}
.introdução {
espaço em branco: nowrap;
}
... [resto do CSS] ...
266 Capítulo 10
B Apenas para fins de demonstração, adicionei uma Como exemplo, mostrei como aplicar o valor
aula de introdução para que você possa ver como o nowrap ao primeiro parágrafo (A
nowrap afeta a exibição do primeiro parágrafo.
e B). Como você pode ver, isso evita que
... a linha seja quebradaC. Entretanto, como
não queremos realmente esse efeito em
<h1 id="gaudi">Arquiteto de Barcelona</h1> nossa página, omitirei a classe e o CSS associado de
exemplos subsequentes.
<p class="intro">Os ÿ incríveis
edifícios de Antoni Gaudi trazem milhões de
ÿ turistas a Barcelona todos os anos.</p> O valor de pré para o espaço em branco
A propriedade recebe o nome do elemento pré ,
<p>O inconformismo de Gaudí, já ÿ que exibe o texto em uma fonte monoespaçada
visível na sua adolescência, aliado ÿ à sua enquanto mantém todos os seus espaços e
devoção silenciosa mas firme à ÿ igreja, retornos. O elemento pré , por sua vez, recebeu
constituiu uma base única ÿ para os seus o nome da palavra “pré-formatado”. Você pode
pensamentos e ideias...</p> encontrar mais informações sobre pré no Capítulo 4.
... Observe que o valor pré para a

propriedade espaço em branco não tem efeito
na fonte de um elemento (em contraste com o
elemento pré , que os navegadores exibem em uma
fonte monoespaçada por padrão).
Você pode usar o elemento br para criar

manualmente quebras de linha em um elemento
estilizado com white-space:nowrap. Dito isto, é
melhor evitar usar br a menos que você não tenha
alternativa, porque ele mistura a apresentação com
o seu HTML em vez de deixar o CSS cuidar disso.
Para obter detalhes sobre o elemento br ,
consulte “Criando uma quebra de linha” no Capítulo 4.
C O primeiro parágrafo não será quebrado, mesmo quando a

janela do navegador for muito estreita para exibir a linha inteira.
Como resultado, uma barra de rolagem horizontal aparece.

A O alinhamento do título e do texto do parágrafo é

Alinhando Texto ajustado após essas alterações. Não se esqueça do
hífen no alinhamento do texto.
Você pode configurar o texto para que ele sempre fique alinhado
à direita, à esquerda, ao centro ou justificado, conforme desejado A. corpo

{ background:
Para alinhar texto:
#eef; cor:
#909; fonte: 100% "Linotipo Palatino",
1. Digite text-align:. Palatino, ÿ serifa;
}
2. Digite à esquerda para alinhar o texto à esquerda.
Ou digite à direita para alinhar o texto à direita. h1,

h2
{ cor: marinho;
Ou digite centro para centralizar o texto no meio fonte: 1.375em "Arial Black", Arial, ÿ sans-
da tela. serif;
espaçamento entre letras:
Ou digite justificar para alinhar o texto à .4em; alinhamento de texto: centro;
direita e à esquerda. }
h2
{tamanho da fonte: .9375em;
}
p{
tamanho da fonte:
.875em; altura da
linha: 1,6; alinhamento de
texto: justificar; recuo do texto: 1,5em;
}
268 Capítulo 10
Se você optar por justificar o texto, esteja ciente

de que o espaçamento entre palavras e entre letras
pode ser afetado negativamente. Para obter mais
informações, consulte “Controlando o espaçamento”.
Observe que a propriedade text-align

só pode ser aplicada a elementos
configurados para display: block ou
display: inline-block. Elementos como p
e div são configurados para display: block
por padrão. Antes do HTML5, esses tipos de
elementos eram conhecidos como elementos
de nível de bloco. Sua configuração padrão
ainda é válida no HTML5, mas eles não
são mais chamados de nível de bloco para
não equiparar a semântica do HTML à
aparência. Portanto, este ponto se aplica
B Após as alterações, os títulos ficam centralizados, principalmente ao conteúdo de frases
enquanto o texto dos parágrafos fica justificado. (elementos “inline” nos dias pré-HTML5),
como forte, em, a, citar e outros que aparecem
no contexto de frases, títulos e assim por
diante. Se quiser alinhar esses elementos individualmente em
estilo inline com display: block ou display:
inline-block e, em seguida, defina text-align
de acordo. Para aqueles com display:
inline-block, pode ser necessário adicionar uma largura
para ver o efeito. Na verdade, as ocasiões em que você
precisará definir o alinhamento de texto em
conteúdo “inline” são bastante limitadas.
A propriedade text-align é herdada.

Supõe-se que seu valor padrão dependa do idioma e do
sistema de escrita do documento, mas na maioria dos
casos é definido indiscriminadamente para a esquerda.

Alterando a A Decidi exibir o título de nível 1 em letras maiúsculas

para dar ênfase B.
Caso de texto corpo {
histórico: #eef;
Você pode definir a caixa do texto para o seu estilo
cor: #909;
usando a propriedade text-transform A. fonte: 100% "Linotipo Palatino", Palatino, ÿ
Desta forma, você pode exibir o texto com iniciais serifa;
maiúsculas, com todas as letras maiúsculas B, com }
todas as letras minúsculas ou conforme foi digitado.
h1,
h2 {
Para alterar a caixa do texto: cor: marinho;
1. Digite transformação de texto:.
sans-serif;
2. Digite maiúscula após os dois pontos (:) para espaçamento entre letras: .4em;
colocar o primeiro caractere de cada palavra alinhamento de texto: centro;

}
em maiúscula.
Ou digite maiúscula para alterar todas as h1 {

letras para maiúsculas. transformação de texto: maiúscula;
}
Ou digite minúsculas para alterar todas as
letras para minúsculas. h2 {
Ou digite none para deixar o texto como está }
(possivelmente cancelando um valor herdado).
O valor capitalizado tem suas limitações.

Ele não sabe quando a palavra de um idioma não deve
ser capitalizada por convenção, apenas coloca cada
palavra em maiúscula. Portanto, o texto em seu
HTML como “Jim Rice entra no Hall da Fama” seria
renderizado como “Jim Rice entra no Hall da Fama”.
Por que usar text-transform se você pode

simplesmente alterar o texto no HTML? Bem, às
vezes o conteúdo está fora do seu alcance. Por
exemplo, pode ser armazenado em um banco de
dados ou extraído do feed de notícias de outro site.
Nesses casos, você depende de ajustar a caixa do texto com CSS.
Além disso, se você quiser que o texto fique em letras B Agora o título realmente se destaca.
maiúsculas, use text-transform: uppercase na maioria das vezes.
Os mecanismos de pesquisa normalmente indexam o texto
conforme ele é digitado no HTML, e o texto pode ser mais
legível nos resultados da pesquisa em letras maiúsculas e minúsculas.
O valor minúsculo pode ser útil

para criar títulos elegantes (ou se você for ee
cummings).
A propriedade text-transform é herdada.
270 Capítulo 10
R Mudei h2 para versalete e também aproveitei a

oportunidade para aumentar um pouco o tamanho da
Usando Versalete
fonte para que fique em melhor proporção com h1 B.
Muitas fontes têm uma variante correspondente
Não se esqueça do hífen tanto na variante da
fonte quanto em versalete. em versalete que inclui versões em maiúsculas
das letras proporcionalmente reduzidas ao tamanho
corpo { de versalete. Você pode invocar a variante
histórico: #eef;
versalete com a variante font
cor: #909;
fonte: 100% "Linotipo Palatino", Palatino, ÿ propriedade A.
serifa;
} Para usar uma fonte em versalete:
h1, Digite font-variant: versalete.

h2 {
cor: marinho;
Para remover versaletes:
sans-serif; Digite font-variant: nenhum.
espaçamento entre letras: .4em;
alinhamento de texto: centro;
} As letras maiúsculas não são tão pesadas quanto
letras maiúsculas que simplesmente foram
h1 { reduzidas em tamanho.
transformação de texto: maiúscula;

} Nem todas as fontes têm um pequeno correspondente
projeto de bonés. Se o navegador não conseguir
h2 { encontrar esse design, ele terá algumas opções. Ele
tamanho da fonte: 1,15em; pode falsificar letras maiúsculas simplesmente reduzindo
variante de fonte: versalete; o tamanho das letras maiúsculas (o que tende a fazê-
} las parecer um pouco atarracadas), pode esquecer
completamente as letras maiúsculas e exibir o texto
... [resto do CSS] ... em letras maiúsculas (semelhante à transformação
de texto: maiúsculas, conforme descrito anteriormente)
ou, teoricamente, pode escolher a próxima fonte na lista
para ver se ela tem um design em versalete (embora eu
nunca tenha visto isso acontecer).
A propriedade font-variant é herdada.
B Agora você vê versalete para cada letra h2 . A

renderização de versalete pode variar um pouco de
navegador para navegador.

Decorando Texto
As folhas de estilo permitem adornar
seu texto com sublinhados e linhas
(talvez para indicar alterações) A.
A Aqui está toda a folha de estilo da página B, incluindo as alterações na decoração do texto dos links.
No entanto, você não precisa restringir o sublinhado ou outras decorações de texto aos elementos . Eles também podem ser
aplicados a outros elementos.
corpo em
{ background: {peso da fonte: negrito;
#eef; cor: }
#909; fonte: 100% "Linotipo Palatino",
Palatino, ÿ serifa; /* Links */
} a:link
{ color: #74269d;
h1, intensidade da fonte:
h2 Negrito; decoração de texto: nenhuma;
{ cor: marinho; }
serif; a:visitado
espaçamento entre letras: { cor: #909;
.4em; alinhamento de texto: centro; decoração de texto: nenhuma;
} }
h1 a:hover
{transformação de texto: maiúsculas; { cor: #c3f;
} intensidade da fonte:
Negrito; decoração de texto: sublinhado;
h2 }
{tamanho da fonte:
1,15em; variante de fonte: versalete; /* Navegação no índice */ .toc
}
{ background: #ebc6f9;
p{ }
tamanho da fonte:
.875em; altura da linha: .toc a
1,6; alinhamento de texto: {tamanho da fonte: .75em;
justificar; recuo do texto: 1,5em; }
}
o código continua na próxima coluna
272 Capítulo 10
Para decorar o texto:
1. Digite decoração de texto:.
2. Digite sublinhado após os dois pontos (:) para

sublinhar o texto.
Ou digite overline para uma linha acima

do texto.
Ou digite line-through para riscar o texto.
Para se livrar das decorações:

Digite decoração de texto: nenhum;.
Você pode eliminar decorações de

elementos que normalmente as possuem
(como a, del ou ins) ou de elementos que
herdam decorações de seus pais.
Embora seja perfeitamente normal remover

linhas dos links, certifique-se de distingui-
las suficientemente do texto ao redor de outra
forma, ou os visitantes não saberão que são acionáveis.
B Na imagem superior, você pode ver que o

sublinhado foi removido de todos os links, inclusive aqueles
do índice analítico. Mais abaixo na página há outro link, que
está em itálico porque é o título de um livro, então marquei-o
com um elemento de citação dentro do link (o estilo padrão
de citação é itálico). A imagem inferior mostra o sublinhado
que adicionei aos links que passam o mouse para
incentivar o usuário a agir. Eu configurei a cor a:hover para
#c3f
anteriormente no capítulo.

Esta página foi intencionalmente deixada em branco

11
Layout com estilos
Você pode criar uma grande variedade de

layouts com CSS. Este capítulo demonstra como Neste capítulo
construir um tipo de layout comum: um cabeçalho
na parte superior, duas colunas de conteúdo Considerações ao iniciar um layout 276
e um rodapé na parte inferiorA (na próxima página). Estruturando suas páginas 279
No entanto, você pode aplicar as propriedades Estilizando elementos HTML5 em navegadores mais antigos 286
CSS que aprenderá para criar layouts muito
Redefinindo ou normalizando estilos padrão 290
diferentes.
O modelo de caixa 292
Não mostrarei todas as linhas de CSS neste
Mudando o plano de fundo 294
capítulo. Por exemplo, a maior parte da
formatação do texto foi feita com antecedência. Configurando a Altura ou Largura de um Elemento 298
Por favor, veja o código completo em Definir as margens em torno de um elemento 302
www.bruceontheloose.com/htmlcss/
Adicionando preenchimento ao redor de um elemento 304
exemplos/capítulo-11/página finalizada.html.
Fazendo os elementos flutuarem 306
Também criei uma versão de largura fixa (sem
interior fluido) chamadafinished-page-fixed- Controlando onde os elementos flutuam 308
width.html para que você possa ver como isso 311
Definindo a Fronteira
pode ser alcançado. Eu incluí muitos com-
Elementos de compensação no fluxo natural 314
em todos os arquivos (especialmente nas folhas
Posicionando Elementos Absolutamente 316
de estilo) para ajudar a explicar o código.
Posicionando Elementos em 3D 318
Determinando como tratar o estouro 320
Alinhando Elementos Verticalmente 322
Mudando o cursor 323
Exibindo e ocultando elementos 324

Considerações quando
Iniciando um Layout
Aqui estão algumas coisas para ajudá-lo ao criar seus
próprios sites e aprimorá-los antes de liberá-los na
natureza.
Separando conteúdo e apresentação
n Como prática recomendada, sempre separe

seu conteúdo (HTML) e apresentação (CSS).
Você aprendeu como fazer isso no Capítulo
8, vinculando-o a uma folha de estilo externa. Se
você fizer isso em todas as suas páginas, todas
elas poderão compartilhar o mesmo layout e estilo A Esta página, com duas colunas fluidas, um cabeçalho,
geral. Isso também torna mais fácil alterar o e um rodapé, foi desenhado com CSS. Isso é explicado
passo a passo ao longo deste capítulo.
design de todo o site posteriormente, simplesmente
modificando o arquivo ou arquivos CSS.
Considerações sobre o navegador
n Nem todos os visitantes usarão o mesmo

navegador, sistema operacional ou até
mesmo dispositivo ao acessar seu site. Portanto,
na maioria dos casos, você desejará testar suas
páginas em vários navegadores antes de colocá-
las no servidor. Recomendo testar uma página
em alguns navegadores periodicamente à medida
que você a desenvolve, para que você tenha
menos problemas para resolver no final ao
realizar testes abrangentes. Consulte “Testando
sua página” no Capítulo 20 para obter informações
sobre como testar suas páginas e os navegadores
nos quais testá-las.
n Às vezes é necessário escrever regras CSS para

versões específicas do IE para corrigir problemas
de exibição causados pelo mau comportamento do IE.
Este é especialmente o caso do IE6 e, em menor
grau, do IE7.
Existem algumas maneiras de fazer isso, mas o

melhor do ponto de vista de desempenho é usar
comentários condicionais para criar o IE
276 Capítulo 11
classes específicas da versão no elemento html

que você pode aproveitar em suas folhas de estilo.
Veja http://paulirish.com/2008/
folhas de estilo condicionais-vs-css-hacks-
resposta-nem/ para detalhes. Há uma
quantidade razoável para analisar lá, então se
você está se perguntando qual código usar, ele
segue o cabeçalho “Jogue na tag html” (leia
as notas após o código também).
Outra abordagem é usar comentários condicionais
para entregar os patches do IE em uma ou mais
folhas de estilo separadas.
Forneci um exemplo de ambas as técnicas nos

exemplos de código do site do livro.
A primeira abordagem está na página finalizada.
html (veja a introdução deste capítulo), e o
segundo está em Finish-page-conditional-
stylesheets.html no mesmo diretório.
Saiba mais sobre comandos condicionais
comentários em www.quirksmode.org/css/
condcom.html.
Abordagens de layout
Existem diversas maneiras de fazer um layout.
n Um layout fixo tem larguras baseadas em pixels

para toda a página e para cada coluna de conteúdo.
Como o próprio nome sugere, sua largura não
muda quando visualizada em dispositivos
menores, como celulares e tablets, ou quando a
janela do navegador de um desktop é reduzida.
Provavelmente, você já viu muitos layouts fixos ao
navegar na Web, principalmente em sites
corporativos e de grandes marcas. Layouts fixos
também são os mais fáceis de aprender ao
aprender CSS.
n Um layout fluido (ou líquido) usa porcentagens

para larguras, permitindo que a página encolha
e expanda dependendo das condições de
visualização. Esta abordagem foi aprimorada
ultimamente para criar
layouts responsivos e adaptáveis , que podem não
apenas diminuir para telefones e
Layout com Estilos 277

tablets gostam de layouts fluidos tradicionais, mas

também mudam seu design de maneiras específicas
com base no tamanho da tela. Isto permite
adaptando a experiência para usuários de dispositivos

móveis, tablets e desktops de forma independente,
mas com o mesmo HTML, não com três sites
diferentes. (Ethan Marcotte criou o termo “Web design
responsivo” e o pacote de técnicas por trás dele.
Veja o artigo dele em A List Apart para ter uma

ideia: www.alistapart.com/articles/
web design responsivo/. Ele dá mais detalhes em
seu livro Responsive Web Design, que recomendo
fortemente.
Um layout adaptativo usa algumas das mesmas
técnicas.)
n Um layout elástico usa ems para ambos

largura e todos os outros tamanhos de propriedade, para que
a página seja dimensionada de acordo com as configurações
de tamanho da fonte do usuário.
Não existe uma abordagem de layout única que seja

adequada para todas as circunstâncias e, na verdade,
existem até abordagens híbridas. Este capítulo ensina
como criar um híbrido de layout fluido e fixo: as colunas têm
larguras fluidas e baseadas em porcentagem, de
modo que aumentam e diminuem, mas a largura geral
da página tem uma largura máxima fixa que limita
quão grande ele pode crescer.
278 Capítulo 11
Estruturando suas páginas

O objetivo de usar CSS é separar as regras de
formatação e estilo do conteúdo da sua página. Isso
facilita a manutenção de suas páginas e lhes dá
flexibilidade para funcionar bem em diferentes
navegadores, plataformas e dispositivos, ou até
mesmo na impressão. Assim como acontece com o
estilo do texto, o CSS oferece grande variedade na
forma como você apresenta o layout geral de suas
páginas. Você aplica CSS aos contêineres de
conteúdo que representam os elementos estruturais
primários de uma página, sobre os quais você aprendeu
no Capítulo 3 A (na próxima página).
Com CSS, seu cabeçalho, área de conteúdo principal,

barra lateral (ou duas), rodapé no nível da página e
assim por diante ganham vida visualmente.
Para estruturar sua página:

1. Divida seções lógicas do seu documento
mento em artigos, aparte, navegação, seção,
cabeçalho, rodapé e elementos div , conforme
apropriado. Aplique funções de referência ARIA
conforme desejado. Consulte o Capítulo 3
para obter mais detalhes sobre ambos. Em A você tem:
> divs de contêiner e página que são

usado para aplicar algum design e envolver a
página
>Um cabeçalho para o masthead, que contém o

logotipo, o slogan, o formulário de pesquisa e
a navegação principal
>Uma div principal dividida em vários

elementos da seção de entrada para conter o
conteúdo principal
>Um div da barra lateral para abrigar um mensal

coluna de opinião e links de arquivo na coluna
da direita
>Um elemento de rodapé no nível da página para

uma sinopse “sobre”
(continua na página 282)

R Este é o documento que utilizo ao longo deste capítulo. Existem quatro seções principais (cabeçalho, principal, barra lateral e rodapé)
encerradas em dois contêineres externos (contêiner e página). Você pode encontrar o arquivo completo em meu site
(www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html). Por padrão, a página é simples, mas ainda funcional B.
...
o código continua na próxima página
280 Capítulo 11
Uma continuação


<section class="entry">
...
</section>

</div>


<div id="relacionado" class="sidebar" role="complementar">

<aside class="excerpt">
<h2>Da minha janela</h2>
...
</aside>
<aside class="arquivo">
<nav role="navigation">
<h2>Arquivo</
h2> ... [lista de links] ...
...
</nav>
</aside>
</div>



<footer id="footer" role="contentinfo">
<h1>sobre este fotoblog</h1>
...
... [lista de imagens] ...

</footer>

</div>

</div>
 </
body>
</html>

2. Coloque seu conteúdo em uma ordem que seria

mais útil se o CSS não fosse
usadoB. Por exemplo, o cabeçalho, seguido
pelo conteúdo principal, seguido por uma ou
mais barras laterais, seguido pelo rodapé no
nível da página. Isso pode facilitar o
fornecimento do conteúdo mais importante
para visitantes em telas menores, como
smartphones e tablets (e para usuários em
dispositivos móveis mais antigos que não
suportam CSS). Você deseja obter o conteúdo
principal sem fazê-los rolar muito. Além disso,
os motores de busca “vêem” a sua página
como se o CSS não tivesse sido aplicado,
portanto, se você priorizar o seu conteúdo
principal, eles conseguirão indexar melhor o seu
site de maneira adequada. Por último, os
leitores de tela acessam o conteúdo da
mesma maneira – pela ordem do seu HTML (os
usuários geralmente pulam entre os títulos em
vez de ouvir a página inteira, mas de qualquer
forma, eles alcançariam o conteúdo principal
B Esta é a aparência do nosso exemplo sem nenhum
mais cedo). estilo, exceto o padrão do navegador. Graças à sua
semântica sólida, é perfeitamente utilizável e
3. Use elementos de título (h1–h2) de forma inteligível, embora um pouco espartano.
consistente para identificar e priorizar
informações em sua página dentro das seções.
4. Use os comentários conforme desejado para

identificar diferentes áreas da sua página e
seus conteúdos. Como mostra A , minha preferência
é usar um formato diferente para com-
elementos que marcam o início, e não o fim,
de uma seção.
282 Capítulo 11
Você não precisa marcar toda a página antes

de aplicar CSS. Na prática, não é incomum fazer o HTML
para uma seção e depois parte ou todo o seu CSS,
depois fazer o mesmo para a próxima seção e assim
por diante. É realmente uma questão de preferência
pessoal e de qual processo funciona melhor para você.
Para o exemplo deste capítulo, marquei todo o
conteúdo com HTML antes de estilizá-lo.
Você deve ter notado que usei a seção

elementos no exemploA para conter cada
entrada parcial do blog. Se fossem
entradas completas, eu as teria marcado
com artigo , assim como faria para
páginas dedicadas a entradas individuais completas de blo
Meu pensamento, nesse caso, seria que eu
poderia distribuir uma postagem completa
no blog, não apenas a parte introdutória
incluída nas entradas parciais de exemplo.
Usar artigo para estes em vez de seção não
seria errado, apenas uma indicação de que
os trechos seriam apropriados para
distribuição. Veja o Capítulo 3 para uma
variedade de exemplos que usam artigo e seção juntos e in

Estilizando elementos com funções de referência ARIA em seletores CSS em vez de ids
A página de exemplo A inclui funções de referência ARIA em elementos apropriados. No Capítulo 9,
sugeri evitar ou minimizar o uso de ids para fins de estilo (veja a barra lateral na seção “Selecionando
elementos por classe ou ID” desse capítulo).
É possível usar os papéis de referência em seus seletores CSS em alguns casos onde você poderia estar inclinado a
referenciar ids.
Vamos usar o rodapé da página A como exemplo. Aqui está o HTML:

<footer id="footer" role="contentinfo">
... conteúdo do rodapé da ...
página </footer>
E alguns CSS correspondentes abreviados que usam seletores de id :
#rodapé {
borda superior: 2px pontilhado #b74e07;
limpar ambos;
}
#rodapé h1 {
margem inferior: 0,25em;
}
Agora, vamos simplificar o HTML removendo id="footer", já que ele estava lá apenas para estilizar o
rodapé (e não como um link âncora apontando para o rodapé).
<footer role="contentinfo">
... conteúdo do rodapé da ...
página </footer>
284 Capítulo 11
Elementos de estilo com funções de referência ARIA (continuação)

As funções de referência são atributos, portanto você pode usá-las em seletores de atributos.
rodapé[role="contentinfo"] {
limpar ambos;
}
rodapé[role="contentinfo"] h1 {
margem inferior: 0,25em;
}
A primeira regra diz: “Encontre o elemento de rodapé com um atributo de função igual a contentinfo”. A segunda regra diz:
“Encontre o elemento h1 dentro do elemento de rodapé com um atributo role igual a contentinfo”.
Os resultados são exatamente iguais aos do CSS anterior que usava seletores de id .
Você pode fazer a mesma coisa com outros elementos que contenham funções de referência, e forneci uma versão da
página de exemplo deste capítulo que faz exatamente isso: www.bruceontheloose.com/htmlcss/
exemplos/chapter-11/finished-page-selectors-with-landmark-roles.html. Veja uma discussão relacionada de Jeremy Keith
em http://adactio.com/journal/4267/.
Observe que o IE6 não oferece suporte a seletores de atributos; portanto, essa abordagem pode não ser adequada para
você, dependendo do seu público.
Um lembrete importante: é fundamental que você use as funções de referência somente quando apropriado em suas páginas.
Não adicione um simplesmente para ter um gancho para aplicar estilos a um elemento. Use uma classe nessa instância.
Consulte "Melhorando a acessibilidade com ARIA" no Capítulo 3 para relembrar funções importantes.

Estilizando HTML5
Elementos mais antigos
Navegadores
Como você sabe, o HTML5 introduz vários novos
elementos semânticos, a maioria dos quais você
aprendeu nos Capítulos 3 e 4. Em muitos casos, os
navegadores modernos oferecem suporte nativo a esses
elementos. Do ponto de vista do estilo, isso significa que
esses navegadores aplicam estilos padrão aos novos
elementos, assim como fazem aos elementos HTML
que existem desde os primeiros dias da linguagem.
Por exemplo, elementos como artigo, aparte,

navegação e seção (assim como alguns
outros) são exibidos em sua própria linha,
assim como div, blockquote, p e outros que
foram definidos como elementos de nível de bloco
em versões de HTML anteriores. HTML5.
Você deve estar se perguntando: “E os navegadores

mais antigos? Como posso usar os novos elementos
HTML5 se eles não existiam quando esses navegadores
foram criados?”
Bem, a boa notícia é que a maioria dos navegadores

permite estilizar elementos que ainda não suportam
nativamente. O Internet Explorer é a exceção, mas há
uma solução fácil que descrevo na etapa 2. Portanto,
siga as três etapas fáceis da próxima seção para começar
a estilizar páginas que possuem elementos HTML5.
Para estilizar novos elementos HTML5

em todos os navegadores:
1. Adicione o seguinte código ao arquivo de folha de

estilo principal do seu site (aquele que todas as
páginas usam):
artigo, aparte, figcaption, ÿ

figura, rodapé, cabeçalho,
ÿ hgroup, menu, nav, seção {
exibição: bloco;
}
286 Capítulo 11
Por quê: a maioria dos navegadores trata os

Sobre o Shiv HTML5 elementos que não reconhecem como elementos
Ao contrário de outros navegadores convencionais, o

embutidos por padrão. Portanto, esse pedaço de CSS
força a nova semântica “semelhante a nível de bloco” do HTML5
Internet Explorer 8 e versões anteriores ignoram CSS
em elementos que não suportam nativamente. para renderizar em sua própria linha (o IE precisa
de mais ajuda, descrita na próxima etapa). exibição:
Felizmente, existe uma maneira de fazer com
bloco; é a mesma declaração aplicada a div,
que essas versões do IE reconheçam os elementos:
você usa o documento blockquote, p e outros pela folha de estilo padrão
JavaScript .createElement("elementname") integrada de cada navegador.

para cada elemento, uma descoberta feita por
Sjoerd Visscher. Por exemplo,
2. Para obter o estilo do novo elemento HTML5
document.createElement("aside")
Para funcionar no Internet Explorer anterior à versão
faz com que o IE entenda o elemento aparte , e então
9, adicione o seguinte código destacado ao
a regra de estilo na etapa 1 de “Para estilizar novos
elemento head (não
elementos HTML5 em todos os navegadores” (e
quaisquer outros estilos que você criar) entra em o elemento do cabeçalho ) de cada uma de suas
vigor. páginas, de preferência depois de vincular ao seu
Arquivos CSS:
John Resig documentou essa abordagem, apelidando-
a de HTML5 shiv (também conhecido como <!DOCTYPEhtml>
HTML5 shim). Mas, felizmente, você não precisa <html lang="pt">
escrever esse JavaScript para cada novo elemento <cabeça>
HTML5, porque Remy Sharp agrupou a abordagem de <meta charset="utf-8" />
John em um arquivo JavaScript e o disponibilizou
<title>fotobarcelona</title>
para a comunidade em html5shiv.googlecode.com/
<link rel="stylesheet" href= ÿ
svn/trunk/
"assets/css/base.css" />
html5.js. Colaboradores subsequentes o aprimoraram.

novos elementos HTML5 em todas as navegadores- </head>
eis.” (A parte do código que diz [if lt IE 9] significa <corpo>
que apenas versões anteriores ao IE9 carregam o ...
arquivo. Isso é conhecido
Veja a barra lateral “Sobre o HTML5
como um comentário condicional.)
Shiv” para entender por que isso é necessário e o
O shiv HTML5 também foi incluído
que faz.
em algumas bibliotecas JavaScript, como Mod-ernizr
3. Agora, estilize com CSS como desejar!
(www.modernizr.com/). Portanto, se você adicionar
o Modernizr às suas páginas, não precisará carregar
o HTML5 shiv separadamente. Você pode encontrar falhas ocasionais ao estilizar
Aliás, Modernizr é uma biblioteca muito útil que os elementos, mas estará em boa forma na maior
permite detectar se um navegador suporta vários
parte do tempo.
recursos HTML5 e CSS3. Confira!
Layout com estilos 287

Há uma desvantagem nesta abordagem e

nestas opções alternativas. Como o estilo de
elementos HTML5 do IE6 ao IE8 requer JavaScript,
os usuários cujos navegadores não suportam
JavaScript ou estão desativados verão
elementos HTML5 sem estilo e possivelmente
confusos. Você pode aceitar esse risco se for
um de seus próprios sites; muitos designers e
desenvolvedores são. No entanto, se estiver
trabalhando para um cliente, você pode querer
obter autorização antes de usar os elementos
HTML5 destinados a
exibir como blocos. Eles também podem ter
análises do usuário sobre o uso do navegador
para informar a decisão.
Abordagens alternativas:
n Se você não se sentir confortável em usar article,

section, nav e os outros listados na etapa 1
acima, você pode usar div para todos os seus
contêineres. É assim que as pessoas
construíam sites antes da introdução do HTML5.
É verdade que você reduzirá a riqueza
semântica do seu site, mas é uma abordagem
aceitável. Alguns até optam por usar classes
que imitam
os novos nomes dos elementos HTML5 para
se acostumar com os novos elementos. Para
instância:
<div class="header">...</div>
<div class="artigo">...</div>
<div class="seção">...</div>
e assim por diante.
288 Capítulo 11
n Se você usar os novos elementos, poderá

escrever seletores CSS que visem
outros elementos tanto quanto possível para
reduzir o impacto quando o JavaScript
estiver desativado. Fiz isso muitas vezes
com o layout de página deste capítulo. Não
parece o mesmo no IE6 quando o
JavaScript está desabilitado, mas também não é inutilizável .
Você pode baixar html5.js (o arquivo

A A página no IE6 quando o JavaScript está shiv HTML5) e adicioná-lo aos arquivos do seu site
desabilitado, impedindo a execução do arquivo em vez de apontar para http://html5shiv.
HTML5 shiv JavaScript. A área do cabeçalho
googlecode.com/svn/trunk/html5.js. Mas ele é
parece um pouco quebrada, mas a página como um todo está intacta.
atualizado periodicamente, então não é uma má
ideia carregá-lo do Google Code, em vez disso,
usando o código da etapa 2 de "Para estilizar
novos elementos HTML5 em todos os navegadores".

Redefinindo ou
Normalizando
Estilos padrão
Conforme mencionado, cada navegador possui uma folha
de estilos integrada que determina a apresentação do seu
HTML, a menos que você escreva seu próprio CSS para
substituí-lo. Os estilos de navegador padrão são bastante
semelhantes em geral, mas têm diferenças suficientes
para que seja comum que os desenvolvedores nivelem o
campo de jogo antes de aplicarem seu próprio CSS.
Existem duas maneiras principais de nivelar o campo de

jogo: A Aqui está nossa página de exemplo com uma redefinição aplicada
para isso. As diferenças mais óbvias são que todos os tamanhos
n Comece a folha de estilo principal com uma redefinição de fonte são iguais e todas as margens e preenchimento são
definidos como zero.
de CSS, como a redefinição de Meyer criada por
Eric Meyer (http://meyerweb.com/eric/
ferramentas/css/reset/). Existem também outras
folhas de estilo de redefinição disponíveis.
n Comece a folha de estilo principal com

normalize.css, criado por Nicolas Gallagher e
Jonathan Neal. Encontre-o em http://necolas.github.com/
normalize.css/ (siga o link “Obter o arquivo normalize.css”).
290 Capítulo 11
Uma redefinição de CSS define efetivamente

todos os estilos de elemento padrão como
“zero” A. O segundo método, normalize.css,
adota uma abordagem diferente. Em vez de
redefinir tudo, ele ajusta os estilos padrão
para que fiquem muito semelhantes nos navegadores B.
Você não é obrigado a usar nenhuma dessas

abordagens. É perfeitamente normal deixar os padrões
do navegador permanecerem e escrever seu CSS de
acordo.
Para este capítulo, usei a redefinição de

Meyer e estilizei o texto para iniciar a página.
Portanto, antes de aplicar o estilo restante
descrito neste capítulo, a página se parece com
C. Como usei a redefinição, você poderá ver
mais explicitamente como o CSS mostrado neste
capítulo afeta o layout. E acompanhando o
capítulo, você aprenderá como criar o layout de
uma página ao usar uma redefinição, uma
habilidade valiosa dada a popularidade dessa
abordagem.
B Aqui está a página de exemplo usando

normalize.css em vez de reset. É semelhante à
renderização padrão sem estilo, mas há diferenças.
Mais especificamente, esta versão seria muito
semelhante se você a visualizasse nos navegadores comuns de hoje.
C Aqui está a página de exemplo com a redefinição e

a formatação de texto aplicadas. Você começará a
estilizar o resto da página a partir daqui, evoluindo-a à
medida que avança no capítulo.

direit
front
direi
pree
marg
direit
O modelo de caixa margem superior
borda superior
CSS trata sua página da Web como se cada
topo acolchoado
à
elemento que ela contém estivesse dentro de um
largura
caixa invisível. A caixa é composta por uma área
de conteúdo, o espaço ao redor dessa área
(preenchimento), a borda externa do preenchimento fundo
(borda) e o espaço invisível ao redor da borda CONTENTE
que separa um elemento do próximo (margem).
arutla
drieeutnqosref
dreegurqasm
e
É como uma imagem emoldurada na parede,
aa
am
hrcenueqesrà
otnemaid p
e
onde a imagem é o conteúdo, o tapete é o
preenchimento, a moldura é a borda e a distância
entre essa moldura e a próxima é a margem A. fundo de preenchimento
borda inferior
margem inferior
Você pode usar CSS para determinar a A caixa de cada elemento possui quatro propriedades
aparência e a posição da caixa de cada importantes que determinam seu tamanho: área de conteúdo,
preenchimento, borda e margem. Você pode controlar cada
elemento e, ao fazer isso, terá um controle
propriedade individualmente.
considerável sobre o layout da sua página da
Web B. O espaço entre a área de A área de
conteúdo e a borda conteúdo da barra lateral.
Conforme discutido no Capítulo 1, por padrão, a
é o preenchimento. (Aqui há Nenhuma largura ou
caixa de um elemento pode ser em nível de bloco preenchimento de 10 pixels em altura explícita
(começando assim em uma nova linha como todos os lados.) O plano de fundo é especificada no
a cor preenche ambas as áreas. CSS neste caso.
um novo parágrafo) ou inline (não gerando
uma nova linha). Esta característica rege o layout
inicial da página da Web: por padrão, os
elementos são exibidos na mesma ordem em que
aparecem no código HTML, de cima para baixo -
isso é conhecido como fluxo do documento - com
quebras de linha no início e no final de cada
elemento denominado como nível de bloco A.
A margem é o espaço invisível A borda externa

além da fronteira. é a fronteira.
(Aqui há uma margem esquerda de (Esta caixa não
72% do contêiner ao redor de toda a tem borda.)
página.)
B O modelo de caixa no contexto da barra lateral em

nossa página.
292 Capítulo 11
Existem quatro maneiras principais de posicionar

uma caixa de elemento: Você pode deixar a caixa em
o fluxo (o padrão, também chamado de estático; isso
é o que você fará na maioria das vezes), você pode
remover a caixa do fluxo e especificar suas
coordenadas exatas em relação ao seu elemento pai
(absoluto; para ser usado com cuidado ) ou a
janela do navegador (fixa; ainda menos comum
na prática), ou você pode mover a caixa em relação
à sua posição padrão no fluxo (relativa; em algum
lugar intermediário). Além disso, se as caixas se
sobrepuserem, você poderá especificar a ordem em
que devem fazê-lo (índice z).
Você também pode controlar sua

aparência, incluindo plano de fundo,
preenchimento, borda, margem, largura,
altura, alinhamento, cor e muito mais. Discutiremos tudo isso
capítulo.
Observe que algumas propriedades de layout,

particularmente valores em e percentuais, são
C Lembra-se da página de exemplo do início do relativas ao pai de um elemento. Lembre-se que pai é
capítulo antes de eu aplicar qualquer estilo? Este é o o elemento que contém o elemento atual (veja
fluxo de documentos da página. E a ordem não
mudou como resultado do estilo do texto D. “Pais e Filhos” no Capítulo 1).
A ilustração em A foi inspirada no

diagrama de modelo de caixa de Rich Hauck
(que é inspirado naquele da especificação
CSS): www.mandalatv.net/itp/drivebys/css/.
D Aqui está a página estilizada até este ponto. O fluxo

normal ainda está intacto porque só estilizei o texto
até agora.

Alterando a R Primeiro, você aplica uma imagem de fundo ao

contêiner mais externo, o div com id="container".
Fundo Então você repete verticalmente (eixo y). Este é o longo

caminho para definir estilos de plano de fundo –
especificando cada propriedade em sua própria
Como você aprendeu no Capítulo 10 (“Alterando declaração. Para manter meu código o mais compacto
o plano de fundo do texto” e “Mais sobre planos de possível, minha folha de estilo usa a notação abreviada
mostrada em B. De qualquer forma, os resultados
fundo”), você pode definir o estilo do plano de
não são particularmente atraentes no exemplo da página C.
fundo da página inteira e dos elementos individuais
A. Isso inclui quase todos os elementos, até #contêiner {
mesmo formulários e imagens ( sim, uma imagem imagem de fundo:
ÿ url(../img/bg-bluebench.jpg);
pode ter uma imagem de fundo!).
repetição em segundo plano: repetição-y;
}
Para usar uma imagem de fundo:
1. Digite imagem de fundo:.
B Você pode usar a propriedade de fundo do atalho
2. Em seguida, digite url(image.png), onde descrita no Capítulo 10 e na próxima página para
aplicar mais de uma propriedade relacionada ao fundo
image.png é o caminho e o nome da imagem de uma só vez. Recomendo que você use notação
que deve ser usada para o plano de fundo A. abreviada sempre que possível, embora haja
Ou digite none para não usar nenhuma imagem, situações em que faz sentido especificar
propriedades individuais. Não relacionado, o caminho
como em background-image: para minha imagem de plano de fundo é ../img/
nenhum; (você só usaria isso ao substituir outra bg-bluebench.jpg porque minha folha de estilo está
regra de estilo que está aplicando uma imagem em uma pasta que fica ao lado da pasta /img/ . Os
caminhos para suas próprias imagens podem variar.
de fundo ao elemento).
[figura do bloco de código]
Para repetir uma imagem de fundo: #contêiner {
plano de fundo: url(../img/bg-bluebench.jpg)
Digite background-repeat: direção, onde ÿ repetir;
direção é repetir (para colocar a imagem lado a }
lado horizontalmente e verticalmente), repetir-x (para
colocar a imagem lado a lado horizontalmente),
repetir-y (para colocar a imagem lado a lado
verticalmente) A ou sem repetição (para não colocar a imagem lado a lado).
294 Capítulo 11
Para controlar se a
imagem de fundo será anexada:
1. Digite anexo de fundo:.
2. Em seguida, digite fixo para colar a parte traseira

imagem de base para a janela do navegador
(o que significa que continuará a ser exibida
mesmo se o visitante rolar a página) ou rolar
para deixá-lo se mover quando o visitante
rolar. scroll é o valor padrão, então você não
precisa especificá-lo se esse for o efeito
desejado, o que é típico.
Para especificar a posição da

C Esta página é um desastre no momento; a
imagem de fundo torna o texto quase imagem de fundo de um elemento:
ilegível. Eventualmente cobriremos a imagem
de fundo para que o texto fique legível novamente. Digite posição de fundo: x y, onde x
Mais tarde, retiraremos a capa para deixar aparecer e y pode ser expresso como uma porcentagem ou
um pouco do fundo. como uma distância absoluta, como 20px
147px (valores negativos também são permitidos).
Ou use os valores esquerda, centro ou direita
para x e superior, central ou inferior para y. (Veja
a barra lateral “Mais sobre planos de fundo” no
Capítulo 10 para ver alguns exemplos.)

Para alterar a cor de fundo: D A propriedade background-color funcionaria para cada

uma delas, mas é mais longa que o necessário, então optei
1. Digite cor de fundo:. pela abreviação de fundo novamente. O plano de fundo
da div da página tornará o texto legível. (Eu mudo essa
2. Digite transparente (para permitir que o pai
cor para branco um pouco mais adiante neste capítulo.) Em
exibição do plano de fundo do elemento) seguida, você adiciona um plano de fundo aos links sobre
ou cor, onde cor é um nome de cor, cor os quais passa o mouse, para deixar claro que eles realmente
hexadecimal, cor RGB, cor RGBA, cor HSL são links. Você substitui esse efeito pelo logotipo do site
vinculado, fornecendo a ele um plano de fundo transparente
ou cor HSLA (consulte “Cores CSS” no para que o plano de fundo da página seja exibido durante
Capítulo 7) (D a F). o foco. Por fim, você adiciona uma cor de fundo à coluna
de recursos na div da barra lateral. Estou usando uma
classe para que o estilo possa ser reaproveitado se outra
Para alterar todas as propriedades do barra lateral ou item com estilo semelhante for adicionado posteriormente.
plano de fundo de uma só vez:

#contêiner {
1. Digite plano de fundo:. plano de fundo: url(../img/bg-bluebench.jpg)
repetir-y;
2. Especifique qualquer um dos back-backs aceitos
}
valores de propriedade de solo (conforme
descrito começando com “Para usar uma #página {
imagem de fundo” e continuando até plano de fundo: #fef6f8;
}
“Para alterar a cor de fundo”) em qualquer
ordem (B e D). um foco,
a: pairar,
a:ativo {
O padrão para cor de fundo é transparente.
plano de fundo: #f3cfb6;
O padrão para imagem de fundo é nenhum. O
}
padrão para repetição em segundo
plano é repetir. O padrão para anexo em
.logo a:hover {
segundo plano é rolagem. O padrão para
fundo: transparente;
posição de fundo é superior
}
esquerda (isto é o mesmo que 0 0).
.Barra Lateral {
Ao usar a abreviação de plano de fundo
propriedade, você não precisa especificar todas as plano de fundo: #f5f8fa;
propriedades. Mas esteja ciente de que se quaisquer }
propriedades não especificadas forem definidas com seus
padrões, elas poderão substituir regras de estilo anteriores.
296 Capítulo 11
As propriedades de plano de fundo não

são herdadas. Você só precisa definir
explicitamente valores padrão como transparente ou rolagem
quando você deseja substituir outra regra de estilo.
Se você usar a posição de fundo

propriedade com uma repetição, a posição
especifica onde a primeira imagem na repetição
começa. Por exemplo, no canto superior direito, 0 20px e assim
sobre.
Você pode usar valores negativos com a

propriedade background-position . Por exemplo,
posição de fundo: -45px 80px
posiciona a imagem à esquerda — e não à
esquerda — 45 pixels (para que você não veja
E O plano de fundo da div da página cobre completamente os primeiros 45 pixels horizontais da imagem) e
nossa imagem de plano de fundo de C. Resolveremos 80 pixels abaixo da parte superior do elemento.
isso em breve (com preenchimento). Observe como os
links que não estão sendo pairados compartilham o mesmo
Para criar um plano de fundo para a
plano de fundo da página, enquanto o link Sobre pairado
página inteira, defina a propriedade background
tem um plano de fundo de maior contraste para chamar
a atenção para ele. para o elemento body .
Se você especificar uma cor e um URL para

No plano de fundo, a cor será usada até que a
imagem no URL seja carregada, será vista
através de qualquer parte transparente da imagem
de plano de fundo e será exibida em qualquer área
do elemento que a imagem não cubra.
Escolha o texto e as cores de fundo

(e imagens) com cuidado para permitir
contraste suficiente entre os dois. Isto é
particularmente importante para usuários com deficiência visual.
F A cor de fundo da barra lateral é o tom de azul

mais claro que consegui – apenas o suficiente para realçá-
la.

Definir a altura ou A Limitar a largura do div do contêiner a 90% da

janela do navegador dá um pouco de ar e ajuda a
Largura de um elemento não parecer tão apertado (é o espaço em branco
na lateral em B). Ao reduzir a div da página
para 97,9167% da div do contêiner, você vê parte da
Você pode definir uma altura e largura em imagem de fundo ao lado (veja os comentários no
elementos como conteúdo de seção, parágrafos, código de exemplo no site do livro para saber como
cheguei a essa porcentagem; além disso, fique à
itens de lista, divs, imagens, vídeo, elementos de
vontade para usar percentagens mais convencionais).
formulário e muito mais (A e B). E ao definir a div principal para 71% da div da
Além disso, você pode definir elementos de página, você deixa espaço para a barra lateral, que
moverá para o lado posteriormente. O estilo de
conteúdo de frases (que são exibidos como embutidos
entrada define a largura do campo do formulário de
por padrão) para exibir: block; ou display: bloco pesquisa. Por último, as dimensões .photo
embutido; e, em seguida, aplique uma largura ou controlam o tamanho dos parágrafos ao redor das
imagens nas entradas do blog (corresponde à largura e altura das próprias im
altura a eles também. (Consulte “Exibindo e ocultando
elementos” para obter mais informações sobre o
#contêiner {
propriedade de exibição .) plano de fundo: url(../img/bg-bluebench.jpg) ÿ
repetir-y;
largura: 90%;
Para definir a altura ou
}
largura de um elemento:
#página {
1. Digite largura: w, onde w é a largura
plano de fundo: #fef6f8;
da área de conteúdo do elemento e pode
largura: 97,9167%;
ser expresso como um comprimento (com }
unidades como px e em) ou como uma porcentagem
#principal {
do elemento pai. Ou use auto para permitir que o
largura: 71%;
navegador calcule a largura (este é o padrão).
}
2. Digite altura: h, onde h é a altura do elemento e pode entrada[type="texto"] {

largura: 150px;
ser expressa apenas como comprimento (com
}
unidades como px e em).
Ou use auto para permitir que o navegador calcule .foto {
a altura (este é o padrão). altura: 75px;
largura: 100px;
}
298 Capítulo 11
Se você não definir explicitamente a largura

ou altura, auto será usado (consulte “Largura,
margens e automático”).
90% 10% Lembre-se de que um valor percentual é

relativo à largura do elemento pai—
não à largura original do próprio elemento.
O preenchimento, as bordas e a
margem não estão incluídos no valor da largura
(consulte “Largura, margens e automático”).
Você não pode definir uma altura ou

71% 29% largura em elementos exibidos como elementos
inline (como conteúdo de frase), a menos que
você os defina para display: inline-block ou display:
B O contêiner div, que inclui o div da página sombreada, bloquear. Consulte “Exibindo e ocultando
agora ocupa apenas 90% da janela do navegador. Parte de elementos” para obter mais informações sobre a exibição
sua imagem de fundo aparece na lateral porque a largura propriedade.
do div da página também foi reduzida. A largura da div
principal é 71% da div da página, não da div do contêiner Larguras e alturas não são herdadas.
ou da janela do navegador.
Há também largura mínima, altura mínima,

propriedades de largura máxima e altura máxima C.
C A propriedade max-width é ideal para definir o limite externo
(Caso você queira oferecer suporte ao Internet
do nosso layout fluido. No nosso caso, você não quer que
Explorer 6 para seu site, esteja ciente de que
ele fique muito largo, mesmo que os visitantes tenham displays
enormes. Se você quiser evitar que um elemento fique muito ele não oferece suporte a essas propriedades.)
estreito, você pode aplicar a propriedade min-width ,
embora dada a popularidade da navegação na Web em
telefones celulares e outros dispositivos menores, escolha
sabiamente se você deseja definir uma largura mínima.
#contêiner {
plano de fundo: url(../img/bg-bluebench.jpg)
repetir-y;
largura máxima: 950px;
largura: 90%;
}

Largura, margens e automático D Neste exemplo, defini a largura do div pai para 300 pixels. Este
será o nosso bloco contendo.
Para a maioria dos elementos exibidos em nível Então, ambos os parágrafos têm margens de 10 pixels,
de bloco por padrão, o valor automático para largura preenchimento de 5 pixels e bordas de 5 pixels em todos os lados.
é calculado a partir da largura do bloco que o contém O primeiro parágrafo tem a largura definida automaticamente, já
que auto é o valor de largura padrão , a menos que você
menos o preenchimento, as bordas e as margens especifique o contrário. O segundo parágrafo (que tem
do elemento. O bloco que contém class="example" no HTML) está definido em 200px.
é a largura que o elemento obtém de seu pai.
div {
fundo: amarelo;
Elementos como imagens têm largura automática largura: 300px;
igual ao seu valor intrínseco; isto é, as dimensões }
reais do arquivo externo
p,
(como as imagens da página de exemplo, que .exemplo {
têm 100 x 75). Os elementos flutuantes têm fundo: branco;
uma largura automática de 0. Inline não flutuante borda: 6px azul sólido;
os elementos ignoram completamente a margem: 10px;
preenchimento: 5px;
propriedade width (o que significa que você não
}
pode definir uma largura em elementos como em
e cite , a menos que você os defina como .example { /* o segundo parágrafo */
display: inline-block ou display: block). fundo: branco;
Consulte “Fazendo elementos flutuarem” para cor da borda: roxo;
largura: 200px;
saber mais sobre flutuadores e “Exibindo e ocultando
}
elementos” para obter mais informações sobre exibição.
Por que a altura mínima é frequentemente preferível à altura

A menos que você tenha certeza de que o conteúdo de um elemento não ficará mais alto, quase sempre é melhor evitar atribuir
uma altura a ele em sua folha de estilo. Na maioria dos casos, você permitirá que o conteúdo e o navegador determinem a
altura automaticamente. Isso permite que o conteúdo flua conforme necessário em vários navegadores e dispositivos.
Se você definir uma altura e o conteúdo aumentar, ele poderá sair da caixa do elemento, o que pode não ser o que você
esperava. Os navegadores compatíveis com os padrões não expandem a altura automaticamente nesta circunstância; eles
acreditam na sua palavra quando você especifica uma altura e a cumprem. (O IE6 não segue o padrão, por isso expande a
altura.)
No entanto, se você sempre quiser que o elemento tenha pelo menos uma certa altura, defina uma altura mínima. Se o
conteúdo aumentar posteriormente, a altura do elemento aumentará automaticamente conforme desejado. Essa é a diferença
entre altura e altura mínima, bem como largura e largura mínima.
E caso você esteja se perguntando, há vários motivos pelos quais o conteúdo pode crescer. Seu conteúdo pode vir de um
banco de dados ou feed ou ser gerado pelo usuário. Além disso, o visitante pode aumentar o tamanho da fonte no navegador,
substituindo o estilo que você especificou.
300 Capítulo 11
Margem de A largura automática Margem de Se você definir manualmente os

10 pixels é de 258 pixels 10 pixels
valores de largura, margem esquerda e margem
direita , mas junto com a borda e o preenchimento
eles não forem iguais ao tamanho do bloco que os
contém, algo terá que acontecer. E, de fato, o navegador
irá substituí-lo e definir a margem direita como
automática (D e E).
Se você definir manualmente a largura , mas definir

uma das margens como automática, essa
margem aumentará ou diminuirá para compensar
a diferença.
No entanto, se você definir manualmente a largura

mas deixe ambas as margens definidas como
auto, ambas as margens serão definidas com
o mesmo valor máximo (resultando na
centralização do seu elemento; por exemplo,
#container { margin: 20px auto; }
centraliza a página). Foi exatamente isso que fiz na
página de exemplo, conforme mostrado na próxima
seção, “Definindo as margens em torno de um
elemento”.
58 pixels
de espaço
largura: 200px
largura: 300px
(contendo bloco)
E Se a largura for automática, como no parágrafo superior,

seu valor será derivado da largura do bloco que o contém
(amarelo) menos suas próprias margens, preenchimento
e borda. Se a largura for definida manualmente (como no
parágrafo inferior), a margem direita geralmente é
ajustada para compensar a folga.

Definir as margens R Um dos principais ajustes de margem é no div do

contêiner. Quando você define dois valores, o primeiro é
em torno de um elemento aplicado às margens superior e inferior, o segundo é aplicado
às margens esquerda e direita.
Você definirá as margens superior e inferior para 20px
A margem é a quantidade de espaço transparente para dar um pouco de espaço ao nosso design. Com uma
entre um elemento e o próximo (A e B). Consulte “O largura explícita já definida no container, as margens
esquerda e direita de auto fazem com que a página seja
modelo da caixa” para
centralizada horizontalmente no navegador B.
como ele se relaciona com a borda de um elemento e
preenchimento. #contêiner {
plano de fundo: url(../img/bg-bluebench.jpg) ÿ
repetir-y;
Para definir as margens de um elemento:
margem: 20px automático;
Digite margin: x, onde x é a quantidade de espaço largura máxima: 950px;
largura: 90%;
desejado a ser adicionado, expressa como
}
comprimento, uma porcentagem da largura do
elemento pai ou automático.
Se você usar um valor para margem, esse

valor será aplicado igualmente a todos os quatro lados.
Se você usar dois valores, o primeiro valor se aplica à
parte superior e inferior e o segundo valor se aplica à
direita e à esquerda A. Se você usar três valores, o primeiro
se aplica à parte superior, o segundo à direita e à
esquerda, e o terceiro para baixo.
Se você usar quatro valores, eles serão aplicados
na parte superior, direita, inferior e esquerda, na ordem
C no sentido horário.
Você também pode adicionar um dos seguintes

ing sufixos à propriedade margin para
aplicar uma margem a um único lado: B A configuração de margem automática centraliza o
-top, -bottom, -left ou -rightC. Não layout na janela dividindo os 10% restantes da largura da
deve haver espaço após a margem janela do navegador que não é usada pelo contêiner div
(por exemplo, margin-top: 10px). entre as margens direita e esquerda.
(Não se preocupe com os marcadores aparecendo no lado
esquerdo da página; cuidaremos disso mais adiante neste
capítulo.)
302 Capítulo 11
C A div da barra lateral (com id="relacionado") terá uma O valor automático da propriedade
margem esquerda de 72%, portanto está mais distante margin depende do valor da propriedade
da esquerda do que a div do conteúdo principal, que width (veja “Definindo a altura ou largura de um
tem uma largura de 71%. A barra lateral continuará a elemento).
aparecer abaixo da div de conteúdo principal até que
você flutue esta última um pouco mais tarde no capítuloD.
Se um elemento for colocado acima de
Também adicionei margens a vários outros elementos,
outro, apenas a maior das duas margens tocantes—
como abaixo do cabeçalho, acima do rodapé e à direita e
isto é, as margens inferior e superior dos
na parte inferior das entradas parciais do blog para dar-
elementos são usadas. Diz-se que o outro
lhes algum espaço para respirar E.
entrou em colapso. As margens esquerda e direita
h1 { não entram em colapso.
tamanho da fonte: 1,5em; /*24px/16px*/
margem inferior: 0,75em; As margens não são herdadas.
transformação de texto: minúscula;
} Defino as margens para alguns elementos
a mais do que os mostrados em A ou C. Você
de lado h2 { pode ver o código completo em
tamanho da fonte: .9375em; /* 15px/16px*/
www.bruceontheloose.com/htmlcss/examples/
margem inferior: 3px;
chapter-11/finished-page.html .
transformação de texto: minúscula;
}
#cabeçalho {
}
#rodapé {
margem superior: 10px;
}
.entry { /* trecho do blog */

margem: 0,5em 2em 0;
72%
}
.contínuo {
D A barra lateral está agora a 72% da borda esquerda.
estilo da fonte: itálico;
margem superior: -5px;
}
#relacionado { /* a barra lateral */

margem esquerda: 72%;
}
E Agora há mais espaço entre vários

os elementos.

Adicionando A Semelhante à configuração das margens, quando você define

quatro valores para preenchimento, eles são atribuídos à parte
preenchimento ao redor de um elemento
superior, direita, inferior e esquerda, nessa ordem no sentido
horário. Então aqui, haverá preenchimento apenas na parte
superior e direita de B.
Padding é exatamente o que parece: espaço
extra ao redor do conteúdo de um elemento, mas #contêiner {
dentro da borda. Você deve se lembrar da plano de fundo: url(../img/bg-bluebench.jpg) ÿ repetir-y;
minha analogia anterior: o preenchimento é como

margem: 20px automático;
o tapete entre uma foto (o conteúdo) e um largura máxima: 950px;
porta-retratos (a borda). largura: 90%;
Você pode alterar a espessura do preenchimento preenchimento: 30px 10px 0 0;
(A, C e E), mas não sua cor ou textura, mas }
a cor de fundo e a imagem de um elemento são

exibidas na área de preenchimento (B, D, F e G).
Para adicionar preenchimento ao redor de um elemento:
Digite padding: x, onde x é a quantidade de

espaço desejado a ser adicionado, expressa em
unidades (normalmente em ems ou pixels) ou
B Quando você adiciona preenchimento ao div do contêiner, é
como uma porcentagem da largura do elemento criado um espaço entre sua margem (porque sua borda é 0
pai (20%). por padrão) e seu conteúdo (neste caso, o div da página).
Como resultado, mais imagem de fundo do contêiner é
revelada.
C Agora você adicionará preenchimento ao conteúdo da div da

página – na parte superior, direita e inferior, mas não à esquerda.
#página {
plano de fundo: #fef6f8;
preenchimento: 10px 10px 10px 0;
largura: 97,9167%; /*940px/960px*/
}
D Com o preenchimento adicionado ao div da página, observe os

10 pixels extras entre “photobarcelona” e a borda superior.
304 Capítulo 11
E Substituí a cor de fundo temporária da página por branco (#fff) Tal como acontece com a propriedade margin , se
F. Também adicionei um pequeno preenchimento em você usar um valor, o preenchimento especificado será
todos os quatro lados da barra lateral para que o conteúdo aplicado igualmente a todos os quatro lados E. Se você
não escorra para as bordas, bem como preenchimento
usar dois valores, o primeiro valor será aplicado à parte
à esquerda de a lista ordenada de modo que os marcadores
superior e inferior e o segundo valor será aplicado à
recuem G. (Veja o Capítulo 15 para obter mais informações sobre listas.)
direita e à esquerda. Se você usar três valores, o primeiro
se aplica à parte superior, o segundo à direita e à
#página {
esquerda e o terceiro à parte inferior. Se você usar quatro
plano de fundo: #fff;
valores, eles serão aplicados na parte superior, direita,
preenchimento: 10px 10px 10px 0;
inferior e esquerda, no sentido horário (A e C).
largura: 97,9167%; /*940px/960px*/
Você também pode adicionar um
}
dos seguintes sufixos à propriedade
padding para aplicar preenchimento a um
.Barra Lateral {
único lado: -top, -bottom, -left ou -right. Não
plano de fundo: #f5f8fa;
deve haver espaço entre a palavra padding
preenchimento: 10px;
e o sufixo (por exemplo, padding-right: 1em).
}
O preenchimento não é herdado.

.arquivar ol {
/* altera os itens da lista de números para ÿ
marcadores */
estilo de lista: disco;
/* recua os marcadores */
preenchimento à esquerda: 18px;

}
F Quando o plano de fundo da página está definido como

branco, fica claro por que você também não adicionou
preenchimento à esquerda. Fiz vários outros ajustes de
preenchimento que você pode estudar nos arquivos de código no
site do livro.
G A cor de fundo da
barra lateral aparece
através dos 10px de
preenchimento
adicionados a todos os quatro
lados em E.

A Quando você flutua um elemento para um lado, o

Fazendo os elementos flutuarem conteúdo que normalmente seria exibido depois dele flui
ao redor dele. Aqui, flutuei os contêineres de imagens
Você pode fazer os elementos flutuarem
(um p com class="photo") para a esquerda para obter
em um mar de texto (ou outros elementos). o texto introdutório da entrada do blog próximo a eles.
Você pode usar esta técnica para envolver o (Você também pode aplicar float diretamente em img
elementos.) Como você pode ver em B, o texto envolve
texto em imagens (A e B) ou figuras para um contêiner de imagem quando ele é mais alto que ele.
criar layouts de várias colunas e muito mais. Este efeito é desejável em muitos casos, mas para esta
página quero que o texto continue para baixo,
independentemente do seu comprimento. Consigo isso
Para envolver o texto em torno dos elementos: adicionando uma margem esquerda ao contêiner ao redor do texto C.
1. Digite float:.
.foto {
2. Digite left se desejar que o elemento fique à flutuar: esquerda;
esquerda e o restante do conteúdo flua altura: 75px;
largura: 100px;
para a direita (A a G).
}
Ou digite right se desejar que o elemento
fique à direita e o restante do conteúdo flua
para a esquerda.
B Como os contêineres .photo flutuam para a esquerda,

o texto sobe ao lado deles e envolve-os quando fica mais
alto.
C Ao dar ao contêiner ao redor do texto uma margem

esquerda de 110px, seu conteúdo sempre é exibido
longe da borda esquerda, mesmo quando é mais alto
que o contêiner da imagem. Como resultado, ele não envolve mais
ao redor D. Não relacionado a esta tarefa, incluí a margem
superior de -5px para que o texto se alinhasse com o
topo da imagem à sua esquerda.
/* Esta classe está na div que contém ÿ o texto

introdutório e o ÿ link "continuar" que o
segue. */
.introdução {
margem: -5px 0 0 110px;

D O texto de introdução não quebra mais. Em seguida, }
você flutuará a div principal E para que a barra lateral
apareça ao lado dela F.
306 Capítulo 11
E Agora, você usará a mesma abordagem para flutuar o Ou digite none se não quiser que o elemento
conteúdo principal para a esquerda para que a barra lateral flutue. (nenhum é o valor padrão, portanto,
apareça ao lado dele. (Anteriormente, você empurrava a
barra lateral para a direita - mas ainda abaixo - do conteúdo
você só o definiria explicitamente se
principal, aplicando uma margem esquerda a ela.) estivesse substituindo outra regra que
fizesse flutuar um elemento que você não
#principal {
desejava em uma circunstância específica.)
flutuar: esquerda;
largura: 71%; 3. Use a propriedade width (veja “Configuração
} a altura e a largura de um elemento”) para
definir explicitamente a largura do elemento.
/* Aplicamos esta margem à barra lateral ÿ anteriormente.
*/
#relacionado { Lembre-se de que a direção escolhida se
margem esquerda: 72%; aplica ao elemento que você está flutuando, não
} aos elementos que fluem ao seu redor. Quando
você flutua: para a esquerda, o resto da página flui
para a direita e vice-versa.
Alguns elementos (por exemplo, fraseado

conteúdo) sem uma largura explícita pode não
flutuar corretamente.
A propriedade float não é herdada.
F Aqui, o div principal flutua para a esquerda, então a G Como o div principal flutua para a esquerda, todos os
barra lateral simplesmente flui ao longo do lado direito do div outros elementos, incluindo o rodapé, fluem em torno dele, a
principal esquerdo flutuante. Na verdade, o rodapé faz o mesmo menos que você diga o contrário. E você dirá o contrário
bem, G, porque ele segue imediatamente a barra lateral na próxima seção.
do HTML. (Você colocará o rodapé de volta onde ele
pertence na próxima seção.) Observe que não era estritamente
necessário dar à barra lateral (#relacionado) uma grande margem
esquerda para obter o efeito flutuante, assim como não era.
quando você flutuou o texto do blog em torno dos contêineres
de imagens (A e B). Mas da mesma forma que evitou o
empacotamento em C
e D, a margem esquerda evita que o texto da barra lateral fique
abaixo do div principal se a barra lateral ficar mais alta que
o div principal. Além disso, a cor de fundo da barra lateral se
estenderia por todo o div principal se a barra lateral não
tivesse margem esquerda.

R Na página anterior, você viu que o rodapé fluía ao redor

Controlando onde da div principal flutuante. Aqui você aplica clear:
Elementos flutuam ambos; para evitar isso B. Você poderia usar clear: left;
em vez disso, já que o único elemento flutuante com o
qual você precisa se preocupar está flutuando à
Você pode controlar quais elementos um elemento
esquerda. Mas não custa nada limpar os dois lados e
mento pode flutuar próximo e que não pode. pode ser útil se o design ficar mais complexo.
Para evitar que um elemento flutue próximo a algo
que você não deseja, use a propriedade clear A. #rodapé {
limpar ambos;
}
Para controlar onde os elementos flutuam:
1. Digite claro: (A e B).
2. Digite left para evitar que os elementos flutuem à

esquerda do elemento que você está
estilizando como C.
Ou digite right para evitar que os elementos

flutuem à direita do elemento que você está
B A propriedade clear indica que o elemento em questão (o
estilizando.
rodapé neste caso) não deve fluir ao redor do elemento
Ou digite ambos para evitar que os elementos flutuante, mas deve ser exibido após o elemento flutuante.
flutuem para qualquer lado do elemento que

você está estilizando.
C Ao definir o estilo do cabeçalho, o logotipo (que
Ou digite nenhum para permitir que os elementos inclui o slogan) flutua para a esquerda. A divisão
fluam para ambos os lados do elemento que você está estilizando. ao redor da caixa principal de navegação e pesquisa flutua
para a direita. E dentro dessa div, cada item da lista de
navegação flutua para a esquerda para que apareçam um
ao lado do outro em vez de empilhar verticalmente.
.logo {
flutuar: esquerda;
tamanho da fonte: 2,5em; /* 40px/16px*/
margem: 0;
}
/* Esta div envolve tanto a navegação ÿ

principal quanto o formulário de pesquisa. */
#masthead div {
flutuar: certo;
}
/* :::: Navegação do site :::: */

.nome em {
flutuar: esquerda;
tamanho da fonte: .75em; /* 12px/16px*/
preenchimento: 0 25px 0 3px;
}
308 Capítulo 11
Você adiciona a propriedade clear ao

elemento cujos lados você deseja que estejam
livres de objetos flutuantes (D a F). Portanto, se
você deseja que um elemento não seja exibido
até que o lado direito esteja livre de elementos
flutuantes (e qualquer coisa fluindo para o lado
dele), adicione clear: right; para ele (e não para os
D A maior parte do layout do masthead está correta,
elementos flutuantes).
mas o conteúdo abaixo do masthead, especialmente a
barra lateral, foi movido para cima por causa dos flutuadores.
Uma extensão envolve o slogan da página.
Isso ocorre porque a altura do elemento que contém
Embora não seja mostrada, a folha de estilo
o masthead (o cabeçalho) foi recolhida, uma vez que
contém uma regra que diz .logo span { display:
não levava em conta a altura dos elementos flutuantes
dentro dele. bloquear; }. Esta regra faz com que o intervalo
seja exibido em sua própria linha, assim como um
parágrafo ou outros elementos exibidos como blocos por padrão.
E Para limpar os flutuadores no cabeçalho para que o Consulte “Exibindo e ocultando elementos”
o conteúdo principal e os divs da barra lateral não fluem para obter mais informações.
para ele, você pode adicionar um div ao redor dos
divs principal e da barra lateral e aplicar clear:
ambos; para isso. Mas você deseja manter o HTML o
mais enxuto possível, então isso não é o ideal. Outra
forma é usar uma solução muito popular conhecida como
clearfix. Tudo o que é necessário é aplicar class="clearfix" ao cabeçalho.
Supondo que o CSS .clearfix já esteja na folha de
estilos, o problema está resolvidoF. Veja a barra
lateral na próxima página para mais detalhes.
<div id="contêiner">
<div id="página">
<header id="masthead" role="banner" ÿ
class="clearfix">
...
</header>
<div id="principal" role="principal">

...
</div>
F O método clearfix limpa magicamente o

o masthead flutua para que o conteúdo a seguir
apareça abaixo dele.

Outros métodos para limpar carros alegóricos

Existem algumas outras maneiras de resolver a limpeza dos flutuadores no cabeçalho para que o conteúdo principal
e da barra lateral não fluam para ele D.
O método de estouro
A primeira e mais simples maneira é adicionar isto à sua folha de estilos:
#cabeçalho {
estouro: oculto;
}
(A propriedade overflow será abordada posteriormente neste capítulo.) Usando overflow: auto; também
funciona em alguns casos, mas você poderá ver uma barra de rolagem, o que é obviamente indesejável. E
em alguns casos, overflow: hidden; cortará o conteúdo, então fique atento a isso. Em meu próprio trabalho,
uso overflow para resolver problemas de flutuação, como aquele no cabeçalho, quando ele é capaz de fazer o trabalho.
Quando não está, eu uso o clearfix E. Geralmente, o clearfix é o método mais consistente, por isso mostrei
como fazer isso no exemplo, embora seja meu último recurso.
O método clearfix
O CSS para .clearfix passou por várias permutações ao longo dos anos, à medida que os membros da comunidade
da Web o refinaram. A versão mostrada abaixo foi retirada do excelente HTML5 Boilerplate
(www.html5boilerplate.com), um esforço iniciado por Paul Irish e posteriormente com a contribuição de vários
desenvolvedores da comunidade. Encorajo-vos a dar uma olhada.
Nicolas Gallagher, que agora é um membro central do projeto, contribuiu com o seguinte clearfix
código. Simplesmente copie e cole em sua folha de estilo e aplique class="clearfix" ao elemento que contém os
flutuadores E.
.clearfix:antes, .clearfix:depois { conteúdo: ""; exibição: mesa; }

.clearfix:depois {claro: ambos; }
.clearfix {zoom: 1; }
Não vou explicar o que tudo isso significa, pois é um pouco complicado. Você pode ler mais sobre isso em http://
nicolasgallagher.com/micro-clearfix-hack/ (esteja avisado que a discussão é bastante técnica).
Resumo
Há uma diferença sutil entre usar a propriedade clear e usar os métodos overflow ou clearfix . Com clear, você
aplica ao elemento que não deseja fluir em torno de um elemento flutuante. Os outros dois são métodos que
você aplica a um contêiner do elemento ou elementos flutuantes.
310 Capítulo 11
R Você adiciona mais alguns toques de

design ao implementar essas bordas. No caso da Definindo a Fronteira
borda pontilhada na parte inferior do cabeçalho, ela
Você pode criar uma borda ao redor ou
também ajuda os visitantes a distinguir rapidamente
o cabeçalho do resto da página. lados individuais de um elemento e, em seguida,
defina sua espessura, estilo e cor A. Se você
#cabeçalho {
especificou qualquer preenchimento (consulte
borda inferior: 2px pontilhado #1d3d76;
“Adicionando preenchimento ao redor de um
preenchimento inferior: 20px; elemento”), a borda abrange tanto o
} preenchimento quanto o conteúdo do elemento.
.entrada {
borda direita: 2px tracejado #b74e07; Para definir o estilo da borda:
margem: 0,5em 2em 0; Digite estilo de borda: tipo, onde tipo
} é nenhum, pontilhado, tracejado, sólido,
#rodapé {
duplo, ranhura, crista, inserção ou início.
limpar ambos; Para definir a largura da borda:
} Digite border-width: n, onde n é a largura
desejada, incluindo unidades abreviadas (por
exemplo, 4px).
Para definir a cor da borda:

Digite border-color: color, onde color
é um nome de cor, valor hexadecimal ou cor
RGB, HSL, RGBA ou HSLA (consulte “Cores CSS”
no Capítulo 7).
B Observe que como uma borda direita é aplicada a cada

elemento da seção de entrada e não ao elemento principal
div, ele para e inicia para cada entrada. Ao contrário das
bordas do cabeçalho e do rodapé, elas são tracejadas.
C O rodapé tem uma borda superior com o mesmo

estilo (pontilhada) daquela abaixo do cabeçalho, mas
com uma cor diferente. E semelhante a esse, ajuda a
separar visualmente o rodapé de outros conteúdos.

Para definir uma ou mais

D Neste exemplo, defino o preenchimento e a borda
padrão para cada parágrafo. Então, para o
propriedades de borda de uma só vez com um atalho:
primeiro parágrafo, defino a largura da borda para
1. Digite borda. todos os quatro lados e, em seguida, o estilo
para cada lado. Para os quatro parágrafos restantes,
2. Se desejar, digite -top, -right, -bottom ou -left foi mais fácil repetir os 10px do que separar o estilo e
para limitar o efeito a um único lado. a cor em duas propriedades separadas.
p{
3. Se desejar, digite -property, onde borda: 10px vermelho sólido;
preenchimento: 15px;
propriedade é estilo, largura ou cor, para
}
limitar o efeito a uma única propriedade.
4. Digite : (dois pontos). p.ddd {
largura da borda: 4px;
5. Digite os valores apropriados (como estilo de borda: pontilhado tracejado
descritas nas três técnicas da página duplo ÿ sólido;
anterior). Se você pulou a etapa 3, }
poderá especificar qualquer um ou todos
p.inserir {
os três tipos de propriedades de borda (por
borda: inserção azul de 10px;
exemplo, border:1px solid ou border- }
right: 2px tracejado verde;).
Se você especificou um tipo de p.início {
propriedade na etapa 3, use um valor borda: 10px verde inicial;
}
aceito apenas para essa propriedade
(por exemplo, estilo borda direita: pontilhado;). p.groove {
borda: sulco roxo de 10px;
}
As fronteiras não são herdadas.
p.ridge {
As propriedades individuais
borda: cume laranja de 10px;
da borda (largura da borda, estilo da borda
}
e cor da borda) podem ter de um a quatro valores.
Se você usar um valor, ele será aplicado aos
quatro lados. Se você usar dois, o primeiro será
usado para a parte superior e inferior e o segundo
para a direita e a esquerda. Se você usar três, o
primeiro será usado para a parte superior, o segundo
para a direita e a esquerda e o terceiro para a parte
inferior. E se você usar quatro, eles serão aplicados
na parte superior, direita, inferior e esquerda, no sentido horário.
312 Capítulo 11
Você deve definir pelo menos o estilo

de exibição de uma borda. Se não houver estilo,
não haverá fronteira. O padrão é nenhum.
Se você usar um atalho, como border ou

border-left (e assim por diante), as propriedades para
as quais você não fornece valores serão definidas com seus padrões.
Então borda: 1px preto; significa borda: 1px
black none;, o que significa que você não obterá
uma borda (mesmo se você tiver especificado um
estilo anteriormente com border-style).
A cor padrão é o valor do

propriedade color do elemento (veja “Definindo
a cor” no Capítulo 10).
O IE (até a versão 7 inclusive) não pode exibir

estilos de borda de dois tons muito escuros, como
groove, cume, início e inserção. Eles saem sólidos.
A propriedade border pode ser usada

para tabelas e suas células.
CSS3 apresenta a imagem de borda

propriedade. O suporte ao navegador é bom
fora do Internet Explorer (consulte http://
caniuse.com/#search=border-image ). Você
E O tratamento que cada navegador dá aos estilos de
pode aprender sobre border-image em www.sitepoint.com/
borda não é exatamente o mesmo, mas esta
css3-border-image/.
visualização do Firefox dá uma ideia das diferenças
entre os tipos de estilo.

Elementos de
compensação no fluxo natural
A Embora a data esteja alinhada à direita, ela está em
Cada elemento tem uma localização natural em um
uma linha separada do título e, portanto, aparece
fluxo da página A. Mover o elemento em abaixo dele e muito próxima do texto de entrada.
relação a este local original é chamado de
posicionamento relativo (B e C). Os elementos B Lembre-se de especificar o posicionamento
circundantes não são afetados de forma alguma C. relativo e também fornecer o deslocamento.
Pode ser um valor positivo ou negativo. Usar ems
manterá o deslocamento proporcional ao tamanho
Para compensar elementos do texto. Como 1em é igual ao tamanho da fonte
dentro do fluxo natural: do elemento, neste exemplo a declaração move a
data para cima (por causa de -1em) C.
1. Digite posição: relativa; (não esqueça do ponto
.data de entrada {
e vírgula; o espaço é opcional).
altura da linha: 1;
2. Digite superior, direita, inferior ou esquerda. margem: 0 1em 0 0;
preenchimento: 0;
Em seguida, digite :v, onde v é a distância posição: relativa;
desejada que você deseja deslocar o topo: -1em;
elemento de sua localização natural, }
expressa como um valor absoluto ou relativo
(10px ou 2em, por exemplo) ou como uma
porcentagem.
3. Se desejar, repita a etapa 2 para instruções
adicionais, separando cada propriedade/
par de valores com ponto e vírgula, como de costume.
314 Capítulo 11
O “relativo” no posicionamento relativo

refere-se à posição original do elemento, não aos
elementos circundantes. Você não pode mover
um elemento em relação a outros elementos.
Em vez disso, você o move em relação ao local
C Ao aplicar um deslocamento negativo à data, você
onde costumava estar. Sim, isso é importante!
a empurra para o espaço do bloco anterior. Nesse
caso, isso resulta no alinhamento da data com o
título da seção. Os elementos seguintes não são Os outros elementos não são afetados
afetados de forma alguma. pelos deslocamentos – eles fluem em relação à
caixa que contém o elemento original.
Dependendo dos valores superior, direito,
inferior ou esquerdo , seu conteúdo relativamente
posicionado pode se sobrepor a outro conteúdo.
Use a propriedade z-index para especificar

a ordem de empilhamento dos elementos que se
sobrepõem quando posicionados como relativo,
absoluto ou fixo. Consulte “Posicionamento de
Elementos em 3D” para obter detalhes.
Os deslocamentos não funcionam, a menos que

você também esteja usando a propriedade position .
Defina um elemento para a posição: estático

para substituir uma posição: configuração relativa.
static é o valor padrão para elementos, e é por
isso que eles aparecem no fluxo normal de
documentos. Veja um exemplo em “Posicionando
Elementos em 3D”.
O posicionamento não é herdado.

Elementos de posicionamento
Absolutamente R Nosso formulário de pesquisa ainda está
abaixo da navegação principal porque faz parte do
Conforme observado, os elementos da sua
fluxo normal do documento. Você deseja deslocá-lo
página da Web geralmente fluem na ordem para o canto superior direito do cabeçalho que o contém.
em que aparecem no código-fonte HTML A. Ou
seja, se o elemento img vier antes do p, a B Ao posicionar o formulário de forma absoluta, retirei-o
imagem aparecerá antes do parágrafo. completamente do fluxo de documentos. Ele não sabe que existe
Você pode tirar elementos do normal outro conteúdo e vice-versa. Este código sozinho não alcança
os resultados desejados porque, a menos que você especifique
fluir - e posicioná-los absolutamente - o contrário, um elemento com posição: absoluto é posicionado
especificando sua posição precisa em em relação ao elemento body , como você pode ver em C.
relação ao corpo B ou ao elemento ancestral

D posicionado mais próximo.
#formato de cabeçalho {
posição: absoluta;
Para posicionar os elementos de forma absoluta: superior: 7px;
direita: 0;
1. Digite posição: absoluta; (não esqueça do }
ponto e vírgula; o espaço é opcional).
2. Se desejar, digite superior, direita, inferior ou

esquerda.
Em seguida, digite : v, onde v é expresso

como a distância desejada que você deseja
deslocar o elemento de seu ancestral
(10px ou 2em, por exemplo) ou como
uma porcentagem do ancestral. (Veja a
segunda dica para uma nota relacionada.) C O formulário de pesquisa exibe 7 pixels da parte superior do
corpo e 0 da direita, em relação ao corpo.
3. Se desejar, repita a etapa 2 para instruções
adicionais, separando cada propriedade/
D eu configurei o contêiner div do formulário para a posição:
par de valores com ponto e vírgula, como de costume.
relativo; portanto, o formulário será posicionado absolutamente em
4. Se desejar, adicione posição: relativa relação ao div, não ao elemento body . Isso coloca a caixa de
pesquisa onde você deseja, mas introduz outro problema
ao elemento ancestral para o qual você
E.
deseja que seu elemento absolutamente
posicionado seja deslocado D. Se você /* Esta div envolve tanto o formulário de pesquisa
pular esta etapa B, o elemento será quanto ÿ a navegação principal. */
#masthead div {
deslocado em relação ao corpo C.
flutuar: certo;
posição: relativa;
}
#formato de cabeçalho {
superior: 7px;
direita: 0;
}
316 Capítulo 11
Porque elementos absolutamente posicionados

são retirados do fluxo do documento, eles podem
se sobrepor entre si e com outros elementos F.
(Isso nem sempre é ruim.)
Se você não especificar um deslocamento para

E O formulário de pesquisa agora exibe 7 pixels da
um item posicionado de forma absoluta, o item
borda superior de seu contêiner div e 0 à direita dele.
(O espaço em branco extra acima e à direita é o aparecerá em sua posição natural, mas não afetará o
preenchimento de 10px que você definiu em fluxo dos itens subsequentes.
#page.) No entanto, ele está no topo da navegação.
Não é bom. Conforme mencionado, quando um Existe também um tipo de posicionamento fixo.
elemento é posicionado de forma absoluta, ele é retirado Quando um visitante rola a janela do navegador, o
do fluxo do documento, de modo que a navegação é conteúdo da página geralmente sobe ou desce.
exibida no mesmo lugar que seria se o formulário de Quando você define um elemento para posição:
pesquisa não existisse. Vamos resolver isso F.
fixo;, é afixado na janela do navegador para
que não se mova quando o visitante rola para
F Uma margem simples no topo da navegação cima ou para baixo. O resto da página rola
empurra-o para baixo do formulário de pesquisa e alinha-o normalmente. O IE6 não oferece suporte fixo.
com o slogan no logotipo G.
Use a propriedade z-index para especificar
/* Esta div envolve tanto o formulário de pesquisa a ordem de empilhamento dos elementos que se
quanto ÿ a navegação principal. */ sobrepõem quando posicionados como relativo,
#masthead div { absoluto ou fixo. Consulte “Posicionamento de
flutuar: certo; Elementos em 3D” para obter detalhes.
posição: relativa;
} Defina um elemento para a posição: estático
para substituir uma posição: absoluto; contexto.
#formato de cabeçalho { static é o valor padrão para elementos, e é por
posição: absoluta; isso que eles aparecem no fluxo normal de
superior: 7px; documentos. Veja um exemplo em “Posicionando
direita: 0; Elementos em 3D”.
}
O posicionamento não é herdado.
.não são {

}
G O formulário de pesquisa e a navegação agora

são exibidos como você deseja. Melhor ainda, o
layout entre eles permanece intacto quando a página é
H mais estreito. Esta é uma boa notícia para visitantes
em telefones celulares e outros dispositivos com
telas.
H O formulário de pesquisa e a navegação movem-se
juntos como uma unidade porque ambos estão contidos
na mesma div. Quando o navegador é estreito, eles
deslizam sob o logotipo flutuante. A experiência
permanece utilizável porque o layout leva em conta
essas condições.

A Aqui está um exemplo rápido de código HTML seguido por

Posicionamento sua folha de estilo B, que é renderizada como C.
Elementos em 3D ...
<corpo>
Depois de começar a usar o posicionamento
<div class="caixa1">
relativo, absoluto ou fixo, é bem possível que
<p>Esta é a caixa 1</p>
você descubra que seus elementos se </div>
sobrepuseram, assim como aconteceu com o
formulário de pesquisa e a navegação principal. <div class="box2">
<p>Esta é a caixa 2</p>
Você pode escolher qual elemento deve ser exibido no topo (A
</div>
através de C).
<div class="box3">
Para posicionar elementos em 3D: <p>Esta é a caixa 3</p>
</div>
Digite z-index: n, onde n é um número que indica
o nível do elemento na pilha de <div class="box4">
objetos posicionados. <p>Esta é a caixa 4</p>

</div>
</body>
A propriedade z-index só funciona em </html>
elementos posicionados (isto é,
absolutos, relativos ou fixos). O exemploA
mostra apenas elementos absolutos , mas você
pode misturar e combinar e as configurações do
índice z serão aplicadas coletivamente, não
separadamente, dentro dos elementos absolutos, relativos e fixos .
Quanto maior o valor do índice z

propriedade, mais alto o elemento estará
na pilha (A e B).
318 Capítulo 11
B Esta folha de estilo demonstra que o Se você tiver itens aninhados dentro de um
elemento posicionado de forma absoluta (ou elemento que tenha um determinado índice z,
relativa ou fixa) com o número de índice z mais alto todos esses itens aninhados serão primeiro
sempre aparece no topo C, independentemente de ordenados de acordo com seus próprios índices z
onde ele aparece na ordem do HTML A. Isso também individuais e depois, como um grupo, ordenados no contexto maior.
mostra como position: static; pode ser útil. A
primeira regra define todos os quatro divs para position:
IE7 e versões anteriores não implementam z-index
absoluto;, mas então eu a substituo em .box3, definindo-
a de volta para o valor padrão de estático. Isso como esperado. Cada elemento posicionado inicia
retorna .box3 ao fluxo normal de documentos, portanto, seu próprio contexto de empilhamento em vez de
mesmo que tenha o número de índice z mais alto , respeitar a ordem de empilhamento de todos os
isso não tem efeito e .box3 estará sempre na parte inferior. elementos posicionados em toda a página como
deveria. Este problema e uma correção são demonstrados em http://
div { brenelz.com/blog/squish-the-internet-explorer-z-index-
plano de fundo: #ccc; bug/ . (Ignore o fato de que a solução é mostrada em
borda: 1px sólido #666; estilos embutidos. Coloque seu CSS em uma folha
altura: 125px; de estilos externa como faria normalmente.)
largura: 200px; A propriedade z-index não é herdada.
}
.caixa1 {
fundo: rosa;
esquerda: 110px;
superior: 50px;
índice z: 120;
}
.caixa2 {
fundo: amarelo;
esquerda: 0;
superior: 130px;
índice z: 530;
}
C As caixas posicionadas são empilhadas desde o ponto mais alto
índice z até o mais baixo. A terceira caixa está abaixo de todas
elas porque está no fluxo normal do documento.
.caixa3 {
altura: automático;
altura mínima: 125px;
posição: estática;
/* Não tem efeito na ordem de

empilhamento ÿ porque o elemento não é
ÿ posicionado como absoluto, relativo,
ÿ ou fixo. */
índice z: 1000;
}
.box4 {
fundo: laranja;
esquerda: 285px;
superior: 65px;
índice z: 3;
}

Determinando
como tratar o estouro
Os elementos nem sempre estão contidos em suas caixas.
Às vezes a caixa simplesmente não é grande o
suficiente. Por exemplo, uma imagem que seja mais larga
do que o seu recipiente irá sair dela.
Ou talvez você tenha posicionado o conteúdo fora da
caixa, seja com margens negativas ou com
posicionamento absoluto. Independentemente da
causa, você pode controlar a área fora da caixa do
elemento com o
propriedade de estouro .
Para determinar como o navegador

deve tratar o overflow:
A As imagens na parte inferior do rodapé se
1. Digite estouro:. transformam em diversas linhas quando a janela é
estreita. Isso geralmente é bom, porque você deseja
2. Digite visível para expandir a caixa do elemento para que seu conteúdo se adapte a diferentes condições. Mas
que seu conteúdo caiba. Isto é o apenas para mostrar como funciona a propriedade
overflow , você alterará esse comportamento temporariamente (B e C).
opção padrão.
Ou digite oculto para ocultar qualquer conteúdo

B Para exibir uma única linha de imagens,
que não caiba na caixa do elemento. independentemente da largura do navegador, você define
a altura do elemento ul que contém a lista de imagens
Ou digite scroll para sempre adicionar barras de para a altura das imagens maiores e, em seguida,
rolagem ao elemento para que o visitante define overflow como oculto.
tor pode acessar o overflow se assim desejar.
.miniaturas {
altura: 33px;
Ou digite auto para que as barras de rolagem estouro: oculto;
apareçam apenas quando necessário.
}
320 Capítulo 11
Na prática, não defendo esconder o

imagens como nos exemplos, porque é
preferível permitir que os usuários as visualizem
independentemente da largura do navegador
(lembre-se que celulares e tablets possuem telas
mais estreitas). Como o exemplo era apenas
para fins de demonstração, omiti as
declarações de altura e estouro da versão
completa da página no site do livro. Além
disso, eu não teria o hábito de incluir tantas
miniaturas em todas as minhas páginas, porque
são muitas imagens para carregar. Novamente,
fiz isso aqui para demonstrar os conceitos.
C Agora as imagens extras estão ocultas. Se você A propriedade overflow também é útil
ampliasse o navegador, mais imagens seriam exibidas na para parar carros alegóricos. Consulte “Outros
mesma linha. A seguir, mostrarei outra abordagem D, embora
métodos para limpar flutuações”.
seja feia neste caso E.
Observe que o IE6 estenderá

D Se você quiser restringir a área visível das imagens incorretamente o pai para ser tão grande quanto
a uma linha, mas permitir que os visitantes acessem o filho. A única exceção é se você definir a
todas elas através de uma barra de rolagem E quando propriedade overflow com qualquer valor, exceto
elas se espalharem por várias linhas, use overflow: auto; visível (o padrão), caso em que o pai diminuirá
em conjunto com a mesma altura de antes.
para seu tamanho normal e deixará a propriedade
overflow fazer seu trabalho.
.miniaturas {
altura: 33px; O valor padrão para overflow é
estouro: automático;
visível. A propriedade overflow não é herdada.
}
E Rolei para baixo perto da última linha de

imagens. Obviamente, isso não é atraente neste
contexto. Mas esta técnica pode ser útil em algumas
circunstâncias, embora com uma altura mais alta
definida no recipiente.

Alinhando Elementos
Verticalmente
A As imagens são alinhadas por padrão na parte inferior
Você pode alinhar elementos de muitas
a linha.
maneiras diferentes para que pareçam mais
organizados na página do que o
B Observe que o alinhamento é definido nas próprias
alinhamento padrão (A a C).
imagens e não nos itens li que as contêm.
(Veja mais sobre listas no Capítulo 15.)
Para alinhar elementos verticalmente:
.miniaturas img {
1. Digite alinhamento vertical:. alinhamento vertical: meio;
}
2. Digite linha de base para alinhar a linha de
base do elemento com a linha de base do pai.
Ou digite middle para alinhar o meio

do elemento com o meio do
pai.
C Agora as imagens estão alinhadas ao meio
Ou digite sub para posicionar o elemento
a linha.
como um subscrito do pai.
Ou digite super para posicionar o elemento
como sobrescrito do pai.
Ou digite text-top para alinhar a parte superior
do elemento com a parte superior do pai.
Ou digite text-bottom para alinhar a parte

inferior do elemento com a parte inferior do
o pai.
Ou digite top para alinhar o topo do
elemento com o topo do elemento mais alto
da linha.
Ou digite inferior para alinhar a parte

inferior do elemento com a parte inferior
elemento na linha.
Ou digite uma porcentagem da altura da

linha do elemento, que pode ser positiva
ou negativa.
A propriedade vertical-align funciona

somente em elementos exibidos em linha,
não em elementos exibidos como um bloco.
Veja a explicação de Chris Coyier em http://
css-tricks.com/2597-what-is-vertical-align/ para mais detalhes.
322 Capítulo 11
Mudando o cursor
Normalmente, o navegador cuida do formato
do cursor para você, usando uma seta na maioria
das vezes, um dedo apontando para destacar
os links A, entre outros. CSS permite que você
tome as rédeas (B e C).
A Quando você aponta para o link Início, o cursor Para alterar o cursor:
muda para uma mão apontadora e o link é
destacado, assim como qualquer outro link. 1. Digite cursor:.
2. Digite o ponteiro para o cursor que

B Atribuí class="current" ao link Home quando o geralmente aparece sobre links ( ), padrão
visitante está na página inicial. Ao fazer isso, para uma seta ( ) ou mira ( ), mover ( ),
posso alterar a cor padrão e a cor do cursor e do
plano de fundo dos estados de foco, para que o esperar ( ), ajuda ( ), texto ( ) ou progresso
link inicial não se pareça com um link. ( ).
(Como alternativa, você pode remover o elemento
a ao redor do link Home da navegação neste caso.) Ou digite auto para obter o cursor que
normalmente aparece nessa situação.
a.atual { Ou digite x-resize para obter uma seta de dupla

cor: #1d3d76; face, onde x é a direção cardeal que uma das
} setas deve apontar – ou seja, n (norte), nw
(noroeste), e (leste) e assim por diante. Por
a:hover.atual {
exemplo, o cursor de redimensionamento
fundo: branco;
cursor: padrão; .
eletrônico pode ter esta aparência:
}
Os cursores variam ligeiramente de navegador
para navegador e de sistema para sistema.
C Embora continue a ser um link real e ativo, ele não

se parece mais com um. Como você já está na página
para onde leva este link, isso faz sentido.

Exibindo e R Aqui está o HTML: três elementos img simples.

O do meio tem uma classe hide , da qual aproveitarei em um
exemplo mais tarde. Por padrão, img
Escondendo Elementos elementos são exibidos em linha B.
A página de exemplo em A ajuda a demonstrar ...

a diferença entre as propriedades de exibição <corpo>
e visibilidade . <img src="assets/img/top.jpg" width="300" ÿ
height="125" alt="No topo" />
A propriedade display é multifacetada. Você
<img src="assets/img/middle.jpg" ÿ
pode substituir o tipo de exibição natural de width="300" height="100" alt="No ÿ meio"
um elemento, como alterá-lo de inline class="hide" />
para bloquear (B a D) ou vice-versa. <img src="assets/img/bottom.jpg" ÿ
Há também um tipo de exibição híbrido width="300" height="125" alt="Na ÿ parte
inferior" />
chamado inline-block, que permite que um
</body>
elemento apareça na mesma linha que outro </html>
conteúdo, ao mesmo tempo que se comporta
como um elemento em nível de bloco. A
propriedade display também é útil para
evitar que um elemento e seu conteúdo
ocupem qualquer espaço visual da página
(E e F). Existem outros valores também (veja as dicas).
B Nenhum CSS é aplicado, então as imagens aparecem
Enquanto isso, o objetivo principal da próximas umas das outras porque os elementos img têm um
propriedade de visibilidade é controlar se estilo de exibição padrão : inline, assim como os elementos de
conteúdo de frases. (Se o navegador fosse mais estreito, as
um elemento é visível. Ao contrário da exibição imagens seriam ajustadas para caber.) É simples alterar seu estilo
propriedade, quando você oculta um elemento para que cada imagem ocupe sua própria linha em vez de C.
com visibilidade, um espaço em branco
mostra onde o elemento e seu conteúdo
C Alterando as imagens a serem exibidas: block;,
apareceriam de outra forma (G e H).
eles agora são exibidos em sua própria linha, assim
como os parágrafos e outros elementos exibidos como
blocos por padrão D.
imagem {
/* Faz com que os elementos sejam exibidos em suas

ÿ próprias linhas. */
exibição: bloco;
}
324 Capítulo 11
Para especificar como os

elementos devem ser exibidos:
1. Na regra da sua folha de estilo, digite display:.

2. Digite block para exibir o elemento em nível
de bloco (assim como iniciar um novo
parágrafo) (B a D).
D Parece uma imagem, mas são os mesmos três elementos

Ou digite inline para exibir o elemento
img do código de exemplo A. como inline (não é como iniciar um novo
A única diferença é que cada um deles é exibido como um parágrafo).
bloco em vez de conteúdo embutido, graças ao
regra simples aplicada em C. Deixei o navegador com a mesma Ou digite inline-block para exibir o elemento
largura para que você possa ver as imagens aparecerem em suas como embutido, mas com características de
próprias linhas apenas devido à alteração em sua propriedade de
nível de bloco, o que significa que você também
exibição .
pode atribuir as propriedades do elemento, como
largura, altura, margem e preenchimento,
E Você deve se lembrar que a segunda imagem tem a ocultação
em todos os quatro lados.
classe aplicada a ele A. Quando definimos hide para não ter
display . . .
Ou digite nenhum para ocultar o elemento
imagem { fornecido e removê-lo completamente
exibição: bloco; do fluxo de documentos (E e F).
}
Veja as dicas para um link para outro display
.esconder { valores.
/* Faz com que todos os elementos desta classe não
sejam ÿ display */
Mostrar nenhum;
}
F. _ . .nenhum vestígio da segunda imagem permanece.

(Restringi o navegador, mas isso não afeta o resultado
mostrado.)

Para controlar a visibilidade de um elemento: G Quando removemos o display: nenhum;

declaração da classe hide e altere a propriedade de
1. Na regra da sua folha de estilo, visibilidade para hidden . . .
digite visibilidade:.
imagem {
2. Digite oculto para tornar o elemento
exibição: bloco;
invisível sem removê-lo do fluxo de }
documentos (G e H).
.esconder {
Ou digite visível para revelar o elemento. /* Oculta todos os elementos desta classe */
visibilidade: oculta;
}
Se você usar display: none;, nenhum traço
visível permanecerá do elemento no navegador.
Não há espaço vazio F. Quando você usa
visibilidade: oculto;, o espaço que o elemento oculto
teria ocupado ainda permanece no fluxo de
documentos H. Todo o conteúdo (incluindo
quaisquer descendentes) dentro dos elementos
também é afetado . Por exemplo, se você definir display:
nenhum; para um elemento de artigo que
contém vários elementos p, figure e img ,
nenhum deles seria exibido. Se você definir a visibilidade:
escondido; ao artigo , um espaço em
branco (provavelmente grande!) seria exibido.
Veja o exemplo C em “Controlando onde os

elementos flutuam” para outro exemplo de
configuração de display: block; para um elemento
que possui display: inline; como seu estilo padrão.
Nesse caso, apliquei-o ao elemento span que
envolve o slogan do logotipo do site.
A propriedade display tem vários outros

valores também, embora o IE6 e o IE7 não suportem
alguns deles. Veja mais informações em http://
reference.sitepoint.com/css/display (não deixe
de ler os comentários também).
A propriedade de visibilidade não tem

H. _ . . um espaço vazio permanece onde costumava
para ser usado em conjunto com o display
estar a imagem oculta.
propriedade (ou vice-versa) como está em G.
A propriedade de visibilidade tem um

terceiro valor (além de herdar): colapso, que
você usa com certas partes dos elementos da tabela .
IE6 e IE7 não suportam isso. Saiba mais sobre o
colapso em http://reference.sitepoint.com/
css/visibilidade.
326 Capítulo 11

HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 238-351

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5 e CSS3 - Guia Prático e Visual (7 Edição) - 238-351

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Como você viu em “Construindo uma regra de estilo”

Depois de definir os seletores, você poderá criar 240

Construindo Seletores Nome do elemento desejado

O seletor determina quais elementos

n O tipo ou nome do elemento A.

C O primeiro seletor escolhe todos os elementos que

Os seletores podem incluir qualquer combinação

em.muito { Além disso, você pode aplicar as mesmas

O restante deste capítulo explica exatamente

D Você pode ser mais específico prefixando uma classe

E Neste exemplo, o seletor escolhe um elemento que pertence à

F Você pode usar colchetes para adicionar informações

Definindo Seletores 215

Para selecionar elementos para

A menos que você especifique o contrário

Nem todos os seletores precisam especificar

O curinga, * (asterisco), corresponde

Você pode escolher um grupo de nomes

Definindo Seletores 217

<p>Lluís Domènech i Montaner foi contemporâneo de Gaudí.</p>

1. Digite # (um sinal de cerquilha ou cerquilha).

2. Sem espaço, digite imediatamente id, onde

Você pode usar seletores de classe e id

continua na próxima página

C O artigo com a classe about é exibido em vermelho,

Definindo Seletores 219

Observe em A e B que usei uma classe

Se o exemplo em B fosse escrito em vez disso

Para obter mais informações sobre

Seletores de classe vs. seletores de ID

R Reduzi o texto para facilitar a visualização das

... Um ancestral é qualquer elemento que

/* Qualquer p que seja descendente de qualquer elemento

Definindo Seletores 221

Para selecionar um elemento para

1. Digite ancestral, onde ancestral é o seletor do

3. Se necessário, repita as etapas 1 e 2

4. Digite descendente, onde descendente é o

Um seletor baseado no ancestral de um

Não se surpreenda com a parte do

E Este seletor escolherá apenas os elementos p Os exemplos anteriores mostraram

Para selecionar um elemento para

1. Digite parent, onde parent é o seletor do

Assim como você viu com o combinador

Você também pode usar seletores de id em

O Internet Explorer 6 não suporta o

Definindo Seletores 223

Às vezes é útil poder selecionar G O pseudo-seletor :first-child escolhe apenas o

3. Opcionalmente, digite o seletor que representa

4. Digite :first-child (simplesmente assim) I.

H A regra não tem efeito na página, porque não

J O elemento h1 contido no artigo é vermelho

Definindo Seletores 225

2. Digite + (um sinal de mais).

3. Se necessário, repita as etapas 1 e 2 para cada

4. Digite element, onde element é o seletor do

A parte :first-child do seletor é chamada de

Nem o :first-child nem o adjacente

CSS3 apresenta o sistema irmão geral

R Não há como saber quais palavras serão afetadas

<p>Muitos turistas são atraídos a Barcelona ÿ para

B Aqui o seletor escolherá a primeira linha de cada