Ayuda ejercicios unidad 10: CSS. Unidades. Color. Margen. Fondo. Borde



En este ejercicio practicaremos con márgenes, colores, y fondos.

Ejercicio 1: Selectores.

  1. La solución es el siguiente código HTML index.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="https://www.aulaclic.es">
    <img class="bordes" src="graficos/logo_aulaclic_pequeno.png" >
    </a>
    <h2 class="fondo">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 id="sin_subrayar">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="https://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>
  2. Y la siguiente hoja de estilo aulaclic.css:
    /* CSS Hoja de estilo. aulaclic.css */
    ul { list-style-type: none }
    h2 {font-size: 20px }
    ul h2 {font-size: 16px }
    h2, ol { color:#8b0000 }
    .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 }
    .fondo {background-color: antiquewhite;
    width: 20em;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    background-image: url(../graficos/orangeball.gif);
    background-position: 10px center;
    background-repeat: no-repeat;
    }
    .bordes { border-color: blue;
    border-style: solid;
    border-width: 2px;
    border-radius: 9px;
    }
  3. Para cambiar el nombre del color darked de la regla h2, ol { color:darkred} por su versión en hexadecimal con el formato #000000, desde el editor Brackets colocamos el cursor encima de darked y pulsamos Ctrl+E y se abrirá el menú de edición rápida, pulsamos el botón Hex y se copiará el siguiente código en hexadecimal #8b0000.
  4. Para crear el borde azul del logo de aulaClic con una anchura de 2 px. y color blue, con un radio de 9 px,
    ejercicio aulaClic CSS u. 10
    escribimos esta regla:
    bordes { border-color: blue;
      border-style: solid;
      border-width: 2px;
      border-radius: 9px;
    }

  5. Para 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, escribimos este código:

  6. .fondo {background-color: antiquewhite;
    width: 20em;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    background-image: url(../graficos/orangeball.gif);
    background-position: 10px center;
    background-repeat: no-repeat;
    }
    Con margin: 0 auto; damos un margen de 0 en la parte superior e inferior, y un margen automático a la derecha e izquierda, con lo cual el encabezado queda centrado horizontalmente.
    Con background-position: 10px center; indicamos que la imagen de fondo se sitúe a 10 px. de la izquierda y centrada verticalmente.
  7. Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, index.html y aulaclic.css. Visualiza la página web desde el editor Brackets con el botón
  8. También puedes ver el resultado desde este enlace: index.html
  9. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.


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. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.