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.
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.
<!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.
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ú.
<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.
<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.
- 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.
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.
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; }