Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Exercícios CSS - Treinar
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Universidade Paulista (UNIP)
Desenvolvimento em Ambiente Web
Vladimir Camelo, MSc.
Exercícios
1. Criar uma página que contenha 3 títulos do tip H1, mais 3 título do tipo H2 com textos entre os páragrafos e estes dedverão ser formatados sendo um para o centro e outro para a direita. No final crie um tabela com 5 linhas e 4 colunas com o estilo proposto abaixo.
H1
H2
font-family: Arial;
font-size: xx-large;
font-weight: bold;
color: #800000;
background: #FFFFCC;
text-align: center;
padding: 4pt;
border-top: inset;
border-bottom: inset;
position: relative;
font-family: Arial;
font-size: x-large;
font-weight: bold;
color: #FFFFCC;
background: #800000;
text-align: center;
padding: 3pt;
border-top: inset;
border-bottom: inset;
position: relative;
TD
TH
font-family: sans-serif;
font-size: medium;
background: #99CCCC;
font-family: sans-serif;
font-size: medium;
font-weight: bold;
color: #FF0000;
background: #FFFF00;
text-align: center;
position: relative;
P.DIREITA
P.CENTRO
font-family: Arial;
font-size: medium;
color: #000080;
position: relative;
font-family: sans-serif;
font-size: small;
font-weight: bold;
color: #FF0010;
position: relative;
1. Faça uma folha de estilo que permita obter um texto de cor vermelha no primeiro parágrafo, verde no segundo parágrafo e cinza para o terceiro.
2. Crie um documento css (uso externo), chamado de linksBasicos.
I. a{text-decoration:none} -> Tira o sublinhado de todos os links
II. a:link{color:red } -> Muda para verde a cor dos links ainda não visitados
III. a:visited{color:blue} -> Muda para marrom a cor dos links já visitados
IV. a:hover{color:yellow} -> Muda para amarelo a cor dos links ao passar o mouse
3. Com base no documento criado acima, faça uma página chamada linksBasicos.html com 3 links. Os links criados devem ser mostrados, inicialmente, com o texto na cor vermelha, os links que já foram visitados na cor azul e, quando o cursor do mouse estiver sobre o link, o texto é visualizado na cor amarela.
Propriedade
Efeito
a:link
define o estilo do link no estado inicial
a:visited
define o estilo do link visitado
a:hover
define o estilo do link quando passa-se o mouse sobre ele
a:active
define o estilo do link ativo (o que foi "clicado").
4. Usando as tags, atributos e formatação CSS vistas até o momento, tente “clonar” em uma página HTML os seguintes trechos retirados de páginas da Internet. Tente imitar cores, tamanhos, fontes, etc.
a. Resumos de notícias do site folha.com.br:
5. Criar uma regra css para a construção de um menu semelhante a imagem abaixo:
6. Criar uma regra css para a construção de um menu semelhante a imagem abaixo. No estado inicial os itens do menu deverão ter cor de fundo cinza e cor do texto branco. No estado hover, deverá ter cor de fundo azul celeste e cor de texto cinza.
7. Crie um formulário de cadastramento de produtos com as seguintes informações:
a. Código do produto (código de barra)
b. Nome do produto
c. Tipo ou categoria do produto (Alimentício, Jardim, Vestuário, etc)
d. Foto do produto
e. Descrição do produto
f. Data de Fabricação (00/00/0000)
g. Data de validade (00/00/0000)
h. Nome do Fabricante
i. Botão para cadastrar (apresenta em um alert para o usuário) e outro para finalizar (Limpa as caixa de texto)
OBSERVAÇÃO: Utilize para este formulário uma folha de estilo linkada para formatar as caixas de texto, scrollpane, legendas, divs entre outros componentes e fontes empregadas na construção do formulário.
8. Modifique o documento exercicio6.html para que a folha de estilo seja externo
Nome do arquivo deverá ser: exercicio6.html
<html> <head>
<title>Emprego de blocos - div</title>
<style type="text/css">
#cabecalho {width: 200px; float: left;}
#conteudo {margin-left: 205px;}
#rodape {clear: both;}
</style>
</head>
<body>
<div id="cabecalho">
aqui ficam as informações do cabeçalho como nome e logotipo.
</div>
<div id="conteudo">
aqui fica o conteúdo principal da página
</div>
<div id="rodape">
aqui ficam as informações do rodapé
</div>
</body></html>
9. Modifique o documento exercicio7.html para que a folha de estilo seja interna
Nome do arquivo deverá ser: exercicio7.html
<html>
<head>
<title>emprego de div</title>
<link REL=stylesheet TYPE="text/css" HREF=" estilo.css " TITLE="style">
<body>
<div id="listaA">
<ul>
<li>Arroz</li>
<li>Feijão</li>
<li>Trigo</li>
<li>Ervilha</li>
<li>Soja</li>
<li>Lentilha</li>
</ul>
</div>
<div id="listaB">
<ul>
<li>Tomate</li>
<li>Batata</li>
<li>Cenoura</li>
<li>Nabo</li>
<li>Inhame</li>
<li>Pepino</li>
</ul>
</div>
</body>
</html>
Nome do arquivo deverá ser: estilo.css
#listaA {
background-color:blue;
}
# listaB {
background-color:red;
}
10. crie uma folha de estilo exterma para o arquivo exercicio8.html
Nome do arquivo deverá ser: exercicio8.html
<html> <head>
<title>Emprego da tag span</title>
<style type="text/css">
h1 span {background-color: cyan}
p span {background-color: gray}
</style>
</head>
<body>
<h1>A <span>Texto h1 com span ciano </span> - texto com h1</h1>
<p>A <span>paragrafo com span cinza</span> foi construída como estalagem há 22 anos.</p>
</body>
</html>
11. Em CSS, o que faz a propriedade LIST-STYLE-IMAGE?
a) Define uma imagem como marcador da lista.
b) Define uma imagem como fundo da lista.
c) Define a posição do marcador da lista.
d) Define o tipo de marcador da lista.
12. Qual a função das folhas de estilo?
13. Qual a sintaxe básica de um elemento CSS?
14. Quais as formas de inserção de estilo CSS? Dê exemplos.
15. Porque utilizar folhas de estilos? Quando utilizar um arquivo css e quando utilizar um incorporado também conhecido como estilo interno?
16. Cite dois exemplos de unidades de medida usadas nas propriedades CSS.
17. Qual a finalidade da pseudoclasse class em CSS?
18. Qual será a cor do subtítulo da tag h2? Por quê?
<html>
<head>
<title>Teste</title>
<style type="text/css">
body {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Aqui temos um título</h1>
<h2 style="color: #0000ff;">Aqui temos um subtítulo!</h2>
</body>
</html>
19. Com base no código apresentado abaixo, em que cor serão apresentados os textos? Por quê?
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {color: #ff0000;}
h2 {color: #00ff00;}
</style>
</head>
<body>
<h1>Aqui temos um título</h1>
<h2>Aqui temos um subtítulo!</h2>
<h2 id="teste">Aqui temos outro subtítulo!</h2>
</body>
</html>
20. Crie uma página em HMTL que possibilite implementar os itens de menu 5 px à direita de cada menu, 22 px abaixo do topo, e com a largura de 95 px.
.itensDeMenu {
position:absolute;
top:22 px;
width:95 px;
background:lightgrey;
}
<div id="itensDeMenu1" class="itensDeMenu" style="left:5 px;">
HTML<br>
DHTML<br>
CGI<br>
XML<br>
ASP<br>
</div>
<div id="itensDeMenu2" class="itensDeMenu" style="left:105 px;">
SQL<br>
MS Access<br>
SQL Server<br>
Oracle<br>
</div>
<div id="itensDeMenu3" class="itensDeMenu" style="left:205 px;">
UML<br>
Analise<br>
</div>
Marque as questões relacionadas abaixo com Verdadeiro (V) ou Falso (F):
21. Fundamentos do CSS:
( ) Uma mesma folha de estilos pode ser usada por várias páginas.
( ) Uma mesma página pode usar várias folhas de estilo.
( ) Se um browser não suportar uma folha de estilos requerida pela página, poderá haver uma degradação na qualidade da apresentação mas nunca haverá perda de informação.
( ) É possível construir um site inteiro usando apenas CSS.
( )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.
22. Utilização do CSS:
( ) CSS é uma linguagem usada para implementar o conteúdo de uma página web.
( ) Se usarmos CSS é desnecessário o uso da linguagem HTML em nossas páginas.
( ) Dentro de cada tag style é possível apenas uma regra de cada vez.
( ) O seletor id (#) pode ser usado em diversos elementos.Por exemplo, a regra #x{background: blue} formata de azul todos os elementos cujo id seja igual a x.
( ) O seletor classe (.) pode ser usado em diversos elementos. Cada elemento deve estar marcado com o atributo class.
23. Regras CSS:
( ) a:link {color: rgb(0,40,40)}
( ) div nav{margin-bottom: 0px}
( ) p.texto1, p.texto2 {color: #FF0000}
( ) body {font-size: 0.5cm, color: yellow, background: black}
( ) .botcor {font-size: 16pt; font-family: tahoma, sans-serif;}
24. HTML e CSS:
( ) <span style="color: red; font-size: 24pt">Texto</span>
( ) <span color=red font-size="24pt">Texto</span>
( ) <div class="sec1">Tem <span class=item1>mais texto</span>.</div>
( ) <span>Itens e <div class="sec1">seções</div> especiais.</span>
( ) <div style="P {color: yellow}"><P>Texto amarelo</P></div>
25. Entre os estilos abaixo, diga qual a ordem de prioridade (enumere de 1 a 4 em ordem crescente de prioridade):
[ ] Estilos obtidos de um arquivo externo
[ ] Estilos definidos no início da página
[ ] Estilos padrões do browser
[ ] Estilos incluídos na linha do comando
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar