Ayuda ejercicios unidad 11: CSS. Fuente y texto.

En este ejercicio practicaremos con diversas propiedades del texto.

Ejercicio 1: Selectores.

La solución es el siguiente código HTML, index.html, que es el mismo del que partíamos, ya que una de las condiciones del ejercicio era que el archivo HTML no debía ser modificado.

<!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>

La hoja de estilo aulaclic.css si ha sido modificada, este es el resultado:

/* CSS Hoja de estilo. aulaclic.css */
body {
    font-family: verdana, sans-serif
}
ul {
    list-style-type: none;
    font-family: Tahoma, sans-serif;
    line-height: 1.5
}
h2 {
    font-size: 20px
}
ul h2 {
    font-size: 16px
}
h2, ol {
    color:darkred
}
.resaltado {
    font-weight: bold
}
div.resaltado {
    color: darkslategrey;
   text-align: center;
}
p.resaltado {
    color: blueviolet
}
span {
    font-family: arial;
     text-decoration: underline
}
#sin_subrayar {
    text-decoration: none;
    letter-spacing: 3px
}
a:link {
    text-decoration: none 
} 
.fondo {
    background-color: antiquewhite;
    width: 22em;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    text-shadow: 3px 2px 4px grey;    
}
.bordes { 
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    border-radius: 9px;
}

Los cambios efectuados han sido los siguientes: para que la fuente del body sea verdana, y si no existe tome una fuente del tipo sans-serif, se ha añadido body { font-family: verdana, sans-serif }
Para cambiar la fuente de las listas desordenadas a Tahoma, y si no existe tome una fuente del tipo sans-serif, se ha añadido .font-family: Tahoma, sans-serif; al selector ul.
Para añadir una sombra al texto "aulaClic. Cursos de informática gratis" se ha añadido text-shadow: 3px 2px 4px grey; a la clase .fondo. Para eliminar la imagen de fondo del círculo naranja se han quitado las propiedades: background-image: url(../graficos/orangeball.gif); background-position: 10px center; background-repeat: no-repeat;
Para cambiar a alineación centrada para el selector div.resaltado, se ha añadido text-align: center;
Para cambiar el espacio interlineado a 1.5 de las listas desordenadas, se ha añadido line-height: 1.5 al selector ul.
Para modificar el espaciado entre caracteres a 3 px. para el texto "Facebook", se ha añadido letter-spacing: 3px al selector #sin_subrayar
Como se pedía el resultado de la página es este

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

Cursos Informática Gratuitos

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