Unidad 9. Ejercicio: CSS. Selectores



En este ejercicio practicaremos con selectores CSS. Para realizar este ejercicio debes descargarte el archivo ejercicios/unidad-9/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 crear un archivo nuevo index.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css.

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="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>
  3. Ahora vamos a añadir una regla a la hoja de estilo index.css que acabas de crear. Para que no aparezca el "disco" delante de los elementos de la lista desordenada, escribimos ul {list-style-type: none }
  4. Para que todas las etiquetas h2 tengan un tamaño de letra de 20 px., escribimos la regla h2 {font-size: 20px}
  5. Si queremos que sólo las etiquetas h2 que estén dentro de una lista desordenada tengan un tamaño de letra de 16 px., debemos escribir la regla ul h2 {font-size: 16px}
  6. Para que todas las etiquetas p y ol sean de color darked, escribimos p, ol { color:darkred}.
  7. A los elementos que tienen asignada la clase .resaltado les asignamos un estilo negrita con .resaltado {font-weight: bold}.
  8. Además a los elementos que tienen asignada la clase .resaltado y están dentro de una etiqueta div les damos el color darkslategrey con la regla div.resaltado {color: darkslategrey} pero a a los elementos que tienen asignada la clase .resaltado y están dentro de una etiqueta p les damos el color blueviolet con la regla p.resaltado {color: blueviolet}
  9. Con las pesudoclases podemos manejar diferentes estados, por ejemplo, para evitar que los hiperenlaces aparezcan subrayados escribimos a:link { text-decoration: none }
  10. Para asignar estilos a palabras o frases concretas disponemos de la etiqueta span, por ejemplo para asignarle la fuente arial y subrayado, escribimos la regla span {font-family: arial; text-decoration: underline}
  11. Pero si queremos que una etiqueta span en concreto, por ejemplo, <span>Facebook</span>, no esté subrayada podemos asignarle un identificador escribiendo en el código HTML del archivo index.html: <span id="sin_subrayar">Facebook</span> y luego darle el estilo #sin_subrayar {text-decoration: none}.
  12. La hoja de estilo index.css debe quedar así:
    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 
    }
  13. Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, index.html e index.css. Visualiza la página web desde el editor Brackets con el botón
  14. 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)
Volver






Página inicial  Cursos Informática Gratuitos

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


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