Cómo resaltar el texto usando CSS

Cómo resaltar el texto usando CSS
Mientras lee notas o artículos, algunos puntos o terminologías importantes deben revisarse más tarde. Para esto, usamos marcadores para marcar las cosas importantes en lugar de estudiar todo el artículo cada vez. También le da una mirada convincente a esa información. Entonces, para marcar la información en el sitio web, HTML nos ofrece el ""La etiqueta y CSS nos permiten usar diferentes propiedades para resaltar el texto.

El resultado de este blog es:

  • Método 1: resaltar el texto usando la etiqueta HTML
  • Método 2: resaltar el texto usando la etiqueta HTML
  • Método 3: resaltar texto con colores de gradiente CSS

Método 1: resaltar el texto usando la etiqueta HTML

El html ""La etiqueta se utiliza para resaltar o marcar el texto que proporciona información importante. Por defecto, los navegadores renderizan el texto marcado con un color de fondo amarillo.

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

Contenido…

Ejemplo: cómo agregar elemento en html?
En HTML, primero, cree un DIV con el nombre de la clase "caja". Entonces,

se agrega para incluir el encabezado y el

La etiqueta se usa para agregar un párrafo a la página web. Dentro de

elemento, usa el "El elemento para resaltar el texto requerido:


Elemento de marca HTML


El elemento de marca se usa para definir el marcadotexto.


Luego, aplique propiedades CSS a los elementos HTML.

Estilo Box Div

.caja
borde: 5px Solid #9A1663;
Color de fondo: #FDF0E0;
Ancho: 90%;
Altura: 200px;
margen: auto;
relleno: auto;
Text-Align: Center;
tamaño de fuente: 20px;

Aquí, ".caja"Se usa para acceder al elemento Div con el cuadro de clase y aplicar las siguientes propiedades: -

  • "bordeLa propiedad puede tener más de dos valores para especificar el estilo de borde, como el ancho, el tipo de línea y el color.
  • "anchoEl atributo se utiliza para especificar el ancho del elemento.
  • "color de fondoSe utiliza la propiedad para especificar el color del fondo del elemento.
  • "altura"La propiedad define la altura del elemento HTML.
  • "margen"La propiedad define el espacio fuera del elemento.
  • "rellenoLa propiedad define el espacio dentro del elemento.
  • "texto alineadoSe utiliza la propiedad 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 html de estilo
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 HTML Mark.

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

El elemento de marca se usa para definir el marcado texto.

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

Método 2: resaltar el texto usando la etiqueta HTML

El html "El elemento es un elemento en línea utilizado para marcar parte de un documento.

Ejemplo: cómo agregar elemento a HTML?
Primero un

La etiqueta se coloca para agregar un párrafo. Dentro de

Etiqueta, el ""La etiqueta se usa para marcar una parte específica del párrafo. Cada etiqueta de span tiene una identificación como "S1".

Html

Linuxhint es el mejor tutorial en línea sitio web.
Si quieres aprender programación de bash, Entonces estás en el lugar correcto.

Ahora, aplique los estilos CSS a los elementos de tramo anterior.

CSS

#S1
Color de fondo: RGB (235, 247, 6);

El "#S1"Se refiere a la identificación del tramo. Aquí, la propiedad "color de fondo"Con el valor RGB (233, 247, 6) se aplica al elemento SPAN.

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

Método 3: resaltar texto con colores de gradiente CSS

En HTML, agregue un con ID como "principal". Luego, dentro de este elemento div, lugar

Etiqueta para agregar contenido. Dentro del contenido de

Etiqueta, coloque la etiqueta con el nombre de la clase como "destacar". Por último, aplicaremos el CSS "degradado"Propiedad a este área de tramo.

Html


El precio del éxito es trabajo duro y dedicación.


RESPECTO DEL ELEMENTO DE LA CLASE DE ALIMENTO

.destacar
IMAGEN DE BUENGE: Gradiente lineal (a la derecha, #06283D, #8BBCCC, #47B5FF, #256D85);
Border-Radius: 6px;
relleno: 3px 6px;

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

  • ".destacar"Se utiliza para acceder al resaltado de clase del

    elemento.

  • "imagen de fondo"Propiedad como"gradiente lineal"Utiliza los parámetros como dirección, luego dos o más colores.
  • "radio fronterizoLa propiedad se utiliza para hacer la ronda de bordes de los elementos.
  • "relleno"Se usa para proporcionar espacio alrededor del contenido del elemento.

Estilo principal Div

#principal
Margen: 10px Auto;
Ancho: 90%;
Altura: 150px;
borde: 5px Solid #FB2576;
Border-Radius: 10px;
Color de fondo: negro;
relleno: 5px;

Las propiedades CSS descritas a continuación se aplican al elemento DIV con ID como "principal":

  • "#principal"Se refiere a la identificación principal del elemento div Div.
  • "margen"La propiedad aplica espaciado fuera del elemento Div.
  • "anchoLa propiedad se utiliza para establecer el ancho del contenedor.
  • "altura"Establece la altura del contenedor.
  • "borde"Especifica el ancho, el tipo y el color del borde.
  • "radio fronterizo"Se aplica para hacer los bordes de los elementos redondos.
  • "color de fondo"Se usa para aplicar el color al fondo del elemento div.
  • "relleno"Se aplica para dar espacio alrededor del contenido del Div.

Estilo

elemento

#main> P
Color: #fff;
Text-Align: Center;
Font-Family: Sans-Serif;
espaciado de letras: 2px;
relleno: 20px 0;
tamaño de fuente: 2em;

El

El elemento de Div Main se aplica estilos con las propiedades CSS enumeradas:

  • "color"La propiedad especifica el color del texto.
  • "texto alineado"La propiedad aplica la alineación al texto, como el centro, la izquierda y más.
  • "Familia tipográfica"Se utiliza para establecer la familia de fuentes del texto.
  • "espaciado de letras"La propiedad maximiza o minimiza el espacio 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 el texto, HTML y CSS nos facilitan con muchas técnicas. Html "" y "Las etiquetas se utilizan para marcar el texto, pero podemos personalizar el estilo destacado usando CSS. Este blog discutió el procedimiento de resaltar el texto utilizando HTML y los colores de gradiente.