Fyrirlestur — CSS

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Hvað er CSS?

Cascading Style Sheets
CSS er style sheet language sem lýsir framsetningu á skjali skrifuðu í markup language, t.d. HTML, XHTML, XML og SVG
Hannað til að aðskilja efni frá útliti

Specification

Staðlað af W3C
CSS 2.1 W3C recommendation 2011 þó fyrst árið 2004
CSS level 3 (CSS3) – unnið sem módular ofan á fyrri útgáfur

Logo fyrir CSS3

“You don’t need to be a programmer or a CS major to understand the CSS specifications. You don’t need to be over 18 or have a Bachelor’s degree. You just need to be very pedantic, very persistent, and very thorough.”

—Understanding the CSS Specifications

Think for a moment of all the sites out there on the web. There’s a huge variation in visual style: colour schemes, typographic treatments, textures and layouts. All of that variety is made possible by one simple pattern that describes all the CSS ever written:

selector { property: value; }

That’s it.

— Resilient Web Design – Chapter 2

CSS er einfalt, ekki auðvelt

Mjög einföld málfræði í grunninn
Verður hratt flókið, búið ykkur undir það
- Verið óhrædd við að spyrja
Þolinmæði og ákveðni hjálpa

CSS?

CSS is awesome

CSS er einfalt, en kröftugt

Þrátt fyrir einfalda málfræði í grunninn er CSS mjög kröftugt
Flest þau útlit sem við sjáum á vefnum eru smíðuð með CSS
Þið getið smíðað þau líka!

Tenging við html

Í æskilegri röð:

Vísa í skrá (.css ending): <link rel="stylesheet" href="..."> í <head> – viðhöldum algjörum aðskilnaði
<style> blokk í HTML skjali, helst í <head> – ekki alveg jafn hreint en aðskiljum þó frá markup
style attribute á element – alls ekki æskilegt þar sem við erum að binda útlit við element í markup

Dæmi um tengingu

HTML & CSS
- Tenging HTML & CSS, ekki gott dæmi
HTML & CSS
- Tenging HTML & CSS, betra dæmi

Refactor

Í seinna dæminu erum við búin að refactora fyrra dæmið
Breyttum uppbygginu kóðans til hins betra án þess breyta lokaniðurstöðunni

Málfræði

Vinnum með reglusett, samanstanda af
- selectors
- yfirlýsingum
Athugasemdir eru innan /* comment */

/* eftirfarandi er eitt reglusett */
p /* selector */
{ /* yfirlýsingar innan { } */
  color: green; /* yfirlýsing */
  margin: 1em; /* yfirlýsing */
}

Selectors

Strengur sem lýsir því hvaða element við viljum að taki við yfirlýsingum
- Skiptast í sex flokka
Getum tengt saman
- Fjórar gerðir af samtengingum

Selectors – flokkar

Type selectors, heiti á elementi, t.d. p
Universal selectors, öll element, *
Attribute selectors, velur element eftir attribute og innihaldi

Class selectors, velur element eftir því hvað class attribute inniheldur, notar . (punkt)
ID selectors, velur element eftir því hvað id attribute inniheldur
Gervi-klasar (pseudo-classes), velur hluti sem ekki er hægt að velja með hinum, notum :

Gervi-klasar (pseudo-classes)

Dýnamískir gerviklasar, t.d.
- Fyrir tengla: :link ef ekki er búið að heimsækja og :visited ef búið er að heimsækja
- Fyrir aðgerðir notenda: :hover meðan sveimað er yfir element, :active ef búið er að velja það eða smella á það, :focus ef það hefur fókus

Gerviklasar fyrir upbyggingu
- t.d. :nth-child(), :first-child, :last-of-type, eða :empty
:not() til að neita ákveðnum selector, er vandmeðfarinn en leyfir flókna hegðun

Selectors – samtenging

" " (bil) þýðir að seinni selector velur element sem er afkomandi fyrri
> er fyrir strangt barn, seinni selector verður að vera barn fyrri
+ er fyrir systkini, seinni selector velur element sem er systkini sem kemur beint á eftir fyrri selector
~ er almennur systkina selector, seinni selector velur element sem er systkini fyrri

`at` reglur

at reglur leyfa skilgreiningar á aukaupplýsingum
Ákveðið gildi, t.d. @import 'typography.css'; innifelur skrá
Hreiðruð (e. nested) gildi, t.d. @media, sjáum betur í responsive

Gervi-element (pseudo-element)

Gervi-element leyfa okkur að velja parta af elementi sem við annars gætum ekki gert. Þau eru skilgreind í selector með ::.

::before/::after – element fyrir framan/aftan það sem skilgreint er, ekki til fyrr en við veljum
::first-letter – fyrsti stafur elements
::first-line – fyrsta lína elements

Villumeðhöndlun

CSS er hannað til að fyrirgefa minniháttar villur, t.d.
- Ef tvípunkt eða semíkommu vantar í yfirlýsingu
- Ef heiti eigindis er óþekkt er yfirlýsingin öll hunsuð og haldið áfram að næstu.

Meiriháttar villur stoppa lestur á skjali frá þeim stað sem þær eiga sér stað

Dæmi um selectors og villumeðhöndlun

Dæmi um selectors
Dæmi um gervi-klasa og gervi-element
Villumeðhöndlun
- Hvernig CSS bregst við ef villa er í CSS

Yfirlýsingar

Reglusett inniheldur yfirlýsingar:
eigindi: gildi;
Mjög mörg eigindi, möguleg gildi færri

Shorthand

Oft er hægt að skilgreina í einni yfirlýsingu mörg gildi fyrir svipaða virkni
Tvíeggja sverð: getur aukið lesanleika en líka falið möguleg gildi

margin: <top> <right> <bottom> <left>;

Gildi og einingar

CSS hefur nokkrar mismunandi tegundir af gildum og einingum
Hvert eigindi tekur mismunandi gildi, verðum að vita hvert eða fletta því upp

Gildi – strengir

Strengir eru skilgreindir með " eða '
Getum escapeað staf með \ fyrir framan
"this is a 'string'"
"this is a \"string\""
'this is a "string"'

Gildi – URL

Url skilgreinum við með url(<slóð>) þar sem slóð er bein slóð eða slóð í streng.

url(http://example.org/mynd.jpg)
url('http://example.org/mynd.jpg')
url('/mynd.jpg')

Gildi – litir

Höfum nokkrar leiðir til að skilgreina liti.

Lykilorð, t.d. black, white, green

Ekki augljóst hvaða lit er verið að meina nákvæmlega svo forðumst yfirleitt
currentColor er erft gildi litar sem kemur frá foreldri
transparent fyrir alveg gegnsæan lit

RGB gildi með hexadecimal eða rgb(),

t.d. #00ff00 eða rgb(0, 255, 0) (bæði gildi eru grænn).
Getum líka skilgreint í þrem tölum, þá er ein tala að túlka tvær sömu, #0f0
Ef við bætum við tveim (eða einni) tölu aftast túlkum við hversu gegnsær liturinn er (ff ekkert gegnsær, 00 alveg gegnsær), t.d. #00ff0066

HSL gildi með hsl()
Getum skilgreint alpha gildi með rgba() og hsla()
- Á bilinu [0, 1]. 0 er alveg gegnsær en 1 er ekkert gegnsær

Gildi – tölur

Heiltölur
Rauntölur, með punkt 1.2
Prósentur 25.5%

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

Dæmi um letur-hlutfallslegar einingar

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