CSS Properties og Douglas JavaScript Robot - dummies

CSS egenskaper er hva som forandrer egenskapene til elementene. Douglas JavaScript Robots vakre øyenfarge, størrelsen på hans kropp og armer, rundheten i hjørnets hjørner og stillingen av sine forskjellige deler er alle bestemt av verdiene av egenskaper.

For å komme i gang, åpne nettleseren din og logg inn på det offentlige dashbordet. 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.

Gjør noen endringer i Dougles utseende ved å endre verdiene for noen forskjellige CSS-egenskaper:

1. Finn CSS-regelen for p-elementet.

   Det er for øyeblikket den andre regelen i CSS-panelet.

2. Endre verdien av skriftstørrelsesegenskapen til 2. 5em.

   Den komplette regelen skal nå se slik ut:

   p {font-size: 2. 5em;}
   

   Det finnes flere forskjellige måter å spesifisere tekststørrelser på. De mest brukte måtene er ved å bruke piksler (px), prosent (%) eller ems (em). Når du bruker prosent eller ems, settes skriftstørrelsen til det valgte elementet basert på skriftstørrelsen til foreldreelementet. For eksempel 2. 5em er to og en halv ganger skriftstørrelsen til det valgte elementets foreldre.

3. Klikk på Kjør-knappen for å se endringen i ruten Results.

   

   Douglas med fet skriftmelding.

4. Finn CSS-regelen for kroppselementet.

5. Endre verdien av kroppselementet til følgende, oppmerksom på bruken av anførselstegn:

   "Comic Sans MS", cursive, sans-serif
   

   Den komplette CSS-regelen burde nå se slik ut: < body {font-family: "Comic Sans MS", cursive, sans-serif;}

   Klikk på Kjør-knappen for å se resultatene.
   

6. Douglas har nå interessante bokstaver på skjorten sin.

   Douglas, nå med morsomme bokstaver!

   

   Neste, bytt Douglas øyenfarge for å matche din øyenfarge!

   Finn CSS-regelen som inneholder Douglas øyenfarge.

7. Det ser for øyeblikket ut som dette:

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

   Endre verdien av bakgrunnsfargeegenskapen til din øyenfarge.
   

8. Hvis øynene dine er brune, vil du forandre det til følgende:

   bakgrunnsfarge: brun;

   Klikk på Kjør-knappen for å se resultatene.
   

9. Fargen som Douglas øyne endrer seg til når du bruker ordet brun, ser ikke veldig brun ut, og fargen som brukes når du prøver å lage Douglas øyne grønn, er heller ikke en farge som noens øyne sannsynligvis vil være.For å få en mer presis farge, kan du bruke et annet av CSS-fargenavnene eller lage din egen tilpassede farge ved hjelp av heksadesimal notasjon.