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

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

Print Friendly, PDF & Email
¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
Valora esta entrada

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.

Ejercicio html con css
<!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:

Mi chuleta de instrucciones CSS para dar formato al texto
- 75
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.
Mi chuleta de instrucciones css útiles para estilizar table de html
- 16
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Factores que afectan al tiempo de carga de una página web
- 404
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Dimensiones reales de una caja en CSS
- 247
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Ejemplo de centrado horizontal de una caja con CSS
- 593
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 271
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 364
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Maquetar una página de prestashop 1.6 con bootstrap
- 567
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Ejemplo de centrado vertical y horizontal con CSS
- 155
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.