CSS hieraki og position

Laget av Camilla Larsen

Agenda

• Hva består boksmodellen av?
• Content
• Padding
• Border
• Margin

• Hva handler layout om?
• Hvilke typer layout kan vi bruke?
• block og inline
• Position
• Flexbox
• Grid

• Selve HTML taggen
• Class
• Id
• inline styling

• Inline styling i html har høyest prioriterings grad.
• ID har nest høyest prioriterings grad
• Class kommer under ID.
• HTML element styling i CSS koden har lavest viktighetsgrad, og vil bli overstyrt av ID, Class og inline styling.
• Det finnes ulike måter å regne dette på, men vi tar utgangspunkt i de punktene som står over.

Specificity hierarchy

• Overstyrer ID, class og elementer.
• Kan brukes til å finne ut av hvor vi har feil i koden.
• Denne skal ikke benyttes når dere leverer fra dere oppgaver, det viser at dere ikke forstår koden og vil medføre trekk i karakter.

!Important

• Static
• Relative
• Fixed
• Absolute
• Sticky

CSS Position

• Default kode som står på elementene uten at vi har satt det.
• Følger den naturlige flyten til nettsiden, og vil ikke bli påvirket av 'top, left, right og bottom'

• Lar oss bruke verdier som top/left/right/bottom for å flytte på elementer.
• Elementet flytter på seg fra der den opprinnelig stod i dokumentet.
• Elementet tar hensyn til andre elementer og vil ikke overlappe de

• Lar oss bruke verdier som top/left/right/bottom for å flytte på elementet
• Elementet forholder seg ikke lenger til andre elementer på nettsiden og kan overlappe ande elementer.
• Elementet forflytter seg i forhold til nærmeste parent. Hvis den ikke har en parent, flytter den seg etter nettsiden.

• Elementet tar ikke hensyn til andre elementer.
• Tar ikke hensyn til scrolling på nettsiden. Et fixed element blir værende der du har posisjonert den i forhold til nettleseren.
• Oppfører seg veldig likt som absolute, uten om scrolling.

• Oppfører seg som er relative element, helt til man scrolle ned til elementet.
• Når man scroller ned til elementet, vil elementet følge med videre nedover nettsiden.

Du skal lage en superhelt eller superskurk dedikert til vedkommende.

Krav til oppgaven:

- Ha god og ryddig mappestruktur

- Skal ha semantiske elementer som header, main og footer.

- Ha med et bilde som linker til en nettside

- Må ha en liste over hvilke superkrefter

- Skal inneholde navigasjon som fører til andre sider (disse kan være tomme eller veldig simple)

- Du skal benytte boksmodellen og alle typene dere har lært om positions.

Oppgave