CSS hieraki og position

Laget av Camilla Larsen

Agenda

Repetisjon av boksmodellen og layout

1

  • Introduksjon til hiearki
  • fordypning til hierarki

2

  • Repetisjon av position
  • Fordypning i position
  • Oppgave

3

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

Boksmodellen

Layout

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

Specificity 

hierarchy

The specificity hierarchy refers to the categories of CSS selectors and their order of execution in CSS.

  • Selve HTML taggen
  • Class
  • Id
  • inline styling

Hva slags typer selektorer har vi?

Definerer hvilke elementer som har høyest prioritet i CSS koden vår.

Specificity hierarchy

  • 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

Live code

Skriv den samme koden som meg, og sørg for at det fungerer. Jeg kommer rundt å hjelper

CSS Position

Hjelper oss med å plassere innhold rundt omkring på siden, med ulike teknikker.

  • 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'

Positon: static;

  • 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

Positon: relative;

  • 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.

Positon: absolute

  • 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.

Positon: fixed

  • 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.

Positon: Static

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