Lägga till färg till din webbplats på Raspberry Pi

June 3

Din webbplats wonâ € t vara mycket tilltalande utan lite färg. Du kan använda CSS för att lägga till färg till din webbplats på Raspberry Pi. Det snabbaste sättet att se hur CSS fungerar är att prova ett exempel. I ditt main.css fil, skriver denna linje och sedan spara den:

h1 {color: red; }

När du laddar din webbsida (tryck på F5 i Midori om itâ € s redan är öppen där), är texten i din h1 rubrik nu rött.

Det enkla exemplet förkroppsligar hur CSS fungerar. Du börjar med att berätta webbläsaren vilka taggar du vill använda en stil till (h1 tagg i detta fall), och sedan i klamrar, lista du stilen instruktionerna.

Varje instruktion börjar med att säga vilken aspekt av stilen bör ändras (sk fastigheten, och i detta fall, itâ € s färg). Nästa är ett kolon, och sedan vad den stilen bör ändras till (känd som värdet, vilket är röd i detta exempel). Slutligen måste varje instruktion avslutas med ett semikolon.

Var försiktig med hur du punktera din CSS. Även i det korta exempel kan ett par saker går fel. Det wonâ € t arbete om du använder vanliga böjda fästen (parentes), eller de spetsiga vinkeljärnen som du använder i HTML, så se till att du använder klamrarna.

Var uppmärksam på kolon och semikolon för. Du måste få de rätta på rätt ställen för att det ska fungera. Om somethingâ € inte jobbar rätt, är en saknad semikolon ofta den skyldige!

Vi kan lägga till en bakgrundsfärg, också, som den här:

h1 {color: red;
bakgrundsfärg: gul; }

Även om du € re en Brit, måste du stava färga det amerikanska sättet i din CSS!

Liksom i HTML, doesnâ det € t roll hur du utrymme ut din CSS, men du kan göra dig själv en tjänst och göra det lättare att läsa genom att inkludera vissa vitt utrymme och starta en ny rad för varje instruktion.

Det finns ett antal färger som du kan referera efter namn (inklusive svart, vit, röd, grön, blå, grå, lila och gul), men andra än svart och vitt, theyâ € re för ljust och cartoonish för användning i de flesta fall. Det bästa sättet att ange färger är genom att ge ett färgnummer, i stället för ett färgnamn.

Det gör att du kan använda en mer subtil färgpalett och ger dig tillgång till färger som det förmodligen arenâ € t ens namnen (om du jobbar på en särskilt omfattande färgfabrik, kanske). Här är några exempel färgnummer:

  • # FFFFFF: Vit
  • # 000000: Svart
  • # FF0000: Röd
  • # 0000FF: Blå
  • # FFFF00: Gul
  • # 008000: Grön

Du kanske blir förvånad över att se bokstäver blandade upp i färgnummer, men att? € s eftersom färgerna uttrycks med hjälp av ett antal system som kallas hexadecimal som går utöver siffrorna 0 till 9 och använder bokstäverna A, B, C, D, E och F för.

När man räknar i hexadecimal, går du: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. 10 utgör 16 i vår normala räknesystem och 11 representerar 17. Här är de tre saker du behöver veta om hexadecimal:

  • Liksom i det normala räknesystem, numren till vänster är större. Till exempel genom att använda vår normala räknesystem, i antalet 39, har 3 ett högre värde än 9 eftersom itâ € s i tiotals kolumnen. I hexadecimal, itâ € s detsamma. I hexadecimalt tal 7F är 7 värd mer än F eftersom 7 är i 16s kolumnen.
  • Den högsta tvåsiffrigt hexadecimalt tal är FF.
  • Om du € re använder några andra än A till F bokstäver, youâ € ve gjort ett misstag.

Den sexsiffriga färgnummer är faktiskt består av tre små siffror kläm ihop, var och en är två siffror. Dessa tre siffror representerar mängden rött, grönt och blått som bör finnas i den färg, tagen från vänster till höger.

Så svart är # 000000 för det finns ingen röd, grön eller blå. Blått är # 0000FF eftersom thereâ € s ingen röd eller grön, men thereâ € s den maximala mängden blått. Gult är # FFFF00 eftersom gult görs när man blandar den maximala mängden rött och grönt, utan blå.

Du kan blanda upp dina egna färger. För marinblått, bara använda lite mindre blå än rent blå och försök # 000080. För levande limegrön, ta nummer för grönt (# 00800) och pumpa upp mängden grönt till max, vilket ger färgnummer # 00FF00. Du kan använda alla giltiga nummer. # 767.676 är okej (och ett slags silver), och så är # 543ABC (en hämtning nyans av lila).

Du donâ € t måste experimentera för mycket. Massor av resurser finns tillgängliga online för att hjälpa dig att hitta färger som du kan använda, inklusive ColorPicker, vilket fungerar bra på Raspberry Pi och kan generera en hel färgskala från din valda färg. Färgkoden för din valda färgen visas längst upp på skärmen.

Du använder din färgkoder i stället för de färgnamn i din CSS, så här:

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