Parte 3 – Folhas de Estilo

20. Exercícios

20.1. Testes sobre Folhas de Estilo

1. Qual das seguintes regras de estilo está incorreta? Marque uma.
a) a:link {color: rgb(0%,40%,40%)}
b) div.code pre {margin-bottom: 0px}
c) body {font-size: 0.5cm, color: yellow, background: black}
d) .botcor {font-size: 16pt; font-family: tahoma, sans-serif;}
e) Estão todas corretas.

2. Qual dos seguintes trechos de código é ilegal dentro de um arquivo .css? Marque uma.
a) span.value {color: maroon}
b) /* <H1>Titulo</H1> */
c) @import url(http://ww.estilos.org/estilo.css);
d) <STYLE>
e) Nenhuma das alternativas é ilegal dentro de um arquivo CSS.

3. Qual das regras abaixo, de uma folha de estilos, declara que os parágrafos e células de da-
dos de tabelas terão texto vermelho?
a) P TD {color: red}
b) P: TD {color: ff0000}
c) P, TD {color: rgb(100%, 0%, 0%)}
d) P; TD {color: rgb(255, 0, 0)}
e) P, TD {color=red}

4. Qual das declarações abaixo, contida em uma página HTML, a vincula à folha de estilos
basico.css, localizada no mesmo diretório que a página?
a) <LINK REL=StyleSheet HREF="basico.css">
b) <LINK REL=StyleSheet SRC="basico.css">
c) <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A>
d) <FRAME SRC="basico.css" REL="StyleSheet">
e) <A HREF="basico.css">Folha de estilos</A>

5. Considere o seguinte trecho de código HTML:

107
 Parte 3 – Folhas de Estilo

<div>
<p>Parágrafo</p>
</div>

Quais declarações abaixo, em um bloco <STYLE> do arquivo que contém o trecho acima,
farão com que o texto do parágrafo tenha tamanho 10pt em um browser que suporte fo-
lhas de estilo? Marque uma ou mais.
a) div {font-size: 20pt}
p {font-size: 50%}
b) div {font-size: 10pt}
c) p {font-size: 10pt}
d) div {font-size: 5pt}
p {font-size: 100%}
e) p div {font-size: 10pt}

6. Considere a seguinte folha de estilos, com uma única regra, vinculada a uma página HTML.
P {color: green}

Dentro dessa página, logo depois da instrução que vincula o estilo à página, há um bloco
<STYLE>, com a seguinte regra:

P {color: red}

A página possui dez parágrafos. Um deles atribui um estilo local usando o atributo STYLE,
da forma:
<P STYLE="color: blue">Parágrafo</P>

Supondo que a página seja visualizada em um browser que suporte folhas de estilo CSS,
qual é a cor da maior parte dos parágrafos dessa página?
a) azul (blue)
b) vermelha (red)
c) verde (green)
d) preta (black)
e) indefinida

7. Identifique as alternativas que contém HTML ou CSS incorretos:

a) <span style="color: red; font-size: 24pt">Texto</span>
b) <span color=red font-size="24pt">Texto</span>
c) <div class="sec1">Tem <span class=item1>mais texto</span>.</div>
d) <span>Itens e <div class="sec1">seções</div> especiais.</span>
e) <div style="P {color: yellow}"><P>Texto amarelo</P></div>

8. Considere o código HTML abaixo:

<div class=sec2>
<p class=novo>Texto modificado</p>
</div>

108
 Parte 3 – Folhas de Estilo

Quais das regras de estilo abaixo fará com que o parágrafo seja exibido na cor azul, em um
browser que suporte folhas de estilos CSS?
a) P {color: blue}
b) .sec2 {color: blue}
c) P.novo {color: blue}
d) .sec2 .novo {color: blue}
e) P.sec2 {color: blue}

9. Qual das regras abaixo retira o sublinhado apenas dos links visitados? Marque uma.
a) a: visited {text-decoration: none}
b) a, visited {text-decoration: none}
c) a.visited {text-decoration: none}
d) a visited {text-decoration: none}
e) Nenhuma das regras anteriores.

10. Marque apenas as alternativas verdadeiras

a) Uma mesma folha de estilos pode ser usada por várias páginas.
b) Uma mesma página pode usar várias folhas de estilo.
c) Se um browser não suportar uma folha de estilos requerida pela página, poderá ha-
ver uma degradação na qualidade da apresentação mas nunca haverá perda de in-
formação.
d) É possível construir um site inteiro usando apenas CSS.
e) A linguagem CSS usada para construir folhas de estilo é uma recomendação do
W3C – consórcio de empresas que estabelece os padrões para a Web.

20.2. Exercícios com Folhas de Estilo

Os exercícios a seguir têm a finalidade de explorar as principais propriedades do CSS e
permitir que se verifique o suporte a elas nos browsers populares. Eles são mais didáticos do
que úteis. O objetivo é apenas praticar com folhas de estilos. Para realizá-los, use os arquivos
disponíveis no disquete (ou no Website).

Conceitos básicos
1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html.
2. Nesta folha de estilos, usando o mínimo de declarações possível, declare:
a) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma não existir
b) que todo o texto do corpo (BODY) do arquivo tenha tamanho 10 pontos
c) que todos os H1, H2 e H3 sejam vermelhos
d) que os H1 tenham tamanho 24 pontos
e) que os H2 tenham tamanho 18 pontos
f) que os H3 tenham tamanho 14 pontos

3. Mude a cor do fundo da página para azul marinho (navy) e a cor default do texto para bran-
co em uma única declaração.

109
 Parte 3 – Folhas de Estilo

4. Faça com que todo texto marcado em itálico apareça em azul ciano (cyan).

Formas de usar CSS

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece.
Faça com que uma dessas outras páginas tenha uma cor de fundo clara (amarela, por e-
xemplo) e cor de texto escuro (diferente daquela definida por basico.css) sem que isto alte-
re as outras paginas que usam o mesmo arquivo.

6. Faça com que o primeiro parágrafo do arquivo StyleTest.html tenha texto verde.
7. Faça com que a célula do meio da tabela de StyleTest.html tenha texto vermelho sobre
fundo amarelo (a tabela 3x3 encontra-se no meio da página).

Classes, links, seletores de contexto

Para os exercícios abaixo, desligue a folha de estilos usada nos exercícios anteriores (mude o
nome ou remova o elemento <LINK>) para que a página fique limpa outra vez. Use uma no-
va folha de estilos para aplicar as alterações a seguir.

8. Defina classes sec2, sec3, sec31 e sec32 para as seções (<DIV>) do documento Style-
Test.html. As seções estão indicadas em comentários HTML (por exemplo: <!--Seção 2 --
>). Aplique um fundo diferente (imagem ou cor) nessas seções para diferenciá-las das ou-
tras.

9. Tire os sublinhados de todos os links e substitua-os por um fundo cinza claro.

10. Faça com que o link ativo (active) fique em negrito; que o link normal tenha tamanho 10pt
e que mostre fundo amarelo quando o mouse estiver sobre ele (hover); e que o link visita-
do não tenha mais cor de fundo mas recupere o sublinhado. Obs: Para fazer um link ainda
não visitado, faça um link para qualquer recurso do sistema de arquivos; para ver o link ati-
vo, clique no link e segure o mouse.

11. Faça com que:

a) todos os itálicos dentro de negritos sejam colocados em maiúsculas (use text-
transform: uppercase).
b) todos os negritos dentro de itálicos sejam sublinhados
c) todos os negritos que estejam dentro de um bloco itálico que está dentro de um bloco
LI que está dentro de uma UL que está em outra UL, sejam colocados em fonte arial,
em maiúsculas e em vermelho.

Fontes
Crie uma nova folha de estilos (fontes.css) para aplicar fontes. Vincule (LINK) ou importe-a
(@import) em seus arquivos.

110
 Parte 3 – Folhas de Estilo

12. a) Aplique Verdana como fonte default em todo o site. Garanta que, se Verdana não existir,
Arial será usada, e se esta não existir, será usada a default sans-serif. Para testar, mude os
nomes das primeiras fontes para nomes desconhecidos do sistema. b) Teste a compatibili-
dade dos dois browsers em relação ao suporte de fontes com nomes longos (entre aspas)
em folhas de estilo locais e remotas.

13. Faça com que os <B> de seus parágrafos sejam 20% maiores que o texto normal destes
parágrafos.

Atributos de texto e classificação

Crie uma nova folha de estilos para esses exercícios.

14. a) Aplique um espaçamento de 1 cm entre palavras de um parágrafo seu texto (isto poderá
não funcionar devido à falta de suporte dos browsers). b) Aplique um espaçamento de 1
cm entre as letras de outro parágrafo. Teste nos dois browsers.

15. Defina todos os títulos H2 como sendo caixa alta (uppercase).

16. Experimente com as propriedades text-decoration (use overline e outras propriedades em

blocos <SPAN> criados para mostrar cada propriedade.

17. Elimine o espaçamento entre os parágrafos (<P>) usando {margin-top: 0pt}, endente a
primeira linha e coloque todos os seus parágrafos, com exceção dos parágrafos da terceira
seção, com alinhamento justificado. O alinhamento deve ser aplicado apenas nos parágra-
fos e não em listas ou tabelas.

Cores
18. Experimente com cores, aplicando cores em textos, backgrounds de diversos componentes
da página, inclusive formulários (<INPUT> e <SELECT>). Use as três formas (url(r, g,
b), rrggbb e nomes) e veja como ocorre o suporte dos browsers em folhas de estilo locais e
externas. Dica: crie uma folha de estilos só para este exercício.

Fundos, Imagens e Repetições

19. Inclua a imagem rabbit.gif (ou outra qualquer do subdirectório 3_Imagens do CD do A-
SIT) no fundo da página StyleTest.html (usando uma nova folha de estilos: back-
ground.css). Experimente com posicionamento, fazendo a imagem ficar fixa em vez de ro-
lar na tela. Teste nos dois browsers. Experimente com repetições, fazendo a imagem repe-
tir na vertical, na horizontal e não repetir. Veja o que acontece nos dois browsers.

20. Numa outra folha de estilos (para este exercício), posicione a imagem no centro da página,
sem repetições e uma outra imagem no centro da tabela, também sem repetições.

21. Posicione (outra folha de estilos) o rabbit.gif (ou outra imagem) em uma posição a 4cm da
margem esquerda e a 7cm da margem superior. Na seção 2 (sec2), posicione bart.gif, repe-

111
 Parte 3 – Folhas de Estilo

tindo somente na vertical, afastado 11cm da margem esquerda e iniciando 1 cm abaixo da

margem superior.

Posicionamento e Layout
22. Remova o espaço entre todos os parágrafos de StyleTest.html. Aplique um text-indent de
1cm em cada parágrafo.

23. Faça com que os blocos (parágrafos e cabeçalhos) da seção 3.1 e 3.2 (DIV) tenham 0,3 cm
de margem esquerda e direita, e 0,5cm de margem superior e inferior, em relação às bordas
da seção.

24. Faça com que as seções 3.2 e 3.1 tenham uma margem externa de 0,5 cm em relação à se-
ção 3.

25. Aplique uma borda azul, sólida, de 3mm acima da seção 2 (<DIV>), uma outra, também
de 3mm, abaixo, na cor amarelo. Dos lados, coloque bordas vermelhas, de 5mm.

26. Aplique uma borda verde, de 4mm à esquerda de todos os parágrafos da seção 2. Entre a
borda e o texto deve haver um espaço de 5mm. Entre a borda e a margem da página, mais
5mm (sem levar em conta o offset).

27. Sem usar tabelas, aplique uma largura máxima de 500 pixels em toda a página.

28. Faça com que a seção 3.1 tenha largura máxima de 220 pixels e flutue para a direita, dei-
xando o restante do texto fluir em volta dela.

Posicionamento absoluto
29. Monte o quebra-cabeças do exercício 1, da parte 4 (Recursos Avançados) sem usar tabelas
(usando apenas posicionamento de folhas de estilo).

30. Diagrame a página do exercício 2, da parte 4, sem usar tabelas (usando apenas posiciona-
mento de folhas de estilo).

112