¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.

02 Mar ¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.

Posted at 07:30h in Ejercicios CSS, Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. by Francesc Ricart 0 Comments

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!

Entradas relacionadas:

Ejemplo de efecto parallax mediante propiedades de background
Como generar un parallax en una página web. Incluye ejemplo.

Como terminar la última línea con puntos suspensivos "..." en CSS
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."

Ejercicio diferencia entre centrado de texto y de cajas en css
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.

¿Cuáles serán las dimensiones reales de las cajas css?
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.

Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS
::before y ::after tienen muchos usos interesantes para dar estilos en nuestros documentos web. Este conocimiento te puede ayudar por ejemplo a estilizar listas html

Sintaxis CSS básica. Cómo se escribe el CSS.
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.

Francesc Ricart

hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi