Hola de nuevo a todos, y bienvenidos una vez más al curso del editor de hojas de estilos CSS 3.
A lo largo de la clase de hoy, aprenderemos a colocar un menú en nuestra página web, y a darle el estilo que queramos.
Además, profundizaremos un poco más, adentrándonos en conceptos como «pseudoclases«, con los que empezaremos a manejar el comportamiento de nuestra hoja de estilos en tiempo real, ¡Sin salir de nuestra etiqueta «style»!
¡Vamos a por ello!
RESUMEN DEL VÍDEO:
En esta sesión veremos cómo hacer un menú y darle estilo. Veremos etiquetas como text-decoration o display. Otro aspecto importante a tratar será el concepto de las pseudoclases, que se declaran con “:”.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Quinta clase con menu</title>
<style>
li {
list-style-type: none;
display: inline-block;
}
a {
text-decoration: none;
background-color: crimson;
color: white;
padding: 10px;
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: black;
}
a:active{
color: black;
}
a:hover {
background-color: red;
}
a:visited {
color: purple
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="www.tutorialesdeprogramacion.com" class="pulsado"> Inicio </a></li>
<li><a href="#" class="raton-encima"> Mi cuenta </a></li>
<li><a href="#" class="visitado"> Quienes somos </a></li>
<li><a href="#"> Donde estamos </a></li>
</ul>
</nav>
</body>
</html>
Como bien sabes, los conceptos que utilizamos en esta clase, son aplicables para darle formato a todos los elementos que conforman una página web.
Expermienta con tu código, y ¡nos vemos en la siguiente clase!