PROGRAMAO WEB 3 SEMESTRE DO TCNICO EM INFORMTICA

CURSO TCNICO EM INFORMTICA EXERCCIOS DE CSS

Testes sobre Folhas de Estilo em Cascata (CSS) 1. Qual das seguintes regras de estilo est incorreta? Marque uma. a) a:link {color: rgb(0%,40%,40%)} 5. Considere o seguinte trecho de cdigo HTML: b) div.code pre {margin-bottom: 0px} <div> c) body {font-size: 0.5cm, color: yellow, background: black} d) .botcor {font-size: 16pt; font-family: tahoma, sansserif;} e) Esto todas corretas. <p>Pargrafo</p> </div> Quais declaraes abaixo, em um bloco <STYLE> do arquivo que contm o trecho acima, faro com que o texto do pargrafo tenha tamanho 10pt em um browser que suporte folhas de estilo? Marque uma ou mais. a) div {font-size: 20pt} p {font-size: 50%} a) span.value {color: maroon} b) div {font-size: 10pt} b) /* <H1>Titulo</H1> */ c) p {font-size: 10pt} c) @import url(http://ww.estilos.org/estilo.css); d) div {font-size: 5pt} d) <STYLE> p {font-size: 100%} e) Nenhuma das alternativas ilegal dentro de um arquivo CSS. e) p div {font-size: 10pt}

PROF.: ARLEYDATA: _10_ / _05_/ _2010_

d) <FRAME SRC="basico.css" REL="StyleSheet"> e) <A HREF="basico.css">Folha de estilos</A>

2. Qual dos seguintes trechos de cdigo ilegal dentro de um arquivo .css? Marque uma.

3. Qual das regras abaixo, de uma folha de estilos, declara que os pargrafos e clulas de dados de tabelas tero texto vermelho? a) P TD {color: red} b) P: TD {color: ff0000} c) P, TD {color: rgb(100%, 0%, 0%)}

6. Considere a seguinte folha de estilos, com uma nica regra, vinculada a uma pgina HTML. P {color: green} Dentro dessa pgina, logo depois da instruo que vincula o estilo pgina, h um bloco <STYLE>, com a seguinte regra: P {color: red}

d) P; TD {color: rgb(255, 0, 0)} e) P, TD {color=red} A pgina possui dez pargrafos. Um deles atribui um estilo local usando o atributo STYLE, da forma: <P STYLE="color: blue">Pargrafo</P> 4. Qual das declaraes abaixo, contida em uma pgina HTML, a vincula folha de estilos basico.css, localizada no mesmo diretrio que a pgina? a) azul (blue) a) <LINK REL=StyleSheet HREF="basico.css"> b) vermelha (red) b) <LINK REL=StyleSheet SRC="basico.css"> c) verde (green) c) <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A> d) preta (black) Supondo que a pgina seja visualizada em um browser que suporte folhas de estilo CSS, qual a cor da maior parte dos pargrafos dessa pgina?

CSS FOLHAS DE ESTILO EM CASCATA

Pgina 1

PROGRAMAO WEB 3 SEMESTRE DO TCNICO EM INFORMTICA

e) indefinida c) Se um browser no suportar uma folha de estilos requerida pela pgina, poder haver uma degradao na qualidade da apresentao mas nunca haver perda de informao. d) possvel construir um site inteiro usando apenas CSS. e) A linguagem CSS usada para construir folhas de estilo uma recomendao do W3C consrcio de empresas que estabelece os padres para a Web.

7. Identifique as alternativas que contm 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">sees</div> especiais.</span> e) <div style="P {color: yellow}"><P>Texto amarelo</P></div>

Lista 2 de Folhas de Estilos em Cascata Os exerccios a seguir tm a finalidade de explorar as principais propriedades do CSS e permitir que se verifique o suporte a elas nos browsers populares. Eles so mais didticos do que teis. O objetivo apenas praticar com folhas de estilos. Para realiz-los, use os arquivos disponveis no disquete (ou no Website).

8. Considere o cdigo HTML abaixo: <div class=sec2> <p class=novo>Texto modificado</p> </div> Quais das regras de estilo abaixo far com que o pargrafo 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} 2. Nesta folha de estilos, usando o mnimo de declaraes possvel, declare: a) que todo H1 tenha fonte Tahoma, ou sans-serif, se Tahoma no 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 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. 4. Faa com que todo texto marcado em itlico aparea em azul ciano (cyan). f) que os H3 tenham tamanho 14 pontos Conceitos bsicos 1. Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html.

3. Mude a cor do fundo da pgina para azul marinho (navy) e a cor default do texto para branco em uma nica declarao.

10. Marque apenas as alternativas verdadeiras a) Uma mesma folha de estilos pode ser usada por vrias pginas. b) Uma mesma pgina pode usar vrias folhas de estilo.

5. Carregue a folha de estilos basico.css em outros arquivos HTML e veja o que acontece. Faa com que uma dessas outras pginas tenha uma cor de fundo clara (amarela, por e-exemplo) e cor de texto escuro (diferente daquela definida por basico.css) sem que isto altere as outras paginas que usam o mesmo arquivo.

CSS FOLHAS DE ESTILO EM CASCATA

Pgina 2

PROGRAMAO WEB 3 SEMESTRE DO TCNICO EM INFORMTICA

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

6. Faa com que o primeiro pargrafo do arquivo StyleTest.html tenha texto verde.

7. Faa com que a clula do meio da tabela de StyleTest.html tenha texto vermelho sobre fundo amarelo (a tabela 3x3 encontra-se no meio da pgina).

13. Faa com que os <B> de seus pargrafos sejam 20% maiores que o texto normal destes Classes, links, seletores de contexto Para os exerccios abaixo, desligue a folha de estilos usada nos exerccios anteriores (mude o nome ou remova o elemento <LINK>) para que a pgina fique limpa outra vez. Use uma nova folha de estilos para aplicar as alteraes a seguir. pargrafos.

Atributos de texto e classificao Crie uma nova folha de estilos para esses exerccios. 14. a) Aplique um espaamento de 1 cm entre palavras de um pargrafo seu texto (isto poder no funcionar devido falta de suporte dos browsers). b) Aplique um espaamento de 1cm entre as letras de outro pargrafo. Teste nos dois browsers.

8. Defina classes sec2, sec3, sec31 e sec32 para as sees (<DIV>) do documento StyleTest.html. As sees esto indicadas em comentrios HTML (por exemplo: <!--Seo 2 -->). Aplique um fundo diferente (imagem ou cor) nessas sees para diferenci-las das outras.

15. Defina todos os ttulos H2 como sendo caixa alta (uppercase). 9. Tire os sublinhados de todos os links e substitua-os por um fundo cinza claro. 16. Experimente com as propriedades text-decoration (use overline e outras propriedades em blocos <SPAN> criados para mostrar cada propriedade.

10. Faa 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 visitado no tenha mais cor de fundo mas recupere o sublinhado. Obs: Para fazer um link ainda no visitado, faa um link para qualquer recurso do sistema de arquivos; para ver o link ativo, clique no link e segure o mouse.

17. Elimine o espaamento entre os pargrafos (<P>) usando {margin-top: 0pt}, endente a primeira linha e coloque todos os seus pargrafos, com exceo dos pargrafos da terceira seo, com alinhamento justificado. O alinhamento deve ser aplicado apenas nos pargrafos e no em listas ou tabelas.

11. Faa com que: a) todos os itlicos dentro de negritos sejam colocados em maisculas (use text-transform: uppercase). b) todos os negritos dentro de itlicos sejam sublinhados c) todos os negritos que estejam dentro de um bloco itlico que est dentro de um bloco LI que est dentro de uma UL que est em outra UL, sejam colocados em fonte arial, em maisculas e em vermelho. Cores 18. Experimente com cores, aplicando cores em textos, backgrounds de diversos componentes da pgina, inclusive formulrios (<INPUT> e <SELECT>). Use as trs 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 exerccio.

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

Fundos, Imagens e Repeties 19. Inclua uma imagem no fundo da pgina StyleTest.html (usando uma nova folha de estilos: background.css). Experimente com posicionamento, fazendo a imagem ficar fixa em vez de rolar na tela. Teste nos dois browsers. Experimente com repeties, fazendo a imagem repetir na

CSS FOLHAS DE ESTILO EM CASCATA

Pgina 3

PROGRAMAO WEB 3 SEMESTRE DO TCNICO EM INFORMTICA

vertical, na horizontal e no repetir. Veja o que acontece nos dois browsers. 29. Monte o quebra-cabeas do exerccio 1, da parte 4 (Recursos Avanados) sem usar tabelas (usando apenas posicionamento de folhas de estilo).

20. Numa outra folha de estilos (para este exerccio), posicione a imagem no centro da pgina, sem repeties e uma outra imagem no centro da tabela, tambm sem repeties.

30. Diagrame a pgina do exerccio 2, da parte 4, sem usar tabelas (usando apenas posicionamento de folhas de estilo).

21. Posicione (outra folha de estilos) o rabbit.gif (ou outra imagem) em uma posio a 4cm da margem esquerda e a 7cm da margem superior. Na seo 2 (sec2), posicione bart.gif, repetindo somente na vertical, afastado 11cm da margem esquerda e iniciando 1 cm abaixo da margem superior.

Posicionamento e Layout 22. Remova o espao entre todos os pargrafos de StyleTest.html. Aplique um text-indent de 1cm em cada pargrafo.

23. Faa com que os blocos (pargrafos e cabealhos) da seo 3.1 e 3.2 (DIV) tenham 0,3 cm de margem esquerda e direita, e 0,5cm de margem superior e inferior, em relao s bordas da seo.

24. Faa com que as sees 3.2 e 3.1 tenham uma margem externa de 0,5 cm em relao seo 3.

25. Aplique uma borda azul, slida, de 3mm acima da seo 2 (<DIV>), uma outra, tambm de 3mm, abaixo, na cor amarelo. Dos lados, coloque bordas vermelhas, de 5mm.

26. Aplique uma borda verde, de 4mm esquerda de todos os pargrafos da seo 2. Entre a borda e o texto deve haver um espao de 5mm. Entre a borda e a margem da pgina, mais 5mm (sem levar em conta o offset). 27. Sem usar tabelas, aplique uma largura mxima de 500 pixels em toda a pgina.

28. Faa com que a seo 3.1 tenha largura mxima de 220 pixels e flutue para a direita, deixando o restante do texto fluir em volta dela.

Posicionamento absoluto

CSS FOLHAS DE ESTILO EM CASCATA

Pgina 4