Cómo agregar color a su sitio web en la Raspberry Pi

Su sitio web no será muy atractivo sin algo de color. Puede usar CSS para agregar color a su sitio web en la Raspberry Pi. La forma más rápida de ver cómo funciona CSS es probar un ejemplo. En su archivo main.css, escriba esta línea y luego guárdelo:

h1 {color: rojo; }

Cuando recargas tu página web (presiona F5 en Midori si ya está abierta allí), el texto de tu encabezado h1 ahora es rojo.

Ese simple ejemplo encarna cómo funciona CSS. Empiece por decirle al navegador a qué etiquetas desea aplicar un estilo (la etiqueta h1 en este caso), y luego, entre llaves, enumera las instrucciones de estilo.

Cada instrucción comienza diciendo qué aspecto del estilo debe cambiarse (conocido como propiedad , y en este caso, es el color). Lo siguiente es dos puntos, y luego a qué se debe cambiar el estilo (conocido como el valor , que es rojo en este ejemplo). Finalmente, cada instrucción debe terminar con punto y coma.

Tenga cuidado con la forma en que puntúa su CSS. Incluso en ese breve ejemplo, un par de cosas podrían salir mal. No funcionará si usa corchetes normales (paréntesis) o los corchetes angulares puntiagudos que usa en HTML, así que asegúrese de usar los corchetes.

Preste atención a los dos puntos y al punto y coma también. Necesita obtener los correctos en los lugares adecuados para que funcione. Si algo no funciona bien, ¡la falta de un punto y coma es a menudo el culpable!

También podemos agregar un color de fondo, como este:

h1 {color: rojo;
  color de fondo: amarillo; }

Incluso si eres británico, ¡debes escribir el color al estilo americano en tu CSS!

LEER  Programación en Scratch

Al igual que en HTML, no importa cómo espacie el CSS, pero puede hacerse un favor y facilitar la lectura al incluir algunos espacios en blanco y comenzar una nueva línea para cada instrucción.

Hay varios colores a los que puede hacer referencia por nombre (incluidos negro, blanco, rojo, verde, azul, gris, morado y amarillo), pero además del blanco y negro, son demasiado brillantes y caricaturescos para usar en la mayoría de casos. La mejor forma de especificar colores es dando un número de color, en lugar de un nombre de color.

Eso le permite utilizar una paleta de colores más sutil y le da acceso a colores para los que probablemente ni siquiera haya nombres (a menos que trabaje en una fábrica de pinturas particularmente completa, tal vez). Aquí hay algunos ejemplos de números de colores:

  • # FFFFFF : Blanco

  • # 000000 : negro

  • # FF0000 : rojo

  • # 0000FF : Azul

  • # FFFF00 : Amarillo

  • # 008000 : Verde

Puede que te sorprenda ver letras mezcladas en los números de color, pero eso se debe a que los colores se expresan usando un sistema numérico llamado hexadecimal que va más allá de los números del 0 al 9 y usa las letras A, B, C, D, E y F también.

Cuando cuentas en hexadecimal, vas: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. El 10 representa 16 en nuestro sistema de conteo normal , y 11 representa 17. Estas son las tres cosas que necesita saber sobre hexadecimal:

  • Como en el sistema de conteo normal, los números de la izquierda son más grandes. Por ejemplo, usando nuestro sistema de conteo normal, en el número 39, el 3 tiene un valor más alto que el 9 porque está en la columna de las decenas. En hexadecimal, es lo mismo. En el número hexadecimal 7F, el 7 vale más que el F porque el 7 está en la columna de los 16.

  • El número hexadecimal de dos dígitos más alto es FF.

  • Si está utilizando letras distintas de la A a la F, ha cometido un error.

LEER  Cómo agregar imágenes a su página web en la Raspberry Pi

El número de color de seis dígitos se compone en realidad de tres números pequeños comprimidos, cada uno de los cuales tiene dos dígitos. Esos tres números representan la cantidad de rojo, verde y azul que debe tener el color, tomado de izquierda a derecha.

Entonces el negro es # 000000 porque no hay rojo, verde o azul. El azul es # 0000FF porque no hay rojo ni verde, pero hay la cantidad máxima de azul. El amarillo es # FFFF00 porque el amarillo se hace cuando se mezcla la cantidad máxima de rojo y verde, sin azul.

Puedes mezclar tus propios colores. Para el azul marino, use un poco menos de azul que el azul puro y pruebe el # 000080 . Para un verde lima vivo, tome el número de verde ( # 00800 ) y aumente la cantidad de verde al máximo, dando el número de color # 00FF00 . Puede utilizar cualquier número válido. # 767676 está bien (y una especie de plateado), al igual que # 543ABC (un atractivo tono de púrpura).

No tienes que experimentar demasiado. Hay muchos recursos disponibles en línea para ayudarlo a encontrar colores que puede usar, incluido Colorpicker , que funciona bien en la Raspberry Pi y puede generar una combinación de colores completa a partir del color elegido. El código de color del color elegido se muestra en la parte superior de la pantalla.

Utiliza sus códigos de color en lugar de los nombres de color en su CSS, así:

h1 {color: # FF0000;
  color de fondo: # FFFF00; }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *