02 Mar ¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
En este ejercicio vamos a repasar instrucciones básicas de css.
Es una buena forma de recordar que el html nunca debe sustituir al css y viceversa.
Te será útil repasar estas publicaciones.
Entremos en materia.
Enunciado
En la hoja html del enunciado se indican comentadas una serie de etiquetas que tienen algún estilo característico en el navegador. Por ejemplo <b> se ve en negrita y <i> se muestra en italica.
Para cada etiqueta encontrarás un párrafo con una clase cuyo contenido es el nombre de la etiqueta.
Escribe dentro del <style> el código css que permita que los <p> parezcan una etiqueta que en realidad no son.
<!DOCTYPE html>
<html>
<head>
<title>¡Veo, veo!</title>
<meta charset="utf-8"/>
<style>
/*Escribe aquí las instrucciones css oportunas*/
</style>
</head>
<body>
<!-- <u>, <ins> -->
<!-- <i> -->
<!-- <b> -->
<!-- <s>, <del> -->
<!-- <blockquote> -->
<!-- <center> -->
<!-- <cite> -->
<!-- <sup> -->
<!-- <sub> -->
<!-- <code> -->
<p class="u">Lorem ipsum dolor sit amet.</p>
<p class="i">Lorem ipsum dolor sit amet.</p>
<p class="b">Lorem ipsum dolor sit amet.</p>
<p class="s">Lorem ipsum dolor sit amet.</p>
<p class="blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis obcaecati est dolores eos eveniet commodi doloribus voluptas repellat temporibus culpa.</p>
<p class="center">Lorem ipsum dolor sit amet.</p>
<p class="cite">Lorem ipsum dolor sit amet.</p>
<p>2<span class="sup">3</span></p>
<p>5<span class="sub">4</span></p>
<p class="code">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatum velit minus commodi, impedit at excepturi porro ipsam repellat ex.</p>
</body>
</html>Solución del ejercicio
<style>
.u{text-decoration:underline;}
.i{font-style:italic;}
.b{font-weight:bold;}
.s{text-decoration:line-through;}
.blockquote{margin-left:2em;}
.center{text-align:center;}
.cite{font-style:oblique;}
.sup{font-size:.8em; vertical-align:super;}
.sub{font-size:.8em; vertical-align:sub;}
.code{font-family:courier,monospace;}
</style>¡Hola!
Querido lector,
Este ha sido un buen ejercicio para repasar como dar formato a los textos o incluso aprender valores de propiedades css que no son tan comúnmente utilizados.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Código html y css de como crear un menú vertical con un submenú horizontal.
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Ejercicio css sobre background en el que se pintan mediante gradientes algunas banderas (fáciles) del mundo. Incluye solución.
No hay comentarios