real time web analytics

Cómo resaltar texto usando CSS

Al leer notas o artículos, algunos puntos o terminologías importantes deben revisarse más adelante. Para esto, usamos resaltadores para marcar las cosas importantes en lugar de estudiar todo el artículo cada vez. También le da un aspecto convincente a esa información. Entonces, para marcar la información en el sitio web, HTML nos ofrece el “” y CSS nos permite usar diferentes propiedades para resaltar el texto.

Los resultados de este blog son:

Método 1: resaltar texto usando la etiqueta HTML

El HTML “La etiqueta ” se utiliza para resaltar o marcar texto que proporciona información importante. De forma predeterminada, los navegadores representan el texto marcado con un color de fondo amarillo.

Sintaxis
La sintaxis de usar el “El elemento HTML se menciona a continuación:

Ejemplo: ¿Cómo agregar el elemento en HTML?
En HTML, primero, cree un div con el nombre de clase “caja”. Luego, se agrega

para incluir el encabezado y la etiqueta

se usa para agregar un párrafo a la página web. Dentro del elemento

, use el “” elemento para resaltar el texto requerido:

división clase=“caja”>
h1>Elemento de marca HTML/h1>
pag>El elemento marca se utiliza para definir lo marcado/marcar>texto./pag>
/división>

Luego, aplique las propiedades CSS a los elementos HTML.

caja de estilo div

.caja {
frontera: 5px sólido #9A1663;
antecedentes-color: #FDF0E0;
ancho: 90%;
altura: 200 píxeles;
margen: automático;
acolchado: automático;
texto-alinear: centro;
fuente-Talla: 20 píxeles;
}

Aquí, “.caja” se utiliza para acceder al elemento div con el cuadro de clase y aplicar las siguientes propiedades: –

  • fronteraLa propiedad ” puede tener más de dos valores para especificar el estilo del borde, como el ancho, el tipo de línea y el color.
  • anchoEl atributo ” se utiliza para especificar el ancho del elemento.
  • color de fondoLa propiedad ” se utiliza para especificar el color del fondo del elemento.
  • alturaLa propiedad ” define la altura del elemento HTML.
  • margenLa propiedad ” define el espacio fuera del elemento.
  • rellenoLa propiedad ” define el espacio dentro del elemento.
  • texto alineadoLa propiedad ” se utiliza para ajustar la alineación del texto.
  • tamaño de fuente” especifica el tamaño de las fuentes.

El código proporcionado anteriormente generará el siguiente resultado:

También podemos aplicar diferentes estilos al elemento con CSS.

Elemento de estilo HTML
Por defecto, el “La etiqueta ” muestra un color amarillo. Pero con la ayuda de CSS, puede aplicar diferentes propiedades para cambiar el estilo del elemento de marca HTML.

En este ejemplo, hemos utilizado CSS en línea para diseñar la etiqueta HTML :

pag>El elemento de marca se utiliza para definir la estilo= “color: blanco; color de fondo: #FF5858;”>marcado/marcar> texto.

Se puede observar que ahora el texto se resalta usando el color rojo:

Método 2: resaltar texto usando la etiqueta HTML

El HTML “El elemento ” es un elemento en línea utilizado para marcar alguna parte de un documento.

Ejemplo: ¿Cómo agregar el elemento a HTML?
Primero, se coloca una etiqueta

para agregar un párrafo. Dentro de la etiqueta

, el “La etiqueta ” se usa para marcar una parte específica del párrafo. A cada etiqueta de intervalo se le asigna una identificación como “s1”.

HTML

pag>Linuxhint es el mejordurar identificación=“s1”> tutoría en línea/durar> sitio web.
si quieres aprender durar identificación=“s1”> programación bash/durar>, entonces estás en el lugar correcto./pag>

Ahora, aplique estilos CSS a los elementos de intervalo anteriores.

CSS

#s1 {
color de fondo: RGB(235, 247, 6);
}

Él “#s1” se refiere a la identificación de tramo. Aquí, la propiedad “color de fondo” con el valor rgb(233, 247, 6) se aplica al elemento span.

Se puede observar en la salida que el texto dentro del elemento span está marcado con el color especificado:

Método 3: resaltar texto usando colores degradados CSS

En HTML, agregue un

con id como “principal”. Luego, dentro de este elemento div, coloque la etiqueta

para agregar contenido. Dentro del contenido de la etiqueta

, coloque la etiqueta con el nombre de la clase como “destacar”. Por último, aplicaremos el CSS “degradado” propiedad a esta área de tramo.

HTML

<división identificación=“principal”>

<pag>El precio del éxito es <durar clase=“destacar”>trabajo duro</durar> y dedicación.</pag>
</división>

Resaltado de la clase de estilo del elemento

.destacar {
imagen de fondo: degradado lineal(a la derecha, #06283D, #8BBCCC, #47B5FF, #256D85);
borde-radio: 6px;
relleno: 3px 6px;
}

La descripción de las propiedades CSS anteriores se proporciona a continuación:

  • .destacar” se utiliza para acceder al punto culminante de la clase del

    elemento.

  • imagen de fondo” propiedad como “gradiente lineal” usa los parámetros como dirección, luego dos o más colores.
  • borde-radioLa propiedad ” se utiliza para hacer que los bordes de los elementos sean redondos.
  • relleno” se utiliza para proporcionar espacio alrededor del contenido del elemento.

Div principal de estilo

#principal {
margen: 10px automático;
ancho: 90%;
altura: 150 píxeles;
frontera: 5px sólido #FB2576;
borde-radio: 10px;
antecedentes-color: negro;
relleno: 5px;
}

Las propiedades CSS descritas a continuación se aplican al elemento div con id como “principal”:

  • #principal” se refiere al id principal del elemento div.
  • margenLa propiedad ” aplica espaciado fuera del elemento div.
  • anchoLa propiedad ” se utiliza para establecer el ancho del contenedor.
  • altura” establece la altura del contenedor.
  • frontera” especifica el ancho, el tipo y el color del borde.
  • borde-radio” se aplica para redondear los bordes de los elementos.
  • color de fondo” se utiliza para aplicar color al fondo del elemento div.
  • relleno” se aplica para dar espacio alrededor del contenido del div.

Elemento de estilo

#principal>p {

color: #fff;
texto-alinear: centro;
familia tipográfica: sans-serif;
espaciado entre letras: 2px;
relleno: 20px 0;
fuente-Talla: 2em;

}

El elemento

de div main se aplica estilos con las propiedades CSS enumeradas:

  • colorLa propiedad ” especifica el color del texto.
  • texto alineadoLa propiedad ” aplica alineación al texto, como centro, izquierda y más.
  • Familia tipográfica” se utiliza para establecer la familia de fuentes del texto.
  • espaciado de letrasLa propiedad ” maximiza o minimiza el espaciado entre los caracteres del texto.
  • relleno” representa el espacio alrededor del contenido de un elemento.
  • tamaño de fuente” indica el tamaño de la fuente.

Después de guardar el código anterior, la página web en nuestro navegador web se verá así:

Hemos discutido algunos métodos para resaltar el texto usando CSS.

Conclusión

Para resaltar texto, HTML y CSS nos facilitan muchas técnicas. HTML “” y “Las etiquetas ” se usan para marcar el texto, pero podemos personalizar el estilo de resaltado usando CSS. Este blog discutió el procedimiento de resaltar texto usando HTML , y colores degradados.

Leave a Comment