En la anterior clase aprendimos a agregar comentarios en una hoja de estilos CSS. Algo que como pudisteis comprobar, es muy fácil y de una gran utilidad a la hora de organizar una hoja de estilos. En esta nueva publicación en el blog, vamos a empezar a conocer, que son los selectores y cuantos tipos de selectores existen en CSS3.
Lo primero que debes saber si no sabes nada de CSS es, que es un selector y para que sirve. Un selector es un elemento o etiqueta de un documento HTML y se utiliza para seleccionar dichos elementos o etiquetas en una hoja de estilos CSS. Hasta aquí, bastante sencillo, con los selectores seleccionamos la etiqueta que queremos modificar con CSS.
Siempre digo, que la necesidad agudiza el ingenio, y ahora me explico. La necesidad de los diseñadores web a evolucionado tanto, que css se vio obligado a implementar selectores mucho más complejos para cubrir todos los requerimientos técnicos que solicitaban. Es por ello que tenemos varios tipos de selectores. Desde algunos sencillos como, los selectores de etiqueta. Hasta los más complejos, donde podemos seleccionar etiquetas en base a sus atributos o a ciertos valores ambiguos. Nosotros vamos a encargarnos de estudiarlos todos y ademas vamos a pasarlo muy bien haciéndolo.
Selectores de etiqueta
Vamos a empezar por el selector mas sencillo, el selector de etiqueta. Este tipo de selector nos permite seleccionar, todos los elementos de una pagina cuya etiqueta html, coincide con el valor del selector.
Os pongo un ejemplo:
En este caso, el valor del selector es p. Esto quiere decir que va a seleccionar todas las etiquetas <p> del documento html al que va asociada esta hoja de estilo.
p { background: red; }
¿Como seleccionarias las etiquetas <h2> y <p> para aplicarle un fondo del color que te apetezca a estas etiquetas?
<h2>Titulo 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iusto perferendis magnam asperiores neque libero, harum fuga vitae labore, in ipsam eveniet amet cupiditate quam. Tenetur blanditiis, beatae praesentium sapiente!</p> <h2>Titulo 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit rerum odit similique odio, architecto deserunt eaque saepe impedit explicabo cum veniam repellendus pariatur neque! Consequuntur alias pariatur accusamus laborum sequi.</p>
h2{ background: red; }
p{ background: blue; }
Finalizando la clase
Pues ya habéis visto que fácil es seleccionar cualquier etiqueta de un documento HTML con selectores de etiqueta. Rapidamente y sin esfuerzo hemos cambiado el color de fondo de estos elementos con CSS3. Cuando empecéis a trabajar con CSS el uso de estos selectores es básico, así que para vosotros va a ser como montar en bici, ya no vais a poder olvidaros.
Por favor, tomate un minuto para compartir este articulo, clase , post o como quieras llamarlo. De esta forma ayudas a que esta comunidad de estudio crezca y otras personas interesadas en aprender, puedan acceder a este contenido. Y por supuesto no dudes en dejarme un comentario sobre este tema, si te ha gustado o servido de algo, o si quieres puntualizar o corregir algo.
¡HASTA LA PRÓXIMA CLASE!
0 Comentarios