Saltar al contenido

Resaltado de Textos dentro de párrafos

11/03/2019
Resaltado, remarcado de Textos en Orbital Theme
Índice de Contenido

La siguiente solución te ayudará a remarcar extractos del texto dentro de párrafos. Estoy seguro que te gustará.

El como resaltar los textos lo puedes decidir tu mismo, simplemente hace falta configurar ciertos parámetros, que te voy a explicar.

Iniciamos en el párrafo y concretamente en la porción de texto que deseemos darle resalte.

Deberás editar el párrafo como html, e introducir el siguiente código, no olvides revisar el video para tenerlo más claro.

<span class=»resalta»>Texto que desees resaltar</span>

Aquí, lo importante es respetar la estructura del código me refiero a que no olvides, abrir y cerrar <> «» y </>, sino recibirás un error.

Esta es la mitad del proceso, ahora nos dirigimos a Apariencia/Personalizar/Css Adicional, ya hemos especificado a que sección daremos estilo ahora decidiremos QUÉ estilo darle.

.resalta{
font-family:arial;
font-weight:bolder;
font-size:.9rem;
text-decoration:underline;
background-color:black;
color:white;
}

Comparto contigo algunas opciones para darle el estilo que tú desees, por ejemplo sí, deseas agregar un color al fondo.

.resalta{
background-color:black; /*ColorFondo*/
color:white; /*ColorFuente*/
}

¿Te ha parecido sencillo? bueno he recolectado algunos estilos que te servirán para personalizarlo a tu gusto:

Códigos CSS para Resaltado de Texto 2024

Iré aumentando con el tiempo la cantidad de opciones, visítame a menudo para que estés al tanto.

Código de Colores para Orbital Theme

Estos son los nombres de los colores genéricos, úsalos para fondos, color de fuente o cualquier comando que desees colorear.

Red

Gray

Orange

Pink

DodgerBlue

Purple

Green

LightGray

Intentaré implementar una rueda de color para que puedan elegir a su gusto, hasta mientras espero sirva los colores mencionados antes.

Código CSS para Modificar el Orbital Theme 2024

Color del Texto

color:red;
color:#ffd600;

Color de Fondo

background-color:red;
background-color:#ffd600;

Decoración del Texto

text-decoration: none; /*sinDecoracion*/

text-decoration: overline; /*lineaSuperior*/

text-decoration: line-through;
/*tachado*/

text-decoration: underline;
/*subrayado*/

Alineación del Texto

text-align: center; /*centro*/
text-align: left; /*izquierda*/
text-align: right; /*derecha*/

Transformación de Texto

text-transform: uppercase;

text-transform: lowercase;

text-transform: capitalize;

Espaciado Letras

letter-spacing: 3px;
letter-spacing: -3px;

Altura Interlineado

line-height: 0.8;
line-height: 1.8;

Estilo Fuente

font-style: normal;
font-style: italic;
font-style: oblique;

Familia de la Fuente

font-family: «Times New Roman», Times, serif;

font-family: «Arial Black», sans-serif;

Tamaño de Fuente

font-size: 16px;
font-size: 1rem;
font-size: 1rem;

Peso de la Fuente

font-weight: normal;
font-weight: 100;
font-weight: 900;
font-weight: bold;

Espero toda esta información te sea de utilidad, no te olvides de comentarme que te ha parecido la solución y que otros cambios te gustaría realizar.

Christian E. Muñoz

Me gustan las computadoras, el Marketing, Internet y nuevas tecnologías.
¡Vamos lo que se llama un geek!

Modificar Tamaño de Títulos TUTORIAL Español

Modificar el Tamaño de Títulos Tutorial

0/5 (0 Reviews)