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.

Desde el editor Brackets abre el archivo index.html de la carpeta ejercicios/cursos-aulaclic.

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="https://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="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>

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 
}

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.
Para practicar con margin, padding, fondos y bordes debes crear un diseño como el que se ve en la siguiente imagen
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
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)

Cursos Informática Gratuitos

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