Hvordan legge til farge til nettstedet ditt på Raspberry Pi

April 25  by Eliza

Ditt nettsted wonâ € ™ t være svært attraktivt uten noen farge. Du kan bruke CSS til å legge farge til din nettside på Raspberry Pi. Den raskeste måten å se hvordan CSS fungerer er å prøve et eksempel. I din main.css fil, skriver denne linjen, og deretter lagre det:

h1 {color: red; }

Når du laster websiden din (trykk F5 i Midori hvis ita € ™ s allerede åpent der), er teksten i h1 overskriften nå rødt.

Som enkelt eksempel uttrykker hvordan CSS fungerer. Du starter med å fortelle leseren hvilke merker du vil bruke en stil på (h1 tag i dette tilfellet), og deretter i klammeparenteser, liste instruksjonene stil du.

Hver instruksjon starter med å si hva aspekt av stilen bør endres (kjent som eiendommen, og i dette tilfellet, ita € ™ s fargen). Neste er et kolon, og deretter hva stilen bør endres til (kjent som verdien, som er rød i dette eksempelet). Til slutt må hver instruksjon ende med et semikolon.

Ta vare med hvordan du Punktum CSS. Selv i den korte eksempel kan et par ting går galt. Det wonâ € ™ t arbeid hvis du bruker vanlige buede parentes (parentes), eller de spisse vinkelparenteser du bruker i HTML, så sørg for at du bruker klammeparenteser.

Ta hensyn til kolon og semikolon også. Du trenger for å få de riktige på de riktige stedene for at det skal fungere. Hvis somethingâ € ™ s ikke fungerer riktig, er en manglende semikolon ofte den skyldige!

Vi kan legge til en bakgrunnsfarge, også, som dette:

h1 {color: red;
background-color: gul; }

Selv om youâ € ™ re en Brit, må du stave farge den amerikanske måten i din CSS!

Som i HTML, doesnâ det € ™ t uansett hvor du plass ut din CSS, men du kan gjøre deg selv en tjeneste og gjøre det enklere å lese ved å inkludere noen hvite plass og starter en ny linje for hver instruksjon.

Det finnes en rekke farger som du kan referere ved navn (inkludert svart, hvit, rød, grønn, blå, grå, lilla og gul), men annet enn svart og hvitt, theyâ € ™ re for lyse og tegneserieaktig for bruk i de fleste tilfeller. Den beste måten å angi farger er ved å gi et fargenummer, i stedet for en fargenavn.

Som gjør det mulig å bruke en mer subtil fargepalett og gir deg tilgang til farger som det sannsynligvis aren € ™ t selv navnene (med mindre du jobber på en spesielt omfattende malingsfabrikk, kanskje). Her er noen eksempel fargenummer:

  • # FFFFFF: Hvit
  • # 000000: Sort
  • # FF0000: Red
  • # 0000FF: Blå
  • # FFFF00: Gul
  • # 008000: Grønn

Du vil kanskje bli overrasket over å se bokstavene blandet opp i fargetall, men thatâ € ™ s fordi fargene er uttrykt ved hjelp av et tallsystem som kalles heksadesimale som går utover tallene 0 til 9 og bruker bokstavene A, B, C, D, E og F også.

Når du teller i heksadesimalt, du går: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. 10 representerer 16 i vår normale tellesystem , og 11 representerer 17. Her er tre ting du trenger å vite om heksadesimale:

  • Som i den normale tellesystem, numre til venstre er større. For eksempel bruker vår normale teller systemet, i nummer 39, har tre en høyere verdi enn 9 fordi ita € ™ s i titalls kolonnen. I heksadesimale, ita € ™ s det samme. I det heksadesimale tall 7F, 7 er verdt mer enn F fordi 7 er i 16s kolonnen.
  • Den høyeste tosifret heksadesimalt tall er FF.
  • Hvis youâ € ™ re bruke andre enn A til F bokstaver, youâ € ™ ve gjort en feil.

Den sekssifret fargenummeret er faktisk består av tre små tall klemt sammen, hver og en er to sifre. De tre tall representerer mengden av rødt, grønt og blått som bør være i fargen, tatt fra venstre mot høyre.

Så svart er # 000000 fordi det ikke er rødt, grønt eller blått. Blå er # 0000FF fordi thereâ € ™ s ingen rød eller grønn, men thereâ € ™ s den maksimale mengden av blått. Gult er # FFFF00 fordi gul er gjort når du blander den maksimale mengden av rødt og grønt, uten noen blå.

Du kan blande opp dine egne farger. For marineblå, bare bruke litt mindre blå enn ren blå og prøve # 000080. For levende limegrønn, ta nummeret for grønn (# 00800) og pumpe opp mengden av grønt til maksimum, noe som gir farge nummer # 00FF00. Du kan bruke noen gyldige tall. # 767676 er greit (og en slags sølv), og så er # 543ABC (en henting nyanse av lilla).

Du dona € ™ t nødt til å eksperimentere for mye. Mange ressurser er tilgjengelige på nettet for å hjelpe deg å finne farger du kan bruke, inkludert Colorpicker, som fungerer godt på Raspberry Pi og kan generere en hel fargevalg fra din valgte farge. Fargekoden for den valgte fargen vises øverst på skjermen.

Du bruke fargekoder i stedet for farge navn i CSS, som dette:

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