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.
  6. 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
  7. También puedes ver el resultado desde este enlace: index.html
  8. 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.