Es fácil cambiar el color del texto en su sitio web con HTML

Es fácil cambiar el color del texto en su sitio web con HTML

Es fácil cambiar el color del texto en su sitio web con HTML

VALORACIÓN DEL ARTÍCULO:
5/5


En un momento en que el desarrollo web es más popular que nunca, vale la pena saber cómo doblar el HTML a su voluntad. En este tutorial, aprenderá un truco simple de ese conjunto de habilidades: cambiar el color del texto.

3 maneras de configurar las pantallas de color

Como lenguaje con todas las funciones, HTML le ofrece una variedad de formas de infundirle a su HTML prácticamente cualquier aspecto. Para establecer el color del texto, esta guía cubrirá los tres métodos principales de estilismo.

La primera es alterar directamente la etiqueta que envuelve el texto designado para el cambio de color. Si sólo necesita colorear uno o dos trozos de texto, es probable que sea así como quiera hacerlo.

La segunda es añadir una sección de estilo en la parte superior de su documento HTML. Esto puede ser lo mejor si sus necesidades de estilo son un poco más complicadas, pero aún así restringidas a una sola página HTML.

Por último, está la creación de una hoja de estilo CSS separada y el enlace a ella en el documento HTML. Esto es ideal si tiene necesidades exigentes de color, especialmente aquellas que abarcan múltiples documentos HTML.

3 maneras de especificar colores

En HTML, los colores se pueden especificar de varias maneras, cualquiera de las cuales se puede proporcionar junto con la palabra clave «color» en las siguientes direcciones.

La más simple es usar un nombre de color inglés como «verde» o «cian». Una vez más, si su tarea es lo suficientemente sencilla, esto puede hacer el truco, pero sepa que el vocabulario de HTML a este respecto es limitado.

Otro enfoque es establecer un valor de color RGB, donde se dan tres magnitudes, una para la intensidad del color compuesto de rojo, verde y azul, respectivamente. Si desea ajustar el sombreado en un color estándar, o conocer el valor exacto del tono que desea, esto es para usted.

Por último, puede proporcionar un valor de color hexadecimal, que es un signo de libra separado por un número hexadecimal de seis dígitos. Si quieres ser preciso con tus colores, haz esta ruta.

Programas que necesitará para configurar los colores HTML

El kit de herramientas mínimo para ajustar el color de las palabras en HTML es un programa para editar el propio HTML, y un navegador para probarlo. Puede editar HTML en un editor de texto, un programa simple como el Bloc de notas que escribe texto puro o un editor de código optimizado para procesar la sintaxis de programación. No se puede utilizar un procesador de textos como Microsoft Word, LibreOffice o Google Docs porque estos programas insertan un formato invisible llamado «caracteres de control» que son incompatibles con HTML.

Cualquier navegador web mostrará el archivo HTML que desee examinar. Para comprobar su trabajo, cualquier navegador web lo hará – sólo tiene que ir a la carpeta que contiene su archivo HTML y hacer clic en él, y su navegador debería renderizarlo. Si no es así, haga clic con el botón derecho del ratón sobre el archivo y ábralo explícitamente con su navegador.

Método 1: Envolver el texto en etiquetas con estilo de color

La técnica más sencilla para colorear el texto es añadir el atributo «style» y el valor deseado, compuestos conjuntamente por la palabra clave «color» y la especificación de color (el código hexadecimal, el código RGB o el nombre), a la etiqueta HTML que envuelve el texto de destino. Si desea ajustar el texto que ya está envuelto en una etiqueta, como una etiqueta

, sólo tiene que ir a la etiqueta de apertura e insertar lo siguiente antes del ángulo de cierre (es decir, el signo «menos que»): un espacio, la palabra «estilo» (sin comillas), un signo igual y, a continuación, todo dentro de un conjunto de comillas, la palabra clave «color», dos puntos, espacio y la especificación de color que desee.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Si el texto que está alterando no está encajado entre las etiquetas -quizás sólo quiera ajustar parte del texto que habita en un elemento -simplemente puede envolverlo en una etiqueta y añadir el atributo de estilo con la palabra clave de valor de color y la especificación como se indica arriba.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Método 2: Añadir una sección de estilo en el encabezado del documento HTML

En la sección de su documento HTML (es decir, antes del HTML que muestra el navegador), añada un elemento que incluya una etiqueta HTML o nombres de clase y la configuración de color correspondiente que consista en la palabra clave «color» y la especificación de color.

Los nombres de las etiquetas HTML aquí son los mismos que los especificados dentro de la sección pero sin los corchetes angulares. Por ejemplo, la

especificada en es sólo «p» (no citada). Después de cada etiqueta a estilizar, y un espacio, hay una subsección encerrada por llaves rizadas que contienen la palabra clave «color» y la especificación del color.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Sin embargo, también puede cambiar el estilo de HTML por clase, que es como una etiqueta que puede aplicar para seleccionar instancias de una etiqueta dentro de la sección . Por ejemplo, si sólo desea que una etiqueta en particular sea colorida, puede crear una clase con un nombre personalizado preparado para el período en la sección , con la misma palabra clave de color y especificación que usaría al diseñar una etiqueta, y luego establecer la etiqueta de destino con «class» (sin comillas) como el atributo y ese nombre de clase, sin el punto pero entre comillas, como el valor.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Método 3: Creación y enlace de un documento CSS separado

La manera más organizada de establecer el color del texto y una gama infinita de otros estilos es crear una hoja de estilo CSS separada y enlazarla a ella en la sección del documento HTML. Esto funciona igual que el enfoque de la sección excepto que en lugar de hacer etiquetas y declaraciones de clase dentro de dentro del propio documento HTML, se declara en un documento CSS dedicado. Esto no sólo agrega todos sus estilos en un solo lugar, sino que permite que múltiples documentos HTML incorporen las mismas convenciones de estilo sin duplicación.

Simplemente ponga sus estilos, formateados como lo haría en una sección anidada en la sección de su HTML, en un documento separado con un nombre terminado en «.css». A continuación, añada una etiqueta independiente (se cierra automáticamente, sin ninguna contrapartida dentro del de su documento HTML con un atributo «href» sin comillas cuyo valor adjunto se establece al nombre de su documento CSS, y un atributo «rel» (de nuevo, sin comillas) con un valor «hoja de estilos» (sí, comillas).

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha, y un panel de edición CSS con secciones resaltadas en la parte inferior

Deja un comentario

TAMBIÉN TE INTERESA

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria