Introducción a CSS Capítulo 15.
Ejercicios
Capítulo 15. Ejercicios
15.1. Ejercicio 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */
{ color: #555; }
/* Todos los párrafos contenidos en #primero */
{ color: #336699; }
/* Todos los enlaces de la pagina */
{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */
{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>.
Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis
ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id
lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a
www.librosweb.es 199
Introducción a CSS Capítulo 15. Ejercicios
href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa
tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus.
<a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit
consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis
parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em
class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a
href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam.
Integer at eros.</p>
</div>
</body>
</html>
15.2. Ejercicio 2
Figura 15.1. Aspecto final de la página
www.librosweb.es 200
Introducción a CSS Capítulo 15. Ejercicios
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse
gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span
class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a
href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium
varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor
purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus
pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
www.librosweb.es 201
Introducción a CSS Capítulo 15. Ejercicios
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac,
lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit
elit, vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi
feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium
vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis
mi.</p>
</div>
</body>
</html>
color
teal red
blue orange purple olive fuchsia green
15.3. Ejercicio 3
www.librosweb.es 202
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.2. Página original
#cabecera 1em
#menu 0.5em
0.5em
#noticias #publicidad #principal #secundario
0.5em #pie
.articulo 1em
0.5em
#publicidad 1em
#pie 1em
www.librosweb.es 203
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.3. Página con márgenes y rellenos
15.4. Ejercicio 4
www.librosweb.es 204
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.4. Página original
#menu #004C99
#noticias #C5C5C5
#publicidad
#CC6600
#secundario
#CC6600
#pie
#C5C5C5
www.librosweb.es 205
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.5. Página con bordes
15.5. Ejercicio 5
www.librosweb.es 206
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.6. Página original
#noticias #pie #F8F8F8
#publicidad #FFF6CD
<h2> #secundario #DB905C
0.2em
#menu
fondo_menu.gif
<h1> #cabecera logo.gif
www.librosweb.es 207
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.7. Página con colores e imágenes de fondo
15.6. Ejercicio 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio posicionamiento float</title>
<style type="text/css">
</style>
</head>
<body>
<div>
« Anterior Siguiente »
</div>
</body>
</html>
www.librosweb.es 208
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.8. Elementos posicionados mediante float
15.7. Ejercicio 7
Figura 15.9. Página original
www.librosweb.es 209
Introducción a CSS Capítulo 15. Ejercicios
0.9em
1.4
<h2> .articulo #CC6600
1.6em 1.2 0.3em
#menu 1em
1.3em
#lateral 0.9em
#999 <h3> #noticias
#003366
#publicidad #555
#CC6600
.articulo #CC6600
0.3em
#secundario
#pie
Figura 15.10. Página con propiedades tipográficas
www.librosweb.es 210
Introducción a CSS Capítulo 15. Ejercicios
15.8. Ejercicio 8
#CC0000
#CC0000 #FFF
#CCC
Figura 15.11. Enlaces con estilos aplicados mediante CSS
15.9. Ejercicio 9
www.librosweb.es 211
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.12. Galería de imágenes construida con CSS
15.10. Ejercicio 10
flecha_inactiva.png
www.librosweb.es 212
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.13. Menú vertical con imagen de fondo
flecha_activa.png
Figura 15.14. Menú vertical con imagen de fondo alternativa
#E4E4E4
Figura 15.15. Menú vertical con imagen de fondo y color alternativos
www.librosweb.es 213
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.16. Aspecto final del menú vertical avanzado creado con CSS
15.11. Ejercicio 11
class
Figura 15.17. Aspecto original de la tabla
www.librosweb.es 214
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.18. Aspecto definitivo de la tabla después de aplicar estilos CSS
#333
Figura 15.19. Tabla con texto alineado y bordes
fondo_gris.gif euro.png dolar.png yen.png
libra.png Arial
#E6F3FF
www.librosweb.es 215
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.20. Tabla con colores e imágenes de fondo
#FFFFCC
Figura 15.21. Tabla con colores de fila alternos
15.12. Ejercicio 12
www.librosweb.es 216
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.22. Formulario estructurado a dos columnas
<li>
#FF9
#E6B700
Figura 15.23. Mejoras en los campos de formulario
www.librosweb.es 217
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.24. Formulario estructurado a una columna
<li>
www.librosweb.es 218
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.25. Aspecto final del formulario
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<div id="contenedor">
<h2>Formulario de alta</h2>
<form method="post" action="#">
<ul>
<li>
<label class="titulo" for="nombre">Nombre y apellidos <span
class="requerido">*</span></label>
<div>
www.librosweb.es 219
Introducción a CSS Capítulo 15. Ejercicios
<span>
<input id="nombre" name="nombre" value="" />
<label for="nombre">Nombre</label>
</span>
<span>
<input id="apellido1" name="apellido1" value="" />
<label for="apellido1">Primer apellido</label>
</span>
<span>
<input id="apellido2" name="apellido2" value="" />
<label for="apellido2">Segundo apellido</label>
</span>
</div>
<p class="ayuda">No te olvides de escribir también tu segundo apellido</p>
</li>
<li>
<label class="titulo" for="direccion">Dirección <span
class="requerido">*</span></label>
<div>
<span>
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, número, piso, puerta</label>
</span>
<span>
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Código postal</label>
</span>
<span>
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span>
<select id="provincia" name="provincia">
<option value=""></option>
<option value="provincia1">Provincia 1</option>
<option value="provincia2">Provincia 2</option>
<option value="provincia3">Provincia 3</option>
</select>
<label for="provincia">Provincia</label>
</span>
<span>
<select id="pais" name="pais">
<option value=""></option>
<option value="pais1">País 1</option>
<option value="pais2">País 2</option>
<option value="pais3">País 3</option>
www.librosweb.es 220
Introducción a CSS Capítulo 15. Ejercicios
</select>
<label for="pais">País</label>
</span>
</div>
<p class="ayuda">El código postal es imprescindible para poder recibir los
pedidos</p>
</li>
<li>
<label class="titulo" for="email">Email</label>
<div>
<span>
<input id="email" name="email" value="" />
</span>
</div>
<p class="ayuda">Asegúrate de que sea válido</p>
</li>
<li>
<label class="titulo" for="telefonofijo">Teléfono <span
class="requerido">*</span></label>
<div>
<span>
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span>
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Móvil</label>
</span>
</div>
<p class="ayuda">Sin prefijo de país y sin espacios en blanco</p>
</li>
<li>
<input id="alta" type="submit" value="Darme de alta →" />
</li>
</ul>
</form>
</div>
</body>
</html>
www.librosweb.es 221
Introducción a CSS Capítulo 15. Ejercicios
15.13. Ejercicio 13
Figura 15.26. Aspecto final que debe mostrar la página HTML proporcionada
#192666 fondo.gif #F2F5FE
770
530 200
100
cabecera.jpg
#253575
#B5C4E3
#31479B
#FF9000
Figura 15.27. Imagen detallada del aspecto que muestran los elementos del menú de
navegación
www.librosweb.es 222
Introducción a CSS Capítulo 15. Ejercicios
Figura 15.28. Aspecto de un artículo de la sección principal de contenidos
Figura 15.29. Aspecto de las secciones de la columna secundaria de contenidos
www.librosweb.es 223
