28 Feb Ejercicio sobre selectores css (III)
Este ejercicio es el tercero dentro de la serie de ejercicios sobre selectores CSS.
Es interesante que les des un vistazo.
Ten en cuenta que no están ordenados por dificultad creciente. El orden en que los hagas es indistinto.
Vayamos al ejercicio.
Enunciado
Escribe el html que corresponda con los selectores css indicados en el enunciado.
.primero{}
p.primero{}
section.primero{}
#paco{ }
p#moco{}
.primero span{ }
.primero > span{ }
span .primero{}
.primero.parding{ }
Solución del ejercicio
Ninguna solución es única.
Para cada selectores existen multitud de soluciones posibles.
En la solución encontrarás varias posibles respuestas con el objetivo de hacerte reflexionar.
¡Si tienes dudas consulta en los comentarios!
Como debería ser el html para que estos selectores llamasen las etiquetas.
.primero{}
<p class="primero">hola</p>
<section class="primero">adiós</section>
p.primero{}
<p class="primero">hola</p>
section.primero{}
<section class="primero">adiós</section>
#paco{ }
<p id="paco">hola</p>
<section id="paco">adiós</section>
p#moco{}
<p id="moco">un texto</p>
.primero span{ }
<p class="primero"><em><span>genial</span></em></p>
.primero > span{ }
<p class="primero"><span><em>me gusta</em></span></p>
span .primero{}
span > .primero{}
<span><p class="primero">fantástico</p></span>
.primero.parding{ }
<p class="primero parding">motivante</p>
<p class="parding primero">el orden no importa</p>
¡Hola!
Querido lector,
Es un ejercicio atípico pero práctico.
Espero que te haya ayudado a entender mejor los selectores.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
No Comments