Ejercicios CSS

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 10

EJERCICIOS CSS

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:
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.

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;
}

También podría gustarte