Scribd Logo
Upload

Welcome to Scribd!

  • Ejercicios CSS

    Uploaded by

    yeskitas1
    209 views10 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    209 views10 pages

    Ejercicios CSS

    Uploaded by

    yeskitas1

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Hojas de estilo en cascada

    Practica 1: Aplicacin en elementos de pgina

    Pgina 1 de 10

    Objetivo: Crea los siguientes fragmentos CSS necesarios y aplcalos en cada ejercicio mostrado. Guarda cada ejercicio en una pgina individual (archivo *.htm).

    Ejercicio 1 A partir del cdigo HTML y CSS que se muestra, aadir 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/xhtm l1-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 prrafos contenidos en #primero */ { color: #336699; }

    /* Todos los enlaces la pagina */ { color: #CC3300; }

    /* Los elementos "em" contenidos en #primero */ { background: #FFFFCC; padding: .1em; }

    Hojas de estilo en cascada


    /* Todos los elementos "em" de clase "especial" en toda la pagina */ { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }

    Pgina 2 de 10

    /* 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 a t felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <e m>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. Phasel lus 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 iacu lis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed m alesuada dui vel quam. Integer at eros.</p> </div>

    Hojas de estilo en cascada


    </body> </html>

    Pgina 3 de 10

    Ejercicio 2 A partir del cdigo HTML proporcionado, aadir las reglas CSS necesarias para que la pgina resultante tenga el mismo aspecto que el de la siguiente imagen:

    A continuacin se muestra el cdigo HTML de la pgina sin estilos. Los nombres de los colores tambin estn estandarizados y se corresponden con el nombre en ingls de cada color. En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive, fuchsia y Green.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml 1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

    Hojas de estilo en cascada


    <title>Ejercicio de selectores</title> </head>

    Pgina 4 de 10

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <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 sagitt is 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 turpi s 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 od io at dui. In in elit sed metus pretium elementum.</p>

    <table summary="Descripcin de la tabla y su contenido"> <caption>Ttulo de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Ttulo columna 1</th> <th scope="col" class="especial">Ttulo columna 2</th> </tr> </thead>

    <tfoot>

    Hojas de estilo en cascada


    <tr> <th scope="col"></th> <th scope="col">Ttulo columna 1</th> <th scope="col">Ttulo columna 2</th> </tr> </tfoot>

    Pgina 5 de 10

    <tbody> <tr> <th scope="row" class="especial">Ttulo fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Ttulo 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, vehicul a vulputate</span>, venenatis in,

    Hojas de estilo en cascada

    Pgina 6 de 10

    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>

    Ejercicio 3 Pseudoclases para enlaces: Las pseudo-clases :link y :visited se usan generalmente para diferenciar entre un enlace que an no ha sido visitado por otro que ya fue activado. La pseudo-clase :hover se aplica generalmente cuando el cursor se desplaza por encima de un enlace. La pseudo-clase :active se aplica cuando el elemento est siendo activado por el usuario, como por ejemplo cuando el usuario presiona un botn. La pseudo-clase :focus se aplica cuando el elemento tiene el foco

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

    Hojas de estilo en cascada

    Pgina 7 de 10

    Ejercicio 4 Definir las reglas CSS que permiten mostrar una galera de imgenes similar a la que se muestra en la siguiente imagen, emplee tablas embebidas y fondo de celdas para lograrlo. Escoja las imgenes a su gusto. Sintaxis para poner fondo: background: #ColorFondo url("Imagen.extension") no-repeat [MargenPixeles]; Ejemplo:
    background: #F4F4F4 url("../../comun/imagenes/flecha_inactiva.png") no-repeat 3px;

    Hojas de estilo en cascada


    Ejercicio 5

    Pgina 8 de 10

    Modificar el men vertical sencillo para que muestre el siguiente comportamiento: Imgenes (Copie, pguelas y gurdelas en formato PNG) flecha_inactiva.png flecha_activa.png

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

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

    Hojas de estilo en cascada

    Pgina 9 de 10

    3) El color de fondo del elemento tambin debe variar ligeramente y mostrar un color gris ms oscuro (#E4E4E4) cuando se pasa el ratn por encima:

    4) El comportamiento anterior se debe producir cuando el usuario pasa el ratn por encima de cualquier zona del elemento del men, no solo cuando se pasa el ratn por encima del texto del elemento (este problema slo sucede con Internet Explorer 6):

    Hojas de estilo en cascada

    Pgina 10 de 10

    You might also like