Como personalizar textos con CSS y HTML

Hoy os quiero hablar de diferentes estilos que podemos aplicar al texto de las entradas, son muy sencillos y puede que algunos de vosotros ya los conozcáis, aún así, como he recibido correos preguntando por el efecto de tachado y las tablas, he querido preparar una entrada para hablaros de ello.


Quiero empezar resumiendo la diferencia entre HTML y CSS:

El html es la estructura de nuestro blog/web, mientras que el CSS es el estilo personalizado de los diferentes elementos que la componen. Está muy resumido para que quienes no saben nada al respecto, no se líen, los que ya sepáis usarlo seguro que me echáis la bronca por esquematizarlo tanto.

Pasamos a algunos efectos básicos que podéis aplicar directamente a las entradas.
HTML: las etiquetas usadas son <strike></strike>. Entre ellas situaremos las palabras que queramos que aparezca tachada, siempre en vista HTML.
Ejemplo: 

<strike> efecto texto tachado </strike>

En vista de redacción se vería así:

efecto texto tachado

CSS: son un conjunto de instrucciones de estilo que complementan al HTML de nuestra plantilla y nos dan muchas más posibilidades de personalización.

Las etiquetas usadas para crear un texto tachado son: <span style=”text-decoration:line-through;”> </span>. Entre ellas situaremos las palabras que queramos tachar, siempre en vista HTML.

Ejemplo:

<span style=”text-decoration:line-through;”> efecto texto tachado con CSS </span>

En vista de redacción se vería así:

efecto texto tachado con CSS

Efecto Subrayado

Blogger nos da la posibilidad de usar el subrayado normal desde el escritorio cuando creamos una nueva entrada. Pero con CSS podemos personalizar aún más nuestros subrayados.

Subrayado Superior (Overline):

Las etiquetas usadas son: <span style=”text-decoration:overline;”> </span>.

Ejemplo:

Vista HTML: <span style=”text-decoration:overline;”> Ejemplo de texto con subrayado superior </span>

En vista redacción se vería así:

Ejemplo de texto con subrayado superior

Subrayado Superior e Inferior:

Las etiquetas usadas son: <span style=”text-decoration: underline overline;”></span>

Ejemplo:

Vista HTML: <span style=”text-decoration: underline overline;”> Ejemplo de texto con doble subrayado </span>

En vista redacción se vería así:

Ejemplo de texto con doble subrayado

Subrayado Inferior punteado:

Las etiquetas usadas son: <span style=”border-bottom: 2px dotted black;”></span>

Ejemplo: 

Vista HTML: <span style=”border-bottom: 2px dotted black;”> Ejemplo de texto con subrayado inferior punteado</span>

En vista redacción se vería así:

Ejemplo texto con subrayado inferior punteado

-> Para modificar el color del subrayado, sólo tenemos que sustituir el “black” final por otros colores:

Rosa: pink

Ejemplo texto con subrayado inferior punteado rosa

Azul: blue

Ejemplo texto con subrayado inferior punteado azul

Amarillo: yellow

Ejemplo texto con subrayado inferior punteado amarillo

Verde: green

Ejemplo texto con subrayado inferior punteado verde

Rojo: red

Ejemplo texto con subrayado inferior punteado rojo

Violeta

Ejemplo texto con subrayado inferior punteado violeta

Sombras

CSS: podemos añadir sombras a nuestros textos y darles un efecto de relieve usando las siguientes etiquetas:
<span style=”color: black; text-shadow: black 0.1em 0.1em 0.2em;”></span>

Ejemplo:

Vista HTML: <span style=”color: black; text-shadow: black 0.1em 0.1em 0.2em;”>Prueba</span>

En vista redacción se vería así:

Prueba

–> Podemos cambiar el color de la letra sustituyendo el “color: black” por “color: ” + el color que queramos:

Rosa: color: pink

Prueba Rosa

Azul: color: blue

Prueba Azul

Verde: color: green

Prueba Verde

Y así con todos los colores que vimos en el apartado de subrayado punteado.

–> Podemos cambiar el color de la sombra sustituyendo el “black” que va después de “text-shadow” (sombra del texto) por cualquier otro color:

Naranja: orange

Prueba Sombra Naranja

Además, podemos cambiar ambos valores, por ejemplo la letra a color blanco y la sombra a color negro, con la siguiente etiqueta <span style=”color: white; text-shadow: black 0.1em 0.1em 0.2em;”>Prueba letra blanca y sombra negra</span>

En vista redacción se vería así:

Prueba letra blanca y sombra negra

Y con sombra rosa: <span style=”color: white; text-shadow: pink 0.1em 0.1em 0.2em;”>Prueba letra blanca y sombra rosa</span>

Prueba letra blanca y sombra rosa

Podemos aumentar el tamaño de la letra:

Prueba letra blanca y sombra rosa

Texto Móvil

HTML: Las etiquetas usadas son: <marquee>Texto móvil</marquee> en vista HTML.
Vista Redacción:

Prueba texto móvil

En la próxima entrada sobre programación básica para Bloggers hablaremos de como hacer tablas sencillas y áreas de texto. Espero que el tema de hoy os haya sido útil, ya me contáis. ¿de acuerdo? Si no quieres perderte mi próxima entrada, puedes suscribirte a mis actualizaciones por email para recibir todas las novedades en tu correo.

Un fuerte abrazo,

Celia ♥



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)

Pin It on Pinterest

Share This