CSS Basics og Douglas JavaScript Robot - dummies

I dette prosjektet endrer du og legger til stiler til en HTML-robot kalt Douglas. Douglas ble levert fra roboten fabrikken i morges. Hans JavaScript ferdigheter er fremragende; han trenger ikke mye vedlikehold (bare en ny variabel til å spille med nå og da); og han forteller gode vitser!

Det eneste problemet er, hans utseende er litt kjedelig! Jo, han har noen fine blå øyne, og hans "I <3>

For å komme i gang, åpne nettleseren din og logg inn på det offentlige instrumentbrettet. Følg deretter disse trinnene:

1. Finn fiennen som heter Kapittel 6: Robotstil - Start og klikk på tittelen for å åpne den.

   Du kan også gå direkte til Robot-appen.

   Du ser en skjerm med HTML i HTML-panelet og noen CSS i CSS-panelet.

2. Klikk på Gaffel i toppmenyen for å lage en kopi av fiddelen i din egen JSFiddle-konto.

Nå er du klar til å begynne å gi Douglas litt stil!

Ta en titt på de tre første linjene i JavaScript Robot CSS-panelet.

body {font-family: Arial;}

Disse tre linjene danner en CSS-regel . En CSS-regel består av to hovedkomponenter:

• Selector: Vælgeren angir hvilket element eller elementer CSS-regelen gjelder for. I dette eksemplet er velgeren kropp.

• Deklarasjonsblokk: Deklarasjonsblokken inneholder en eller flere CSS-erklæringer, som indikerer hvordan man skal stile det valgte elementet eller elementene. I dette eksemplet har du bare en deklarasjon, font-familie: Arial;.

CSS selectors

Vælgeren er den delen av CSS-regelen som kommer før {. CSS selectors fortelle nettleseren hvilke HTML-elementer en stil skal gjelde for.

Når du velger et element for å bruke en stil til, gjelder det også samme stil for hvert element i det valgte elementet.

CSS-valgene har en rekke forskjellige måter å velge elementer på. Se på tre av disse mens du jobber med Douglas JavaScript Robot:

• Element selectors: Se på de to første reglene i JavaScript-roboten CSS-panelet:

  body {font-family: Arial;} p {font-size: 1em;}
  

  Dette er begge eksemplene på elementvalgere. Element selectors velger HTML-elementer ved hjelp av elementets navn. For å bruke en elementvelger, skriv bare navnet på elementet du vil velge. I disse tilfellene velger du kroppselementet (som bruker og tagger) og p-elementet (som bruker

  og

  -kodene).

• Klassevalgere: Ta en titt nå på den tredje CSS-regelen i JavaScript Robot CSS-ruten:

  . øye {bakgrunnsfarge: blå; bredde: 20%; høyde: 20%; grense-radius: 50%;}
  

  Klassevalgeren starter med en periode (.), etterfulgt av verdien av en HTML-attributt som heter klassen. I dette tilfellet velger du alle elementene som har class = "eye". Hvis du ser i HTML-panelet, kan du se at det er to elementer med class = "eye". Disse brukes til å lage Douglas to øyne.

  Klassevalgere er ideelle for tider når du må bruke samme stil til flere elementer. I dette tilfellet har roboten to øyne, og de to øynene har flere ting til felles (de er både blå og i samme størrelse, for eksempel).

• ID-selektorer: ID-seleksjonene starter med et hash-symbol (#) og velger elementer basert på verdien av elementets ID-attributt. For eksempel har Douglas venstre øye og høyre øye separate ID-attributter:

  #righteye {posisjon: absolute; venstre: 20%; topp: 20%;} #lefteye {posisjon: absolutt; venstre: 60%; topp: 20%;}
  

  ID-seleksjonene er nyttige når du må velge et enkelt element i et HTML-dokument.

  Hver ID-attributt må være unikt i et dokument.

  Hvis du ser i HTML-panelet, kan du se at Douglas venstre og høyre øyne, i tillegg til å ha klasseklassifiseringer, også har unike ID-attributter. Disse egenskapene ble lagt til, slik at du kunne plassere øynene individuelt på Douglas ansikt.

CSS-deklarasjoner

CSS-deklarasjonene går inn i deklarasjonsblokkene etter CSS-valgene. Erklæringer består av to deler:

• Eiendom: Eiendomsdelen av en erklæring forteller hva som skal endres. For eksempel kan du endre farge, bredde eller posisjon for et element. Eiendommen må følges av et kolon (:).

• Verdi: Verdien forteller hvordan eiendommen skal endres.

Hver deklarasjon må avsluttes med et semikolon (;). Du kan ha så mange erklæringer innenfor en deklarasjonsblokk som du trenger for å få jobben gjort.

Forklaringsblokken for elementene med øyeklassen inneholder for eksempel fire erklæringer:

. øye {bakgrunnsfarge: blå; bredde: 20%; høyde: 20%; border-radius: 50%;}