Exercícios sobre CSS com Respostas

Prévia do material em texto

APLICAÇÕES PARA A WEB – EXERCÍCIOS SOBRE CSS
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA:
CSS
#A, #B { width: 100px; height: 100px }
HTML
<div id="A">A</div>
<div id="B">B</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA:
CSS
#A , #B , #C , #D{
	width: 100px;
	height: 100px;
}
#esq { 
	float: left
}
#dir { 
	float: right
}
HTML
<div id="esq">
 <div id="A">A</div>
 <div id="B">B</div>
</div>
<div id="dir">
 <div id="C">C</div>
 <div id="D">D</div>
</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA
CSS
#A {
	width: 100%;
	height: 100px
}
#B , #C {
	width: 50%;
	height: 200px; 
	float:left
}
HTML
 <div id="A">A</div>
 <div id="B">B</div>
 <div id="C">C</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA
CSS
#A , #B , #C , #D {
	width: 100px;
	height: 100px;
	position:absolute
}
#A {
	top: 100px;
	left: 50px;
	z-index: 2
}
#B {
	top: 150px;
	left: 100px;
	z-index: 1
}
#C {
	top: 100px;
	right: 50px;
	z-index: 1
}
#D {
	top: 150px;
	right: 100px;
	z-index: 2
}
HTML
 <div id="A">A</div>
 <div id="B">B</div>
 <div id="C">C</div>
 <div id="D">D</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA:
CSS 
#A , #B, #C, #D {
	width: 100px;
	height: 100px;
	position:absolute
	
}
#A {
	top: 100px;
	left: 50px
}
#B {
	top: 150px;
	left: 50px;
}
#C {
	top: 100px;
	right: 50px;
}
#D {
	top: 100px;
	right: 100px;
}
HTML
 <div id="A">A</div>
 <div id="B">B</div>
 <div id="C">C</div>
 <div id="D">D</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
R ESPOSTA:
CSS 
#A , #B, #C, #D {
	width: 100px;
	height: 100px;
	position:absolute
	
}
#A {
	top: 100px;
	left: 50px
}
#B {
	top: 150px;
	left: 50px;
}
#C {
	top: 100px;
	right: 50px;
}
#D {
	top: 100px;
	right: 100px;
}
#E {
	width: 100px; 
height: 100px;
margin: 0 auto;
margin-top: 100px
}
HTML
 <div id="A">A</div>
 <div id="B">B</div>
 <div id="C">C</div>
 <div id="D">D</div>
 <div id="E">E</div>
Crie os seletores usando CSS (desconsiderar bordas e cores) e na sequencia faça uso de HTML para incorporá-los na página conforme a representação a seguir:
RESPOSTA:
#A {
	width: 350px;
	height: 350px;
}
#B {
	width: 200px;
	height: 200px;
}
#C {
	width: 100px;
	height: 100px;
	float:right; 
	margin-top:100px;
}
#D {
	width: 100px;
	height: 100px;
	float: right;
}
HTML
 <div id="A">A
	 <div id="B">B
 	<div id="C">C</div>
 </div>
 <div id="D">D</div>
 </div>