Un sitio web o una aplicación coloridos son más atractivos que un sitio web en blanco y negro. En este artículo, repasaremos las diferentes formas de aplicar colores en documentos HTML. Al igual que otras etiquetas HTML, no existe una etiqueta especial para aplicar colores en documentos HTML. Sin embargo, utilizando el atributo de estilo , puede hacer que un elemento en particular sea colorido y atractivo. También discutiremos los métodos de codificación de colores que lo ayudarán a aplicar el mismo color usando diferentes métodos.
Hay dos propiedades principales en el atributo de estilo para establecer el color del texto y el fondo del bloque.
- Color: Se utiliza para establecer el color del cuerpo del texto.
- Color de fondo: se utiliza para establecer el color de fondo de la página web, bloque o elemento en particular.
Ejemplo 1: podemos usar el atributo de texto para establecer el color del texto y bg-color para establecer el color de fondo.
HTML
<!DOCTYPE html> <html> <head> <title>Set the text color</title> </head> <body> <h1 style="color:green"> hello! Welcome to GFG </h1> <h2 style="color:Red"> hello! Welcome to GFG </h2> <h3 style="background-color:Blue"> hello! Welcome to GFG </h3> <h3 style="background-color:Blue; color:red"> hello! Welcome to GFG </h3> </body> </html>
Producción:
Además, para establecer el color del texto vinculado, el atributo de estilo tiene 3 propiedades diferentes.
- alink : Se utiliza para establecer colores para los enlaces activos.
- vlink : se utiliza para establecer colores para los enlaces visitados.
- link : Se utiliza para establecer colores para el texto vinculado.
Diferentes métodos de codificación de colores en HTML: existen principalmente tres métodos diferentes de codificación de colores disponibles en el lenguaje HTML. La notación hexadecimal y RGB son los métodos más populares. Sin embargo, algunos desarrolladores también utilizan la notación de nombre de color y la notación HSL .
Colores HTML:
Ejemplo 2: Usamos el nombre del color para establecer el color del texto, enlace o fondo. En Internet, encontrarás más de 200 colores con su nombre. Tenemos una lista de 16 colores estándar W3C.
HTML
<!DOCTYPE html> <html> <body> <h1> Welcome to GFG </h1> <table> <tr> <td> <p style="color:black"> Black </p> </td> <td> <p style="color:yellow"> Yellow </p> </td> <td> <p style="color:red"> Red </p> </td> <td> <p style="color:blue"> Blue</p> </td> </tr> <tr> <td> <p style="color:maroon"> Maroon </p> </td> <td> <p style="color:gray"> Gray </p> </td> <td> <p style="color:Lime"> Lime </p> </td> <td> <p style="color:green"> Green </p> </td> </tr> <tr> <td> <p style="color:olive"> Olive </p> </td> <td> <p style="color:silver"> Silver </p> </td> <td> <p style="color:Aqua"> Aqua </p> </td> <td> <p style="color:navy"> Navy </p> </td> </tr> <tr> <td> <p style="color:white"> White </p> </td> <td> <p style="color:teal"> Teal </p> </td> <td> <p style="color:purple"> Purple </p> </td> <td> <p style="color:fuchsia"> Fuchsia </p> </td> </tr> </table> </body> </html>
Producción:
Colores HTML Notación hexadecimal: en lugar de escribir nombres de colores, escribiremos los códigos hexadecimales para establecer el color en particular. Hay un código hexadecimal único disponible para cada color. El código hexadecimal es una string de 6 caracteres seguida del signo #. Incluye valores del 0 al 9 y de la A a la Z.
<h1 style="color:#00000"> hello Geeks </h1>
Notación RGB de colores HTML: RGB significa rojo, verde y azul. Toma tres valores enteros entre 0 y 255 para cada uno de los tres colores. Al cambiar los valores de las tres entradas, puede producir los nuevos colores que necesita.
<h1 style="color:rgb(70,130,180)"> Hello Geeks </h1>
HTML colorea la notación HSL: los desarrolladores de HTML rara vez utilizan la notación HSL. HSL se conoce como Tono, Saturación y Luminosidad. Para el matiz, debemos establecer un valor en grados entre 0 y 360. Para la saturación y la luminosidad, debemos establecer valores en porcentaje entre 0% y 100%.
<h1 style = "color : hsl(127, 57%, 47%)"> Hello Geeks </h1>
Diferentes formas de aplicar el color : el método más preferible para establecer el color dentro del documento HTML es usar la hoja de estilo. Si es necesario, podemos usar CSS en línea o CSS interno. Veremos cada método uno por uno.
CSS en línea: como sugiere el nombre, debemos agregar un atributo de estilo dentro de cualquier etiqueta HTML. Dentro del atributo de estilo , podemos agregar propiedades de color y su valor.
<h1 style="color:green"> Welcome to GFG </h1>
CSS interno: tenemos que agregar propiedades de color dentro del archivo HTML pero no dentro de la etiqueta HTML.
Código HTML: El siguiente código tiene código CSS interno.
HTML
<html>
<head>
<style>
p {
color: Green;
}
</style>
</head>
<body>
<p> hello Geeks </p>
</body>
</html>
CSS externo: este método es el mismo que el método CSS interno pero tenemos que agregar CSS en el archivo externo.
Código HTML:
HTML
<html> <head> <link rel="stylesheet" type="text/css" href="color.css"> </head> <body> <p> hello Geeks </p> </body> </html>
color.css: el siguiente código se usa en el código HTML anterior.
p {
color : Green;
}
Conclusión: los usuarios pueden crear una aplicación colorida utilizando los diferentes métodos de codificación de colores. Recomendamos usar el nombre del color y la notación hexadecimal porque algunos navegadores no admiten la notación RGB y HSL. Para elegir un código hexadecimal o un valor RGB, puede usar un selector de color que encuentre en Internet.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA