Ejercicios unidad 10: CSS. Unidades. Color. Margen. Fondo. Borde



En este ejercicio practicaremos con márgenes. Para realizar este ejercicio debes descargarte el archivo ejercicios/unidad-10/cursos-aulaclicl/index.html y guardarlo en la carpeta de ejercicios/cursos-aulaclic (o copiar el código que se muestra a continuación). También debes descargarte el archivo ejercicios/unidad-10/cursos-aulaclicl/css/aulaclic.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css (o copiar el código que se muestra a continuación)

Ejercicio 1: Selectores.

  1. Desde el editor Brackets abre el archivo index.html de la carpeta ejercicios/cursos-aulaclic.
  2. Debes ver el siguiente código HTML:
    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8" />
    <title>aulaClic. Cursos gratis</title>
    <link rel="stylesheet" type="text/css" href="css/aulaclic.css" />
    </head>
    <body>
    <a href="http://www.aulaclic.es">
    <img src="graficos/logo_aulaclic_pequeno.png" >
    </a>
    <h2>aulaClic. Cursos de informática gratis</h2>
    <div class="resaltado"> <p>La primera web en español sobre cursos de informática <span>gratis</span> on-line.</p>
    </div>
    <ul >
    <li><h2>Cursos de aulaClic</h2></li>
    <ol>
    <li>Access 2016</li>
    <li>Excel 2016</li>
    <li>Internet</li>
    <li>Windows</li>
    </ol>
    <li><h2>Cursos de colaboradores</h2></li>
    <ol start="5">
    <li>autoCAD 2015</li>
    <li>Estadística con Excel</li>
    <li>Joomla</li>
    </ol>
    </ul>
    <p class="resaltado"> Síguenos en <a href="https://www.facebook.com/cursosaulaclic" target="_blank"><span>Facebook</span></a></p>
    <p><a href="https://www.youtube.com/user/aulaclic" target="_blank">En este enlace puedes ver los vídeos de aulaClic en YouTube:<img src="graficos/camera.gif"></a></p>
    <hr>
    <div class="resaltado">
    <p><a href="http://www.aulaclic.es/portada/politica_cookies.html" target="_blank">Política de cookies</a> </p>
    <p class="derechos">Prohibida la reproducción por cualquier medio. Los cursos de aulaClic están protegidos en el <span>Registro de la Propiedad Intelectual</span>.</p>
    </div>
    </body>
    </html>
  3. La hoja de estilo aulaclic.css debe ser esta:
    ul {list-style-type: none
    }
    h2 {font-size: 20px
    }
    ul h2 {font-size: 16px
    }
    h2, ol { color:darkred
    }
    .resaltado {font-weight: bold
    }
    div.resaltado {color: darkslategrey
    }
    p.resaltado {color: blueviolet
    }
    span {font-family: arial;
    text-decoration: underline
    }
    #sin_subrayar {text-decoration: none
    }
    a:link { text-decoration: none 
    }
  4. Cambia el nombre del color darked de la regla h2, ol { color:darkred} por su versión en hexadecimal con el formato #000000. Para buscar la equivalencia de colores, en la teoría explicamos varias herramientas para manejar el color.
  5. Para practicar con margin, padding, fondos y bordes debes crear un diseño como el que se ve en la siguiente imagen
    ejercicio aulaClic CSS u. 10
  6. Debes crear un borde alrededor del logo de aulaClic, con una anchura de 2 px. y color blue, con un radio de 9 px, para que quede con el de la imagen anterior
  7. Debes transformar el encabezado h2 "aulaClic. Cursos de informática gratis" cambiando la anchura a 20em, añadiéndole un fondo de color antiquewhite, modificar el margen para que quede centrado, añadir la imagen del punto naranja como imagen de fondo. Puedes descargar la imagen desde ejercicios/unidad-10/graficos/orangeball.gif ,

Puedes consultar aquí las soluciones propuestas primero intenta resolverlo sin ayuda.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.