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.
- 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>
- 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 }
- Para que todas las etiquetas h2 tengan un tamaño de letra de 20 px., escribimos la regla h2 {font-size: 20px}
- 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}
- Para que todas las etiquetas p y ol sean de color darked, escribimos p, ol { color:darkred}.
- A los elementos que tienen asignada la clase .resaltado les asignamos un estilo negrita con .resaltado {font-weight: bold}.
- 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}
- Con las pesudoclases podemos manejar diferentes estados, por ejemplo, para evitar que los hiperenlaces aparezcan subrayados escribimos a:link { text-decoration: none }
- 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}
- 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}.
- 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
}
- 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
- 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.
Cursos Informática Gratuitos
