Cambiar el color de una palabra en una cadena de texto en HTML
- Cambiar el color de una palabra en una cadena de texto en HTML
- Cambiar el color de una palabra en una cadena de texto en HTML usando CSS interno
- Cambiar el color de una palabra en una cadena de texto en HTML usando JavaScript
El tema principal de este artículo es utilizar CSS para resaltar o cambiar el color de cualquier palabra en particular en un texto. Repasaremos varias técnicas para implementar esta característica.
Aprenderemos a colorear un texto usando CSS interno y en línea. Más adelante, veremos cómo usar JavaScript para implementar la misma funcionalidad.
Cambiar el color de una palabra en una cadena de texto en HTML
Comúnmente vemos en los sitios web que una sola palabra en un texto tiene un color diferente a las demás; por supuesto, capta la atención de los usuarios. Analicemos cómo podemos hacer lo mismo en nuestras páginas web.
En las versiones anteriores de HTML, teníamos una etiqueta <font> que se puede usar para implementar esta función de esta manera:
<font color="red">Red</font>
Pero la etiqueta se elimina en HTML5 y ya no se admite. Entonces, aprenderemos sobre una etiqueta HTML <span> para ayudarnos a hacer la tarea.
El elemento <span> es un contenedor en línea para marcar una sección de un texto o una sección de una página. El atributo id o clase de la etiqueta <span> permite un estilo simple con CSS y modificaciones con JavaScript.
La etiqueta <span> también nos permite aplicar un estilo en línea, similar al elemento div. Sin embargo, <span> es un elemento en línea, mientras que div es un elemento a nivel de bloque.
Consulte el siguiente ejemplo para entender esto.
<html>
<body>
<p>Hello, I am
<span style="color: red">Red</span>
</p>
</body>
</html>
La propiedad color de CSS le da al texto un color específico. Hay muchas formas de especificar el color requerido; en el ejemplo anterior, seleccionamos el color por su nombre.
HTML puede reconocer 16 nombres de colores que son negro, blanco, gris, plateado, granate, rojo, morado, fucsia, verde, lima, verde oliva, amarillo, azul marino, azul, verde azulado y aguamarina. Los nuevos navegadores pueden reconocer 140 nombres de colores CSS.
Puede comprobar todos los nombres de colores reconocidos por HTML desde aquí. Como mencionamos, existen muchas otras formas de especificar el color requerido.
Echemos un vistazo a los diferentes métodos.
Colores RGB
RGB significa rojo, verde, azul. Utiliza un esquema de color aditivo en el que los tres colores primarios, rojo, verde y azul, se combinan para crear cada color.
Los parámetros rojo, verde y azul tienen cada uno un valor entre 0 y 255 que describe la intensidad del color. Esto indica que hay 256 x 256 x 256 = 16 777 216 colores distintos.
Por ejemplo, rgb(255, 0, 0) se vuelve rojo porque el color rojo se establece en su valor máximo, 255, mientras que los otros dos colores, verde y azul, se establecen en 0. Establezca todos los parámetros de color en cero. como este rgb(0,0,0) para mostrar negro.
Puede ver el valor RGB de diferentes colores desde aquí.
<html>
<body>
<p>Hello, I am
<span style="color: rgb(241, 196, 15 )">Yellow</span>
</p>
</body>
</html>
Colores RGBA
Los colores RGBA son una extensión de los colores RGB, incluido un canal alfa que determina la opacidad de un color. La sintaxis para un valor de color RGBA es:
rgba (red, green, blue, alpha)
El valor del parámetro alfa varía de 0,0 (transparencia total) a 1,0 (visibilidad total). También puede usar esta propiedad para los colores de fondo, ya que a veces necesitamos diferentes colores de fondo con varias opacidades.
colores hexadecimales
Los colores hexadecimales utilizan valores hexadecimales para representar colores de diferentes modelos de color. Los colores hexadecimales están representados por el #RRGGBB, donde RR significa rojo, GG verde y BB azul.
Los enteros hexadecimales que especifican la intensidad del color pueden ir desde 00 hasta FF; un ejemplo sencillo es #0000FF. Debido a que el componente azul está en su valor más alto de FF, mientras que las partes roja y verde están en su valor más bajo de 00, el color es completamente azul.
Puede ver el valor hexadecimal de diferentes colores desde aquí.
<html>
<body>
<p>Hello, I am
<span style="color: #0000FF">Blue</span>
</p>
</body>
</html>
Colores HSL
HSL es un acrónimo que significa Tono, Saturación y Luminosidad. Echemos un vistazo más profundo a cada término.
- Matiz: el matiz varía de 0 a 360 grados en la rueda de colores. rojo es 0; el amarillo es 60; el verde es 120; azul es 240, etc.
- Saturación: esta cantidad se mide como un porcentaje; 100 % indica saturación total (es decir, sin sombras de gris), 50 % indica 50 % gris pero con color aún visible y 0 % indica totalmente insaturado (es decir, completamente gris y color invisible).
- Luminosidad: Esto también es un porcentaje: 0% es negro y 100% es blanco. La cantidad de luz que deseamos dar a un color se expresa en porcentaje, siendo 0% negro (donde no hay luz), 50% representando ni oscuro ni claro, y 100% representando blanco (total luminosidad).
La sintaxis de los valores de color HSL es:
hsl(hue, saturation, lightness)
Puede ver el valor HSL de diferentes colores desde aquí.
<html>
<body>
<p>Hello, I am
<span style="color: hsl(23, 97%, 50% )">Orange</span>
</p>
</body>
</html>
Colores HSLA
Los colores HSLA son una extensión de HSL con un canal alfa que especifica la opacidad de un color. Un valor de color HSLA se determina con:
hsla(hue, saturation, lightness, alpha)
El valor del parámetro alfa es un número que tiene un rango estrictamente entre 0,0, que significa totalmente transparente, y 1,0, que significa no transparente.
Cambiar el color de una palabra en una cadena de texto en HTML usando CSS interno
Hemos visto en detalle todos los métodos para dar color en CSS. Hemos estado usando CSS en línea para todo hasta este momento.
Sin embargo, CSS en línea no es un método sugerido porque solo está vinculado al elemento. Debemos reescribir mucho si queremos la misma funcionalidad en diferentes regiones de página.
Así que coloreemos nuestro texto usando CSS interno, definido en la etiqueta HTML <head> dentro de una etiqueta <style>.
<html>
<head>
<title>CSS Color Property</title>
<style>
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1>
Hello this is <span id="built">Built-in color</span> format.
</h1>
<h1>
Hello this is <span id="rgb">RGB</span> format.
</h1>
<h1>
Hello this is <span id="rgba">RGBA</span> format.
</h1>
<h1>
Hello this is <span id="hex">Hexadecimal</span> format.
</h1>
<h1>
Hello this is <span id="hsl">HSL</span> format.
</h1>
<h1>
Hello this is <span id="hsla">HSLA</span> format.
</h1>
</body>
</html>
Cambiar el color de una palabra en una cadena de texto en HTML usando JavaScript
Podemos cambiar el color de una palabra específica en una oración usando JavaScript. Necesitamos dar una ID a nuestra etiqueta <span> y luego obtener ese elemento de JavaScript usando document.getElementById(ID-name) y llamar a la propiedad style en él. Así es cómo.
<html>
<body onload="myFunction()">
<p>Hello, I am <span id="color-text">Magenta.</span></p>
<script>
function myFunction() {
document.getElementById("color-text").style.color = "magenta";
}
</script>
</body>
</html>