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:

Los estilos deben ir en el archivo css
Contenedor: tiene un ancho del 80% con un ancho máximo de 950 píxeles.
Cabecera: tamaño de fuente 2 em. Margen de abajo 0,5 em.
Menú: definir el margen de abajo con una cantidad relativa, 2 veces el tamaño de la letra.
Enlaces del menú: aparecen en la misma línea, sin subrayar, de color azul y al pasar por encima se cambia a color negro.
Contenido: tiene un color de fondo gris, borde rojo y color de texto blanco.
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;
}