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

Su sitio web no será muy atractivo y sin un poco de color. Se puede utilizar 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 probar un ejemplo. En el archivo de 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 ya está abierta allí), el texto de su h1 rúbrica es ahora de color rojo.

Video: Cómo crear tu propia página web usando HTML : Cómo agregar color de fondo a una página web

Que encarna ejemplo sencillo de cómo funciona CSS. Se empieza por decirle al navegador que etiqueta que desea aplicar un estilo a (la h1 etiqueta en este caso), y luego entre llaves, cuando indica 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). El siguiente es un 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 jalonan su CSS. Incluso en ese corto ejemplo, un par de cosas podrían ir mal. No funcionará si utiliza soportes curvos normales (entre paréntesis), o los paréntesis angulares puntiagudos que se utilizan en HTML, por lo que asegúrese de usar las llaves.

Prestar atención a los dos puntos y el punto y coma demasiado. Que necesita para obtener las correctas 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, que necesita para deletrear color el estilo americano en su CSS!

Al igual que en HTML, no importa cómo espaciar sus CSS, pero se puede hacer usted mismo un favor y hacer que sea más fácil de leer mediante la inclusión de algún espacio en blanco y comenzar 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, púrpura 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.

Entonces, para usar una paleta de colores más sutiles y le da acceso a los colores para los que probablemente ni siquiera son nombres (a menos que trabaje en una fábrica de pintura sobre todo integral, tal vez). Aquí están algunos números de color ejemplo:

• #FFFFFF: Blanco

• #000000: Negro

• #FF0000: rojo

• #0000FF: Azul

• #FFFF00: Amarillo

• #008000: Verde

Puede que se sorprenda al ver las letras mezcladas en los números de color, pero eso es porque los colores se expresan utilizando 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 se cuenta en hexadecimal, que vaya: 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 normales y 11 representa 17. Estas son las tres cosas que hay que saber sobre hexadecimal:

Video: Tutorial #11 CSS y HTML - Color de fondo + Imagen de fondo

• Al igual que en el sistema de conteo normal, números de la izquierda son más grandes. Por ejemplo, utilizando nuestro sistema de conteo normal, 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 vale más 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.

  Video: HTML color -2- crear una pagina web con el bloc de notas HTML

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

El número de color de seis dígitos se compone realmente de tres números pequeños aplastados juntos, siendo dos dígitos cada uno. Esos 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.

Se 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 verde lima vivo, tome el número de verde (# 00800) Y la bomba hasta la cantidad de verde al máximo, dando el número del color # 00FF00. Se puede utilizar 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. Una gran cantidad de recursos están disponibles en línea para ayudarle a encontrar los colores que se pueden utilizar, incluyendo Selector de color, que funciona bien en la Frambuesa Pi y puede generar un esquema de color entero de su color elegido. El código de color para el color elegido se muestra en la parte superior de la pantalla.

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

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