Skip to content

Latest commit

 

History

History
242 lines (161 loc) · 5.51 KB

03.2.css.md

File metadata and controls

242 lines (161 loc) · 5.51 KB
Raw
title
Fyrirlestur 3.2 — CSS 1 – Cascade

Fyrirlestur 3.2 — CSS #1 – Cascade

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Lengdir

  • Nákvæmar einingar
    • t.d. in, cm
    • Notum mest px eða pixel
  • Hlutfallslegar einingar
  • auto leyfir vafra að reikna lengdina

Hlutfallslegar einingar

  • Letur-hlutfallslegar einingar (font-relative lengths)
  • Skjá-prósentu einingar (viewport percentage lengths)

Letur-hlutfallslegar einingar

  • Horfa til font-size eigindsins
  • Yfirleitt em eða rem
  • Í grunninn er 1em == 16px en getum breytt með að setja font-size á html
  • Þegar reiknað er úr em gildum í elementum sem eiga sér foreldri með skilgreint em gildi eru þau margfölduð.
  • Á ekki við rem

Dæmi um letur-hlutfallslegar einingar

Síða sem nýtir grid og vertical rhythm.

Dæmi um „vertical rhythm“

Skjá-prósentu einingar

  • Hlutfallslegar við stærð viewports sem er yfirleitt stærð vafragluggans.
  • vw er ein eining á breiddina (viewport width) svo 100vw myndi fylla upp í skjá á breiddina
  • vh er ein eining á hæðina (viewport height) svo 100vh myndi fylla upp í skjá á hæðina
  • 1vmin er 1vw eða 1vh, hvort sem er minna
  • 1vmax er 1vw eða 1vh, hvort sem er stærra

Dæmi um skjá-prósentu einingar

Að teikna útlit

  • Hvernig veit vafri hvaða gildi fyrir hvaða eigindi eigi að nota?
  • Reglur og reiknirit
  • specificity og cascade

Specificity – sértækni

  • „Tala“ á forminu a,b,c,d
  • a, 1 ef skilgreint í style attribute, annars 0
  • b, fjöldi id selectora
  • c, fjöldi attribute selectora og gervi-klasa
  • d, fjöldi elementa og gervi-elementa
  • Síðan skeytt saman í tölu sem er sértækni

Specificity – dæmi

li.foo {}        /* a=0 b=0 c=1 d=1 → 11 */
#foo {}          /* a=0 b=1 c=0 d=0 → 100 */
.foo .bar:active /* a=0 b=0 c=3 d=0 → 30 */
style=""         /* a=1 b=0 c=0 d=0 → 1000 */

Cascade – „flóðið“

  • Þegar útlit er birt þarf að komast að því nákvæmlega hvaða skilgreiningar eigi við hvert element
  • Allar skilgreiningar fyrir element fundnar og raðað

Skilgreiningar geta komið frá þremur stöðum:

  • User agent, sjálfgefnir stílar frá tæki sem birtir
  • Notanda, notandi tækis, t.d. að allt sé stækkað
  • Höfundi, skilgreiningar frá höfundi vefs

Röðun

  1. Skilgreiningum user agents
  2. Skilgreiningum notanda
  3. Skilgreiningum höfundar
  4. Skilgreiningum höfundar merktar með !important
  5. Skilgreiningum notanda merktar með !important
  6. Sértækni
  7. Röð innan skjals, seinna skilgreint fær forgang

!important

  • Getum ýtt skilgreiningu upp listann með !important
  • Hunsar sértækni
  • Ekki góð hugmynd
div {
  font-size: 100px !important;
  /* það er mjög mikilvægt að
     allur texti sé 100px! */
}

Gildi reiknuð

  • Höfum núna þær reglur sem við notum fyrir hvert element, getum fundið skilgreint gildi fyrir hvert eigindi
    • Ef „flóðið“ gefur okkur gildi, notum það
    • Annars, erft gildi
    • Annars, upphafsgildi

Erfð gildi

Sum gildi erfast frá foreldri til barns.

<h1>Halló <em>heimur</em></h1>
h1 { color: blue; }
/*
  allur texti innan h1 er blár, líka sá
  sem er innan em, þar sem color erfist
*/

Upphafsgildi

  • Fyrir aðrar yfirlýsingar eru skilgreind upphafsgildi
  • Yfirleitt rökrétt en stundum geta þau valdið okkur vandræðum, sérstaklega með shorthand
  • T.d. er background-color með sjálfgefna gildið transparent, engin bakgrunnslitur
  • Reiknað gildi – reiknað úr hlutfallslegum gildum eins langt og hægt er, t.d. hlutfallsleg breidd m.v. foreldri
  • Notað gildi – fáum nákvæm gildi úr öllum, leyst úr háðum gildum
  • Raun gildi – gildi notað við birtingu, t.d. þarf að námunda tölur að einhverjum aukastaf

Dæmi

Reset

  • Hver vafri stillir sitt user agent stylesheet
  • Viljum oft hafa hreinan grunn
  • CSS reset setur öll element í „núllstöðu“
  • CSS Tools: Reset CSS

Dæmi um reset

Að skrifa CSS

  • Notum ekki id í selectorum
    • Hátt specificity, getur valdið vandræðum
    • Ekki endurnýtanlegt - aðeins eitt id per síðu
  • Nýtum „flóðið“ til að minnka endurtekningar
  • Góð og snyrtileg heiti á klössum
    • Enska, kebab-case
/* ekki svona */
.MikilvaegurTexti { }
.ListOfItems { }

/* heldur svona */
.important-text { }
.list-of-items { }

Samsett orð í forritun

  • Kebab-case er ein af nokkrum leiðum til að skrifa samsett orð án bila
  • Þurfum oft að gera það þegar bil hefur merkingu
  • Aðrar leiðir t.d. lowerCamelCase og snake_case
  • Ættum að huga að í kóðastíl og gæta samræmis

Validation

  • W3C heldur úti validation þjónustu
  • Bæði villur og viðvaranir
    • Til þess að fá allar upplýsingar þurfum við að kveikja á öllum warnings undir more options