Capítulo 14 Ejercicios de CSS

14.1 Capítulo 2

14.1.1 Ejercicio 1

A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse:

<!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>
    <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 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 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>

14.2 Capítulo 2

14.2.1 Ejercicio 2

A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página resultante tenga el mismo aspecto que el de la siguiente imagen:

Figura 14.1 Aspecto final de la página

A continuación se muestra el código HTML de la página sin estilos:

<!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>
 
    <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>

Los nombres de los colores están estandarizados y se corresponden con el nombre en inglés de cada color. En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive, fuchsia y green.

14.3 Capítulo 4

14.3.1 Ejercicio 3

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes márgenes y rellenos:

Figura 14.2 Página original

El elemento #cabecera debe tener un relleno de 1em en todos los lados.
El elemento #menu debe tener un relleno de 0.5em en todos los lados y un margen inferior de 0.5em.
El resto de elementos (#noticias, #publicidad, #principal, #secundario) deben tener 0.5em de relleno en todos sus lados, salvo el elemento #pie, que sólo debe tener relleno en la zona superior e inferior.
Los elementos .articulo deben mostrar una separación entre ellos de 1em.
Las imágenes de los artículos muestran un margen de 0.5em en todos sus lados.
El elemento #publicidad está separado 1em de su elemento superior.
El elemento #pie debe tener un margen superior de 1em.

Figura 14.3 Página con márgenes y rellenos

Descargar ficheros

14.3.2 Ejercicio 4

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes bordes:

Figura 14.4 Página original

Eliminar el borde gris que muestran por defecto todos los elementos.
El elemento #menu debe tener un borde inferior de 1 píxel y azul (#004C99).
El elemento #noticias muestra un borde de 1 píxel y gris claro (#C5C5C5).
El elemento #publicidad debe mostrar un borde discontinuo de 1 píxel y de color #CC6600.
El lateral formado por el elemento #secundario muestra un borde de 1 píxel y de color #CC6600.
El elemento #pie debe mostrar un borde superior y otro inferior de 1 píxel y color gris claro #C5C5C5.

Figura 14.5 Página con bordes

14.3.3 Ejercicio 5

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes colores e imágenes de fondo:

Figura 14.6 Página original

Los elementos #noticias y #pie tiene un color de fondo gris claro (#F8F8F8).
El elemento #publicidad muestra un color de fondo amarillo claro (#FFF6CD).
Los elementos <h2> del lateral #secundario muestran un color de fondo #DB905C y un pequeño padding de .2em.
El fondo del elemento #menu se construye mediante una pequeña imagen llamada fondo_menu.gif.
El logotipo del sitio se muestra mediante una imagen de fondo del elemento <h1> contenido en el elemento #cabecera (la imagen se llama logo.gif).

Figura 14.7 Página con colores e imágenes de fondo

Descargar ficheros

14.4 Capítulo 5

14.4.1 Ejercicio 6

A partir del código HTML proporcionado:

<!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 posicionamiento float</title>
  <style type="text/css">
  </style>
</head>
 
<body>
  <div>
    &laquo; Anterior &nbsp; Siguiente &raquo;
  </div>
</body>
</html>

Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen:

Figura 14.8 Elementos posicionados mediante float

14.5 Capítulo 6

14.5.1 Ejercicio 7

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir las siguientes propiedades a la tipografía de la página:

La fuente base de la página debe ser: color negro, tipo Arial, tamaño 0.9em, interlineado 1.4.
Los elementos <h2> de .articulo se muestran en color #CC6600, con un tamaño de letra de 1.6em, un interlineado de 1.2 y un margen inferior de 0.3em.
Los elementos del #menu deben mostrar un margen a su derecha de 1em y los enlaces deben ser de color blanco y tamaño de letra 1.3em.
El tamaño del texto de todos los contenidos de #lateral debe ser de 0.9em. La fecha de cada noticia debe ocupar el espacio de toda su línea y mostrarse en color gris claro #999. El elemento <h3> de #noticias debe mostrarse de color #003366.
El texto del elemento #publicidad es de color gris oscuro #555 y todos los enlaces de color #CC6600.
Los enlaces contenidos dentro de .articulo son de color #CC6600 y todos los párrafos muestran un margen superior e inferior de 0.3em.
Añadir las reglas necesarias para que el contenido de #secundario se vea como en la imagen que se muestra.
Añadir las reglas necesarias para que el contenido de #pie se vea como en la imagen que se muestra.

Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen:

Figura 14.9 Página con propiedades tipográficas

Descargar ficheros

14.6 Capítulo 7

14.6.1 Ejercicio 8

Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:

En su estado normal, los enlaces se muestran de color rojo #CC0000.
Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo rojo #CC0000 y la letra de color blanco #FFF.
Los enlaces visitados se muestran en color gris claro #CCC.

Figura 14.10 Enlaces con estilos aplicados mediante CSS

14.7 Capítulo 8

14.7.1 Ejercicio 9

Modificar el menú vertical sencillo para que muestre el siguiente comportamiento:

1) Los elementos deben mostrar una imagen de fondo (flecha_inactiva.png):

Figura 14.11 Menú vertical con imagen de fondo

2) Cuando se pasa el ratón por encima de un elemento, se debe mostrar una imagen alternativa (flecha_activa.png):

Figura 14.12 Menú vertical con imagen de fondo alternativa

3) El color de fondo del elemento también debe variar ligeramente y mostrar un color gris más oscuro (#E4E4E4) cuando se pasa el ratón por encima:

Figura 14.13 Menú vertical con imagen de fondo y color alternativos

Descargar ficheros

14.8 Capítulo 9

14.8.1 Ejercicio 10

A partir del código HTML proporcionado:

1) Aplicar las reglas CSS necesarias para que el formulario muestre el siguiente aspecto:

Figura 14.14 Formulario estructurado a dos columnas

2) Cuando el usuario pasa el ratón por encima de cada grupo de elementos de formulario (es decir, por encima de cada <li>) se debe modificar su color de fondo (sugerencia: color amarillo claro #FF9). Además, cuando el usuario se posiciona en un cuadro de texto, se debe modificar su borde para resaltar el campo que está activo cada momento (sugerencia: color amarillo #E6B700):

Figura 14.15 Mejoras en los campos de formulario

3) Utilizando el menor número de reglas CSS, cambiar el aspecto del formulario para que se muestre como la siguiente imagen:

Figura 14.16 Formulario estructurado a una columna

4) Cuando el usuario pasa el ratón por encima de un grupo de elementos de formulario (es decir, por encima de cada <li>) se debe mostrar el mensaje de ayuda asociado. Añadir las reglas CSS necesarias para que el formulario tenga el aspecto definitivo mostrado en la siguiente imagen:

Figura 14.17 Aspecto final del formulario

Descargar ficheros

14.9 Capítulo 10

14.9.1 Ejercicio 11

Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el aspecto final mostrado en la imagen (modificar el código HTML que se considere necesario añadiendo los atributos class oportunos).

Tabla original:

Figura 14.18 Aspecto original de la tabla

Tabla original:

Figura 14.19 Aspecto final de la tabla

1) Alinear el texto de las celdas, cabeceras y título. Definir los bordes de la tabla, celdas y cabeceras (color gris oscuro #333):

Figura 14.20 Tabla con texto alineado y bordes

2) Formatear las cabeceras de fila y columna con la imagen de fondo correspondiente en cada caso (fondo_gris.gif, euro.png, dolar.png, yen.png, libra.png). Modificar el tipo de letra de la tabla y utilizar Arial. El color azul claro es #E6F3FF.

Figura 14.21 Tabla con colores e imágenes de fondo

3) Mostrar un color alterno en las filas de datos (color amarillo claro #FFFFCC).

Figura 14.22 Tabla con colores de fila alternos

Descargar ficheros

14.10 Ejercicio final

Determinar las reglas CSS necesarias para mostrar la página HTML que se proporciona con el estilo que se muestra en la siguiente imagen:

Figura 14.23 Aspecto final que debe mostrar la página HTML proporcionada

A continuación se indica una propuesta de los pasos que se pueden seguir para obtener el aspecto final deseado:

Añadir los estilos básicos de la página (tipo de letra Verdana, color de letra #192666, imagen de fondo llamada fondo.gif, color de fondo #F2F5FE).
Definir la estructura básica de la página: anchura fija de 770 píxel, centrada en la ventana del navegador, cabecera y pie, columna central de contenidos de anchura 530 píxel y columna secundaria de contenidos de 200 píxel de anchura.
La cabecera tiene una altura de 100 píxel y una imagen de fondo llamada cabecera.jpg.
Los elementos del menú de navegación tienen un color de fondo #253575, un color de letra #B5C4E3. Cuando el ratón pasa por encima de cada elemento, su color de fondo cambia a #31479B. Los elementos seleccionados se muestran con un color de fondo blanco y un color de letra #FF9000:

Figura 14.24 Imagen detallada del aspecto que muestran los elementos del menú de navegación

Con la ayuda de las imágenes que se proporcionan, mostrar cada uno de los artículos de contenido con el estilo que se muestra en la siguiente imagen:

Figura 14.25 Aspecto de un artículo de la sección principal de contenidos

Añadir los estilos adecuados para mostrar los elementos de la columna secundaria de contenidos con el siguiente aspecto.

Figura 14.26 Aspecto de las secciones de la columna secundaria de contenidos

Descargar ficheros

CSS 2.1

Capítulo 14 Ejercicios de CSS

14.1 Capítulo 2

14.1.1 Ejercicio 1

14.2 Capítulo 2

14.2.1 Ejercicio 2

14.3 Capítulo 4

14.3.1 Ejercicio 3

14.3.2 Ejercicio 4

14.3.3 Ejercicio 5

14.4 Capítulo 5

14.4.1 Ejercicio 6

14.5 Capítulo 6

14.5.1 Ejercicio 7

14.6 Capítulo 7

14.6.1 Ejercicio 8

14.7 Capítulo 8

14.7.1 Ejercicio 9

14.8 Capítulo 9

14.8.1 Ejercicio 10

14.9 Capítulo 10

14.9.1 Ejercicio 11

14.10 Ejercicio final

Índice de contenidos