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

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies