Ejercicios CSS Resueltos

IMPORTANTE: el estilo debería ir en un archivo aparte. Yo por comodidad lo incluyo todo en el mismo archivo .html
<link rel="stylesheet" href="style.css">

Ejercicio 1. Estilos a textos.

Realiza lo siguiente en CSS.

css

Explicación:

Tamaño de la fuente – font-size
Unidades Absolutas: valor exacto(cm, mm, in, px, pt, pc).
Unidades Relativas:

  • rem –> del elemento raíz del documento (se toma como referencia letra «M»).
  • em  –> del elemento (se toma como referencia letra «M»).
  • %    –> del padre.
<html>
<head>
<style>
.azul{
font-size:130%;
font-weight:bold;
font-family:verdana;
color:blue;
}
.rojo{
font-size:130%;
font-weight:bold;
font-family:verdana;
color:#ff0000;
}
</style>
</head>
<body>
<p class="azul">Soy Azul</p>
<p class="rojo">Soy Rojo</p>
</body>
</html>

 

Ejercicio 2. Estilos a textos.

Realiza lo siguiente en CSS.

textos en CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="author" content="Jesús Fernández Toledo" />
<title>Ejercicio 2</title>
<style>
b{
color:red;
}
.prueba{
text-decoration:underline overline;
}
#prueba2{
font-size:30pt;
font-weight:bold;
}
a:hover{font-weight:bold;}
a:link{color:green;}
a:visited{color:red;}
h3{color:blue;font-weight:bold;}
h3 b{text-decoration:underline;}


</style>
</head>
<body>
En el momento en que <a href="https://jesusfernandeztoledo.com" target="_blank">entiendo verdaderamente</a> 
a mi <b>enemigo</b>, en el momento en que le <span class="prueba">entiendo</span> 
lo suficientemente bien como para <span id="prueba2">derrotarle</span>, entonces, 
en ese preciso instante, <h3>también le <b>quiero</b></h3>.
</body>
</html>

Ejercicio 3. Enlaces.

enlaces HTML CSS

Orientaciones:

  • link: el enlace a marca debe ser amarillo y el de as violeta.
  • hover: cunado nos posicionemos sobre marca debe ser color verde y cuando nos posicionemos sobre as debe ser rojo.
<style>
a#marca:link {color: yellow;}
a#marca:hover {color: green;}

a#as:link {color: purple;}
a#as:hover {color: red;}

</style>
<h1> Enlaces. link and hover
<p>
<a id="marca" href="https://marca.com" target="_blank"> Ir a Marca  </a>
<p>

<a id="as" href="https://as.com" target="_blank"> Ir a AS  </a>

 

Ejercicio 4. Menú.

Realiza el siguiente menú.

menu_css

<html>
<head>
<meta charset="UTF-8">
<style>
.xul{
	list-style-type:none; /*Quita los puntos de la lista*/
	margin:20px;
	padding:20px;
	overflow:hidden;/*El contenido es recortado y no se muestran barras de desplazamiento. El contenido
					  se ubica en la siguiente línea*/
	background-color:#D6AFDC;
}
.xli{float:left;} /*En lugar de poner li uno debajo del otro, hacemos que floten a la izquierda,
					es decir, se ponen uno al lado del otro. Se ponen ya como un menú. */

.xli a{
	color:white;
	text-align:center;
	padding:10px;
	text-decoration:none; /*Que los enlaces aparezcan sin subrayar */
}
.xli a:hover{background-color:blue} /*Hace que cambie el color de fondo(background)*/
</style>
</head>
<body>
<ul class="xul">
	<li class="xli"><a href="#Inicio">Inicio</a></li>
	<li class="xli"><a href="#Quienes-Somos">¿Quienes Somos?</a></li>
	<li class="xli"><a href="#Contacto">Contacto</a></li>
</ul>
</body>
</html>

 

Ejercicio 5. Menú con Flex.

Realiza el siguiente menú con Flex.

menu_css

<html>
<head>
<meta charset="UTF-8">
<style>
.flex{
	list-style-type:none; /*Quita los puntos de la lista*/
	display:flex;
	margin:20px;
	padding:20px;
	overflow:hidden;/*El contenido es recortado y no se muestran barras de desplazamiento. El contenido
					  se ubica en la siguiente línea*/
	background-color:#D6AFDC;
}

.flex a{
	color:white;
	text-align:center;
	padding:10px;
	text-decoration:none; /*Que los enlaces aparezcan sin subrayar */
}

.flex a:hover{background-color:blue} /*Hace que cambie el color de fondo(background)*/

</style>
</head>
<body>
<div class="flex">
	<li><a href="#Inicio">Inicio</a></li>
	<li><a href="#Quienes-Somos">¿Quienes Somos?</a></li>
	<li><a href="#Contacto">Contacto</a></li>


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

 

Ejercicio 6. Tablas.

Realiza la siguiente tabla.

CSS Tablas

  • Debemos evitar las tablas y los frames para maquetar. Para eso están los div.
  • Las tablas se utilizan para datos tabulados.
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta name="author" content="Jesús Fernández Toledo" />
<meta charset="UTF-8">
<title>Ejercicio 5 - Tablas</title>
<style>
/*IMPORTANTE: el estilo debería ir en un archivo aparte*/
/*<link rel="stylesheet" href="style.css">*/

.fila_head{
font-family:arial;
font-size:100%;
font-style:italic;
font-variant:small-caps;/*normal|small-caps|initial */
color:red;
}

table{
border-collapse:collapse;
background-color:yellow;
border:1px dotted black;
border-bottom-style:dashed;/*Estilo de la línea del borde de abajo de la tabla*/
border-bottom-color:red;/*Color del borde de abajo de la tabla*/
margin:0 auto;
}

td{ 
border:1px dotted black;/*Para aplicar borde a cada celda de la tabla*/
}

</style>
</head>
<body>
<table>
<tr><!-- Fila -->
<th class="fila_head">Edad</th> <!-- Table head -->
<th class="fila_head">Peso</th>
</tr>
<tr>
<td class="fila">40</td> <!-- Columna -->
<td class="fila">78</td>
</tr>
<tr>
<td class="fila">53</td> 
<td class="fila">76</td>
</tr>
<tr>
<!-- Junta dos filas en una -->
<td colspan="2" class="texto">En el momento en que entiendo verdaderamente a mi enemigo,
en el momento en que le entiendo lo suficientemente bien como para derrotarle, entonces, 
en ese preciso instante, también le quiero.
</td>
</tr>
</table>
</body>
</html>

 

Ejercicio 7. Dar estilo a la maqueta de una página web.

Dado el siguiente código HTLM5 y las siguientes orientaciones, obtén el siguiente diseño de página con CSS.

css

Codigo HTML5:

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Jesús Fernández Toledo" />
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style6.css">
	<title>Ejercicio 6</title>
</head>
<body>
<!--Contenedor-->
<div id="contenedor">
	<!--Cabecera-->
	<div id="cabecera">
		<div id="logo">
			<h2>LOGOTIPO</h2>
		</div>
	</div>
	<!--/Cabecera-->
	<!--Menú Principal-->
	<div id="menu">
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Sobre Nosostros</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>
	</div>
	<!--/Menú Principal-->
	<!--Contenido-->
	<div id="contenido">
		<div class="articulo">
			<h2>Provincias Castilla-La Mancha</h2>
			<p>Albacete</p>
			<p>Ciudad Real</p>
			<p>Cuenca</p>
			<p>Guadalajara</p>
			<p>Toledo</p>
			<p><a href="#">Seguir Leyendo ...</a></p>
			
		</div>
	</div>
	<!--/Contenido-->
</div>
<!--/Contenedor-->
</body>
</html>

 

Orientaciones:

  1. Los estilos deben ir en el archivo css
  2. Contenedor: tiene un ancho del 80% con un ancho máximo de 950 píxeles.
  3. Cabecera: tamaño de fuente 2 em. Margen de abajo 0,5 em.
  4. Menú: definir el margen de abajo con una cantidad relativa, 2 veces el tamaño de la letra.
  5. Enlaces del menú: aparecen en la misma línea, sin subrayar, de color azul y al pasar por encima se cambia a color negro.
  6. Contenido: tiene un color de fondo gris, borde rojo y color de texto blanco.
  7. Etiqueta H2 clase artículo: son de tipo Verdana, de color rojo.

Código CSS Hoja de estilos – style6.css:

#contenedor{
	width:80%;
	max-width:950px;
}
#cabecera{
	font-size:2em;
	margin-bottom:.5em;
}
#menu{
	margin-bottom:6em;
}
#menu a{
	text-decoration:none; /*Que los enlaces aparezcan sin subrayar */
}
#menu li{
	list-style-type:none; /*Quita los puntos de la lista*/
	float:left;
	margin:10px; /*Por fuera*/
	padding:0px; /*Por dentro*/
}	

#menu li a:hover{
	color:black;
}
#menu li a:visited{
	color:red;
}
#contenido{
	background-color:grey;
	border:2px solid red;
	color:white;
}
.articulo h2{
	font-family:Verdana;
	color:red;
}

 

Ejercicio 8. Float.

Según el código HTML5 siguiente, aplicando CSS obtén el siguiente diseño.

Ejercicio 7 CSS

Código HTML5:

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Jesús Fernández Toledo" />
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Ejercicio 7</title>
</head>
<body>
<div id="Texto1">
En el momento en que entiendo verdaderamente a mi enemigo,en el momento en que le entiendo lo suficientemente
bien como para derrotarle, entonces, en ese preciso instante, también le quiero. 
Creo que es imposible entender realmente a alguien, saber lo que quiere, saber lo que cree, y no amarle
como se ama a sí mismo. Y entonces, en ese preciso momento, cuando le quiero ...

<p id="p_texto1">- Orson Scott Card -</p>
</div>
<div id="imagen1">
	<figure>
		<img class="imagenes" src="img/imagen1.jpg" alt="Orson Scott Card">
	</figure>

</div>
<div id="separacion">

</div>

<div id="texto2">
Si todo lo tomas personal, vivirás ofendido la mayor parte de tu vida, recuerda que las personas no
te hacen cosas: las personas hacen cosas y tú decides si te afectan o no.
<p id="p_texto2">– El Principito-</p>

</div>

<div id="imagen2">
	<figure>
		<img class="imagenes" src="img/imagen2.png" alt="">
	</figure>

</div>

 

Código CSS:

#Texto1{
	width:80%;
	float:left;
	font-family:Verdana;
	font-size:150%;
	text-align:justify;
	
}
#p_texto1{
	text-align:center;
	margin-bottom:2em;
	
}
#imagen1{
	width:20%;
	float:right;

}
#separacion{
	clear:both;
}
#texto2{
	width:75%;
	float:right;
	font-size:200%;
	text-align:justify;
}
#p_texto2{
	text-align:center;
}
#imagen2{
	width:25%;
	float:left;
}

 

Deja un comentario

slot gacor

slot gacor

https://badudu.org/

badudu

slot gacor

https://siakad.unikamamuju.ac.id/fonts/-/starlight-princess/

slot88

slot gacor

https://ninjajago.sbs/

https://labskill.umtas.ac.id/wp-content/slot-gacor/

https://kamalinews.co.id/wp-content/slot-deposit-qris/

https://lsgi.org/

https://lsgi.org/

ninjajago

slot777

slot88

http://upforfifty.xyz/

slot gacor

slot gacor

slot88

slot

https://katalog.uinsyahada.ac.id/slot/

situs slot gacor 2023

slot gacor

slot

https://게이코슬롯.com/

gacor88

slot gacor

slot thailand

slot demo

slot gacor

slot gacor

https://siakad.poltekbangmedan.ac.id/images/

slot gacor

slot gacor 4d

slot gacor

situs slot gacor

slot gacor

situs slot gacor

https://setda.blorakab.go.id/packages/upload/galeri/

slot demo

rtp slot

slot gacor

slot88

slot gacor

https://plti.amikompurwokerto.ac.id/wp-content/pages/?tunnel=Slot%20Tongkat%20123

slot88

slot-gacor

slot gacor

slot gacor

slot gacor

slot gacor

slot gacor

slot gacor

slot demo

slot88/

https://smartvillage.tubankab.go.id/vendor/

https://manajemen.unik-kediri.ac.id/wp-content/files/-/slot-toto/

https://myexist.muallimaat.sch.id/.well-known/

slot gacor

toto macau

slot gacor

slot gacor

slot gacor hari ini

slot-gacor

slot gacor

http://student.unisbank.ac.id/wp-includes/slot-gacor-hari-ini/

https://keclasem.rembangkab.go.id/error/

https://ak.polnep.ac.id/slot-gacor/

slot thailand

https://pmbtest.akpergshwng.ac.id/data/slot-qris-gacor/

slot gacor 4d

https://elsa.polteksahid.ac.id/elsa/files/slot-gacor-thailand/

https://ppdb.smai-soedirman-kotabekasi.sch.id/assets/

slot-gacor

slot-gacor

olxtoto

slot gacor

slot88

slot gacor

slot gacor

https://roadpowersystems.com/pages/

https://disdikbud.pemkomedan.go.id/assets/css/

slot4d

slot gacor

slot gacor

slot gacor

slot thailand

togel online

slot88

https://diafrica.org/pages/

togel online

slot gacor

https://fkomputer.umku.ac.id/wp-content/plugins/

slot gacor

slot gacor

slot gacor

https://feb.umku.ac.id/wp-includes/

https://fgizi.umku.ac.id/wp-content/languages/

https://fmipa.umku.ac.id/wp-includes/

slot gacor

slot88

slot88

slot gacor

slot gacor

slot gacor

slot gacor

https://fkip.umku.ac.id/wp-content/uploads/

https://fkesehatan.umku.ac.id/wp-content/plugins/

slot gacor

https://fst.umku.ac.id/wp-content/plugins/

https://fkeperawatan.umku.ac.id/wp-content/plugins/

olx toto

https://akparjakarta.ac.id/wp-content/

slot qris

slot qris

slot gacor

slot gacor

slot gopay

slot gacor

https://siakad.poltekbangmedan.ac.id/images/

slot thailand

slot gacor

slot gopay

https://ppdb.smai-soedirman-kotabekasi.sch.id/assets/

https://pmbtest.akpergshwng.ac.id/data/slot-qris-gacor/

https://cbt.dindikbud.pekalongankab.go.id/assets/

slot ovo

https://jdih.pn-labuanbajo.go.id/images/

https://pn-labuanbajo.go.id/wp-content/uploads/

https://fst.umku.ac.id/wp-content/uploads/

slot gacor

slot88

slot gacor

slot gacor

slot gacor

slot88

slot gacor

https://smkpelitanusantara.sch.id/

https://wibs.sch.id/

https://mnis.sch.id/

https://smkm3-alkamal.sch.id/

https://pelitanusantara.sch.id/

slot hoki

slot gacor kamboja

slot777

slot gacor 4d

http://esptpd.kaimanakab.go.id/public/img/

slot gacor

slot gacor

slot server luar

slot gacor

slot demo

slot88

slot hoki

https://api.kelastryout.id/assets/

https://siasuh.poltekbangmedan.ac.id/pedoman/ninjajago/

slot gacor

slot gacor

slot