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!