Selektorer

en selektor angir krav for å bli valgt ut til å motta en gitt stil
slik forklart i kap 2 har vi 3 hovedtyper selektor:
- tagnavn (som p)
- idnavn (som #kommentar)
- klassenavn (som .båt)
sammensatt
- a.viktig, velger alle der klassen "viktig" er angitt for en lenke (a)
  - <a class="viktig" href=".."> ... </a>
- .gutt.jente velger alle som har klasse satt til både "gutt" og "jente"
  - ja, et element kan tilhøre flere klasser (se s. 30, eller w3schools)
    - (litt "polymorfi" altså, for å skjele til objekt-orientert koding).
    - <div class="gutt jente"> ... </div>
- a, h1.viktig, img.jente, altså flere tagnavn (kommaseparert)
- alle: * (stjernetegnet, ofte brukt for å indikere "alt", på engelsk: wildcard)
relasjonelle krav
- først: dokumentet kan tenkes som et tre
  - treet har ei rot (<html>), vi kan si at dette er nivå 1
  - treet vokser nedover
  - på nivå 2 har vi to barn <head> og <body>
  - hver node på nivå N har 0 eller flere barn (på nivå N+1)
  - hver node på nivå N har 0 eller flere søsken (på samme nivå N)
  - dette treet kalles ofte dokumentets DOM (Document Object Model)
  - http://bioub.github.io/dom-visualizer/ (vil vise treet grafisk)
- a img (velger de img som ligger under a, dvs. img som er et barn av a, i praksis blir dette de bilder som er brukt som lenkeinnhold, altså der vi trykker på bildet for å hoppe via hyperlenken)
- h2 + p (velger de p som ligger rett etter h2, på samme nivå, en slags "første yngre bror")
- h2 ~ p (velger de p som ligger etter h2, trenger ikke være første, men må være etter)
  - bølgetegnet (~), engelsk: tilde
- div > p (velger de p som er barn av et eller annet div, ikke nevnt i læreboken)
attributtkrav (s. 82, el. w3schools)
- hvis et element har et attributt blir dette også et barn
- img[alt] vil velge alle bilder som har et alt-attributt (endel bilder har jo ikke)
- a[href*="norge"] velger alle lenker som inneholder "norge" (casesensitivt?)
- video[loop="loop"] velger alle videoer som har loop identisk lik "loop"
  - hva med ulikhet, f.eks. img[height>"30"] ??
- a[href=^"http"] velger alle lenker som starter med "http"
  - hattetegnet (^), engelsk: caret
- a[href$=".pdf"] velger alle lenker som slutter på "pdf"
  - dollar-tegnet ($) ofte brukt for å angi "slutt" (se regex senere)
pseudoelement (s. 83)
- ::first-line velger første synlige linjen
  - som i p::first-line (merk: to kolon)
- ::first-letter velger første tegnet (eng.: letter betyr tegn)
- ::before for å legge til på starten (prepend)
  - stilen kan være f.eks. content: "HUSK: "; background-color: yellow, som da vil bli lagt til på starten
- ::after for å legge til på slutten (append)
pseudoklasser (s. 85)
- x:first-child velger de x som er første barn
  - (merk: kun ett enkelt kolon)
- x:last-child velger de x som er ... siste barn
- x:first-child velger de x som er ... første barn
- x:nth-child(y) for de x som er y'te barn
- x:nth-child(odd) for oddetall, altså de x som er 1., 3., 5., osv.
  - eller even (like tall kalles even numbers)
- x:empty velger de x som har null innhold (ex <br/> og <img/>)
- elementtype
  - x:first-of-type (første av denne typen) og :last-of-type
    - som i img:first-of-type
  - x:only-of-type og x:only-of-child
  - x:nth-child(y) og x:nth-last-of-type(y)
- status i et element
  - :visited velger de som har vært besøkt (i denne nettleserens historie)
  - :link velger de som enda ikke er besøkt
  - :active velger er de vi klikker på akkurat nå (holder knappen nede)
  - :hover er de som pekeren peker på (engelsk hover er å henge i lufta)
  - :target er de som har internlenke pekendes på seg (target betyr mål)
(slutt)

Måleenheter

størrelser skrives som "tall måleenhet" uten mellomrom
- som height="40px", ikke "40 px".
absolutt:
- cm, mm, in (engelsk inches, dvs. tommer, ca 2.54 cm), vanligst for papirmedium
- pt (point), det er 72 slike i en tomme, så 1 pt = 2.54/72 cm
- pc (pica), det er 12 pt i en pica, så 1 pc = 12 pt = (12 * 2.54) / 72 cm
- px (pixel), vanligst for skjerm. Lav oppløsning: 1 px = ca 1 piksel på skjermen
relativ
- em: til fontstørrelse, så 1.5em betyr 1.5 x fontens størrelse
  - (font: skrifttype, vi har "store" og "små" fonter)
- % (prosent), så 70% betyr 70% av foreldreelementet
  - (foreldreelement ??)
- vw: (viewport width), så 150vw betyr 1.5 x viewportens bredde
  - viewport: vinduets bredde (det vi kan se)
- vh: (viewport height)
responsiv design
- innholdet skalerer med størrelsen på skjerm og visningsutstyr
- unngå absolutte størrelser

Farger

en setter vanligvis
- color (forgrunnsfarge, som tekstfarge, linjefarge, rammefarge)
- background-color (bakgrunnsfarge)
w3c har definert ca 140 ferdige navn
RGB, angis som rgb(a,b,c) i prosent eller 8-bits tall (fra 0 til 255)
- eller RGBA som i rgba(a,b,c,alpha) der alpha er opasitet
- opasitet: gjennomsiktighet, angis som desimaltall fra 0.0 (0=max gjennomsiktig) til 1.0
heksadesimalt som #aabbcc
- heksadesimalt har tegnene 0-9 og A-B (16 ulike, så de tar 4 bit)
- 6 heksadesimale tegn x 4 bit = 24 bit.
- pussig kortform: #abc betyr #aabbcc

Tekst

font-style kan ha verdi normal (default), italic eller oblique
text-decoration kan ha verdi none (default), underline, overline eller line-through
font-weight kan ha verdien normal, bold, bolder, lighter. Kan angis som tall (700 er bold)
font-size angis som
- tall (fex 12px) eller prosent (fex 110%), eller
- standardstørrelser som xx-small, x-small, small, large, x-large, xx-large, smaller, larger, medium.
line-height angis som tall eller prosent
text-align er left, right, center eller justify
text-shadow er fex 2px 5px #faa, som gir 2px horisontal og 5 px vertikal skygge med farge #ffaaaa
text-transform er uppercase, lowercase eller capitalize
font-family er fex "Times New Roman", "Georgia", "Serif" (ønskeliste)
- Nettleser (og operativsystem) har gjerne de vanligste fontene lokalt (på PC)
- "web safe font": Produsentene ble enig om hvilke fontfamilier alle skulle støtte
- CSS Webfont (s. 97, mer hos w3schools)
  - definisjon: @font-face { font-family: Superfont; src:url("superfont.ttf") ; }
  - bruk som vanlig i font-family:Superfont.

CSS-bilder

alternativ til <img>
- bruk <img> hvis bildet er del av innholdet (det vi vil formidle, noe informativt om teksten)
- bruk CSS hvis bildet bare er for utseendets (dvs designelement, som en vakker kantbord)
background-image: url("bilde.jpg")
background-repeat kan være repeat, no-repeat, repeat-x eller repeat-y
background-position kan være left, right, cener, top, bottom, center
background-size er størrelse og bredde
opacity er fra 0 til 1 (0=helt gjennomsiktig)

CSS-bokser

border-style kan være solid, double, groove, dotted, dashed, ridge, inset etc
border-width for tykkelse
border-color
border-radius gir radius på hjørnebuene
margin (utenfor kantlinjen/border)
- margin: a gir a, a, a, a, flr topp, høyre, bunn, venstre
- kan også skreddersy: margin: topp, høyre, bunn, venstre
margin-left kan være verdi eller auto
margin-right kan også være verdi eller auto
- (begge auto gir sentrert?)
box-shadow: a b c d e for å angi forskyvning mot høyre (a), ned (b), utjevning/blur (c), spredning (d) og farge (e). "None" brukes for ingenting.
størrelse på en boks
- total bredde for en boks er: width + 2*padding + 2*border-size + 2*margin
- total høyde for en boks er: height + 2*padding + 2*border-size + 2*margin
- width: angir total bredde (inkludert alle disse),
- height angir total høyde
- min-width
- min-height
- box-sizing: border-box vil justere boksen kun ut til kantlinjen.
overflyt
- f.eks. hvis en tekst ikke får plass i en boks
- teksten vil flyte utenfor boksen
- overflow, overflow-x og overflow-y kan settes til visible (vis alt, la det flyte utenfor), hidden (skjul overflyt), auto (lager scroll hvis overflyt) og scroll (alltid scroll)
visningsmetode
- display kan være
  - block (standard), vil gi linjebrudd før og etter (som et avsnitt)
  - inline gir ikke linjebrudd (som et ord på en linje)
  - inline-block
  - andre: list-item, table, tablerow, ...

Nettleserprefiks

nye egenskaper ikke alltid støttet
columns er definert i CSS3
-webkit-columns (for Chrome, Opera, Safari)
-moz-columns (for Mozilla sin Firefox)
-ms-columns (for Microsoft sin Edge og Internet Explorer)
vi så dette brukt for CSS-generert høyrepil
- -webkit-transform ble satt til rotate(45 deg) for å angi grader rotasjon
- (i Chrome trengs ikke -webkit-transform, vi ser at transform fungerer)

(slutt)