CSS og selektorer

En regel består af to dele#

p {
  color: #333;
  line-height: 1.6;
}

p er selektoren: hvem reglen gælder for. Alt inde i krølleparenteserne er erklæringer: en egenskab, et kolon, en værdi, et semikolon.

De selektorer, du får brug for#

Selektor	Rammer
p	alle <p>-elementer
.kort	alle med class="kort"
#top	elementet med id="top"
.kort p	alle <p> inde i noget med klassen kort
.kort > p	kun <p> direkte inde i kort
a:hover	et link, musen er over
input:focus	feltet, der er markeret

I praksis bruger du klasser til næsten alt. id bruges til enkeltstående ting og til at pege på fra JavaScript.

Boksmodellen#

Hvert element er en kasse med fire lag udefra og ind: margin (afstand udenfor), border (kant), padding (afstand indeni) og selve indholdet.

.kort {
  padding: 16px;
  border: 1px solid #ddd;
  margin-bottom: 24px;
}

Standardadfærden er, at width kun gælder indholdet, så padding og border lægges oveni. Det giver næsten altid overraskelser. Derfor starter stort set alle stylesheets med:

* {
  box-sizing: border-box;
}

Så betyder width: 300px, at hele kassen er 300 pixels bred. Padding og kant inklusive. Det er den opførsel, du forventer.

Hvorfor slår min regel ikke igennem?#

Når to regler siger noget forskelligt om det samme, vinder den mest specifikke. Rangordenen, fra svag til stærk:

1. elementnavn (p). Svagest
2. klasse (.kort), attribut, pseudoklasse (:hover)
3. id (#top)
4. style="..." skrevet direkte på elementet
5. !important. Stærkest

Er to regler lige specifikke, vinder den, der står nederst i filen.

Layout med flexbox#

Flexbox er den letteste måde at lægge ting ved siden af hinanden eller under hinanden med jævn afstand.

.raekke {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

• display: flex gør elementets børn til flexelementer.
• gap er afstanden imellem dem.
• justify-content styrer langs rækken, align-items på tværs.
• flex-direction: column stiller dem under hinanden i stedet.

Med flex-wrap: wrap bryder rækken, når der ikke er plads. Det er ofte alt, der skal til, for at et layout også fungerer på en telefon.

Kort opsamling#

• Selektor + erklæringer. Klasser til næsten alt.
• box-sizing: border-box fra starten.
• Specificitet afgør, hvem der vinder; !important er en gæld, du optager.
• Flexbox med gap løser de fleste layouts.