Quiz: Oppvarming om CSS
I denne quizzen stiller vi noen enkle oppvarmingsspørsmål om CSS.
Noen av spørsmålene har flere korrekte svar.
Det kan også hende at ingen av svarene er korrekt.
Lykke til!
Hvilke(n) av disse uttalelsene er korrekte?
- Et HTML-dokument kan lenke inn kun én (1) enkelt CSS-fil
- En gitt CSS-fil kan ikke lenkes inn fra mer enn én (1) HTML-fil
- Et CSS-dokument må ligge i samme mappa som HTML-fila
- Et HTML-dokument kan ha både inline CSS og ekstern CSS
I hvilken rekkefølge angis de 4 kantene i en CSS-boks når en f.eks.
stilsetter boksens ramme?
- right, bottom, left, top
- left, right, top, bottom
- top, right, bottom, left
- left, top, right, bottom
Hva betyr egentlig CSS?
- Cooperative Style Sheets
- Collaborative Style Sheets
- Cascaded Style Sheets
- Concurrent Style Sheets
I hvilke(n) av disse, vil det første barnet bli valgt?
- :nth-child(odd)
- :nth-child(even)
- :nth-child(0)
- :nth-child(1)
Hvilken av disse selektorene gir de <p> som er av klasse "meny"?
- p>meny
- p.meny
- p meny
- p~meny
Vi skal posisjonere med Flexbox
der vi får fleksebokser som flekser rundt i en flex container.
Hvilket utsagn er feil?
- containeren skal ha display:flex;
- boksene skal ha display:flex;
- både container og bokser må ha display:flex
- display:flex er feil, det skal være flex:display, og det skal stå i boksene
I hvilken rekkefølge angis de 4 kantene i en CSS-boks når en f.eks.
stilsetter den margin som skal stå rundt boksen?
- right, bottom, left, top
- left, right, top, bottom
- top, right, bottom, left
- left, top, right, bottom
Hva betyr egentlig HTML?
- Hypertext Markup Language
- Hyperbolic Text Markup Language
- Hydroliquid Text Markup Language
- Historic Text Markup Language
Hvilken av disse velger det første barnet av elementer i klassen "katalog"?
- .katalog:first-child
- .katalog(0)
- .katalog(1)
- .katalog:nth-child(0)
Hvilken av disse selektorene gir de som er av klasse "meny"?
- meny
- .meny
- *[meny]
- class:meny
Hva menes med at deklarasjonen "flex-flow:row wrap;" er
shorthand?
- både ordene "row" og "wrap" er veldig korte ord (kort=short)
- vi får satt to egenskaper
i samme deklarasjon, så koden blir kortere (short)
- deklarasjonen har utelatt det
tredje parameter for width, så den
er mangelfull (short)
- deklarasjonen må
skrives på samme linje, slik at den blir kort
Hvor havner elementene
hvis vi sier align-self:flex-end; for en flekseboks?
- i nederste høyre hjørne av flekse-containeren
- helt i slutten på
hovedaksen
- på vanlig plass, fordi
flex-end ikke er en gyldig verdi for align-self
- nederst i kryss-aksen, slik at
elementene får samme bunnposisjon
Du har
HTML-kode med en fleksecontainer. I denne
ligger tre fleksebokser i følgende
rekkefølge: A, B, C.
Hvordan kan du med CSS sikre at
de vises i rekkefølgen A, C, B? Altså skal
B og C bytte plass.
- sette CSS-egenskapen
"weight:A C B" i
containeren
- sette order-egenskapen
til 1 for boks C og 2 for boks B.
- umulig i CSS, eneste måte er å
flytte C foran B i HTML-koden.
- sette weight-egenskapen
til 3 for A, 2 for C og 1 for B.
Hva er "normal flow" for inline elementer og blokk-elementer i CSS?
- at neste blokk plasseres under forrige blokk
- at neste blokk vil stå til høyre for forrige blokk
- at en blokk må etterfølges av en
inline blokk
- at en inline må etterfølges av en blokk
Hvilken av disse verdiene
er default for egenskapen position?
- static
- generic
- terrific
- dynamic
Hva skjer med et element
som får position:relative og left:30px;, som i
.alternativ:nth-child(2) { position:relative; left:30px; }"
- det flyttes 30px til høyre for
sin normale posisjon
- det flyttes 30px til venstre
relativt til foreldre-elementets posisjon
- ingenting, fordi relative ikke
er en gyldig verdi for position-egenskapen
- de første 30px av elementet blir
stående utenfor viewport
Hva er sant om
"margin collapsing"?
- at vi med { body:margin-collapse; } oppnår at alle marginer i
dokumentet settes lik 0
- at elementer som står på samme linje (horisontalt) deler margin
- at elementer som står over hverandre (vertikalt) deler margin
- det inntreffer kun når
skjermen blir veldig smal og ikke får plass
til alle marginene
Hva reguleres med egenskapen
z-index?
- i hvilken rekkefølge overlappende element skal vises på skjermen
- i hvilken rekkefølge
element skal vises langs hovedaksen i en flexbox
- det finnes ikke en slik egenskap
i CSS-språket.
- hvor stor zoomfaktor (forstørring) et element skal ha.
Hva er sant om value og "value type"
i CSS?
- value er det som står til høyre
for kolon i en deklarasjon
- deklarasjonen ignoreres
hvis vi angir en value som
ikke finnes i "value type"
- "value type" er det som
skal stå i selektoren
- "value" og "value type" er
synonymer.
Hvilken av
disse er ikke en godkjent lengde-enhet i CSS?
Hvilken av disse
er ikke en relativ lengde-enhet i CSS?
Hvilken av disse
egenskapene vil ikke bli arvet?
- color
- font-size
- width
- font-family
Hva er sant om begrepet
"spesifisitet" i CSS?
- spesifisitet brukes i
konflikthåndtering, for å avgjøre
hvilken stilregel som skal få bestemme
- de nederste barna (som ikke
har barn) er de
som har høyest spesifisitet i DOM-treet
- den selektoren med flest
ledd har høyest spesifisitet
- det stilarket med flest
regelsett har høyest spesifisitet
Er det sant at
en inline style er den viktigste, og derfor alltid
vil bli valgt.