28 Feb Ejercicio sobre selectores css (III)
Publicado a las 07:30h en Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 0 Comentarios
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:
Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
Ejercicio css dar formato a una tabla de precios con display:table
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Ejemplo de como generar y crear un sprite css para mejorar la carga web
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
Estilos css para enlaces. :link, :visited:, :hover, :active
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un ...
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un ...
Como crear columnas con CSS de forma fácil mediante Inline-block y float
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
No hay comentarios