Lección 3: Selectores
Todo grupo de estilos debe apuntar a un o varias etiquetas HTML. Por ello los selectores CSS permiten seleccionar ciertos elementos de una página web para darles un estilo. En otras palabras: Los selectores están formados por un conjunto de reglas para identificar y aplicar los estilos.
Disponemos de diferentes tipos. Algunos son muy globales, específicos o por grupos.
etiqueta
Afecta a todas las etiquetas, sin discriminación alguna. Muy útil para definir un estilo común a todo un sitio.
body {
color: orange;
}
p {
color: green;
}
id
Solo sea aplica a una etiqueta y, además, solo se puede utilizar en una ocasión.
Esta formado por # + alias.
/* Empieza por # + alias */
#saturno {
color: brown;
}
En tu documento debes utilizar el atributo id con el alias como valor.
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<!-- Se aplica con el atributo "id". Omite # en su valor. -->
<p id="saturno">Lorem ipsum</p>
<p>Lorem ipsum</p>
No se recomiendo utilizarlo, que ya las id se reservan para JavaScript y es un antipatrón de CSS.
clases
Solo sea aplica a una o varias etiquetas. Puede repetirse tantas veces como sea necesario.
Esta formado por . + alias.
.mercurio {
color: gray;
}
.marte {
color: red;
}
.venus {
color: yellow;
}
En tu documento debes utilizar el atributo class con el alias como valor.
<p class="mercurio">Lorem ipsum</p>
<p class="venus">Lorem ipsum</p>
<p id="jupiter" class="marte">Lorem ipsum</p>
Puedes utilizarlo tantas ocasiones como necesites.
Además, puedes aplicar varias clases a una misma etiqueta. Tan solo separa con espacios en su valor.
<!-- MAL -->
<p id="pluton" class="venus" class="marte">Lorem ipsum</p>
<!-- BIEN -->
<p id="pluton" class="venus marte">Lorem ipsum</p>
Siempre que puedas, usa clases para todo. Es una buena práctica. Aprenderás algunos patrones de CSS cuyos principios se apoyan en usar solo clases.
Actividad 1
Usa una lista para anotar que debes comprar en el supermercado. Si hay alguna fruta, cambia el color del <li> por el color de esa fruta. Para ello deberás crear estilos, usando clases, por cada color que necesites para después aplicarlo en el HTML.
Ejemplo.
<style>
.rojo {
color: red;
}
</style>
<ul>
<li>Agua</li>
<li class="rojo">manzanas</li>
<li>Galletas</li>
</ul>
Actividad 2
A partir del siguiente HTML añade colores, o cualquier otro estilo que has visto en los ejemplos, para darle un aspecto más atractivo. Tienes libertad creativa.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mis vacaciones</title>
</head>
<body>
<h1>Tenerife (Islas Canarias)</h1>
<h2>Subiendo a un volcán</h2>
<p>Mis amigos y yo nos propusimos subir andando hasta la cima del volcán más alto de España: el Teide. El calor nos abraso y a los pocos minutos vaciamos todas las cantimploras. A la hora siguiente notamos como las lagartijas nos perseguían con cierta distancia mientras se relamian los labios. Parecía que esa noche iban a cenar caliente.</p>
<p>Otra hora más tarde uno de mis amigos se torció el tobillo y decidimos abandonarlo a su suerte. Nunca más supimos de él, esperemos que esté en un sitio mejor.</p>
<p>La siguiente hora notamos la ausencia del oxígeno. Respirábamos porque teníamos el hábito. Dos más cayeron en el olvido.</p>
<p>La última hora notamos un poco de hambre de tanto andar. Optamos por el canibalismo.</p>
<p>Solo quedé yo. ¡Qué vistas! Hasta podía ver la isla de Gran Canaria. Valió la pena cada zancada, camiseta escurrida, agujetas en las piernas y perdidas humanas. Estaba a tanta altura que casi podía tocar las estrellas con la punta de mis dedos. Era la oportunidad de maravillarme del volcan y encontrar nuevos amigos.</p>
</body>
</html>
Actividad 3
Busca en los ejemplos el
p con la id Pluton. ¿De que color es el texto? ¿Por qué?
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios