Cómo agregar color a su sitio web en la pi de frambuesa

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

h1 {color: rojo-}

Al volver a cargar la página web (presione F5 en Midori si es ya abierto allí), el texto de su h1 partida es ahora de color rojo.

Así de simple ejemplo encarna cómo funciona CSS. Usted comienza diciendo al navegador que etiqueta que desea aplicar un estilo a (el h1 etiqueta en este caso), y luego entre llaves, usted anota las instrucciones de estilo.

Cada instrucción comienza diciendo qué aspecto del estilo debe ser cambiado (conocido como el propiedad, y en este caso, es el color). Siguiente es una de colon, y luego lo que el estilo debe ser cambiado a (conocido como el valor, cual es rojo en este ejemplo). Por último, cada instrucción debe terminar con un punto y coma.

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

Preste atención a los dos puntos y el punto y coma demasiado. Usted necesita obtener los correctos en los lugares correctos para que funcione. Si algo no está funcionando bien, un punto y coma que falta es a menudo el culpable!

Podemos añadir un color de fondo, también, como esto:

h1 {color: red-background-color: amarillo-}

Incluso si usted es un británico, es necesario deletrear color el estilo americano en su CSS!

Al igual que en HTML, no importa cómo espaciar su CSS, pero usted puede hacer usted mismo un favor y hacer que sea más fácil de leer mediante la inclusión de un espacio en blanco y empezar una nueva línea para cada instrucción.

Hay un número de colores que puede hacer referencia por su nombre (incluyendo negro, blanco, rojo, verde, azul, gris, morado y amarillo), pero aparte de blanco y negro, son demasiado brillantes y dibujos animados para su uso en la mayoría casos. La mejor manera de especificar los colores es dando un número de color, en lugar de un nombre de color.

Eso te permite utilizar una paleta de colores más sutiles y le da acceso a los colores para los que probablemente ni siquiera son los nombres (a menos que usted trabaja en una fábrica especial integral de pintura, tal vez). Aquí hay algunos números ejemplo de color:

• #FFFFFF: Color blanco

• #000000: Negro

• #FF0000: rojo

• #0000FF: Azul

• #FFFF00: Amarillo

• #008000: Verde

Puede que se sorprenda de ver las letras mezcladas en los números de color, pero eso es porque los colores se expresan mediante un sistema de número llamado hexadecimal que va más allá de los números 0 a 9 y utiliza las letras A, B, C, D, E, y F también.

Cuando usted cuenta en hexadecimal, van: 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 de y 11 representa 17. Estas son las tres cosas que usted necesita saber sobre hexadecimal:

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

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

• Si usted está utilizando todas las cartas que no sean la A a la F, que has cometido un error.

El número de color de seis dígitos está en realidad formada por tres números pequeños aplastados juntos, cada uno de ellos dos dígitos. Estos tres números representan la cantidad de rojo, verde y azul que debería estar en el color, tomada de izquierda a derecha.

Así es negro # 000000 porque no hay rojo, verde, o azul. El azul es # 0000FF porque no hay rojo o verde, pero no 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 ningún tipo de azul.

Usted puede mezclar sus propios colores. Para el azul marino, sólo tiene que utilizar un poco menos azul que azul puro y tratar # 000080. Para vívido verde lima, tome el número para el verde (# 00800) Y darle vida a la cantidad de verde al máximo, dando el número del color # 00FF00. Usted puede usar cualquier número válido. # 767676 está bien (y una especie de plata), y también lo es # 543ABC (ir a buscar un tono de color púrpura).

Usted no tiene que experimentar demasiado. Un montón de recursos están disponibles en línea para ayudarle a encontrar los colores que se pueden utilizar, incluyendo Colorpicker, que funciona bien en la Raspberry Pi y puede generar un esquema de color entero de su color elegido. El código de colores para su color seleccionado se muestra en la parte superior de la pantalla.

Utiliza tus códigos de color en lugar de los nombres de los colores en tu CSS, como este:

h1 {color: # FF0000-background-color: # FFFF00-}