Kafli 10: CSS málfræði

Málfræði CSS er einföld, flest það sem við gerum byggist á því að vinna með reglusett sem samanstenda af selectors og yfirlýsingum. Hægt er að setja inn athugasemdir í CSS innan /* og */ en í CSS er engin leið til að skilgreina athugasemd sem tekur yfir eina línu (oft gert með // athugsemd eða # athugasemd).

Selector er strengur sem lýsir því hvaða element við viljum að taki við yfirlýsingum. Sér í lagi getum við skrifað:

Gervi-klasar skiptast síðan áfram í flokka:

Hægt er að tengja saman selectors með   bili (e. whitespace), >, + eða ~:

Ef fyrir eftirfarandi HTML:

skilgreinum við CSS sem stýrir útliti með mismunandi selectors, sjá athugasemdir við hvern um hvað er gert:

At reglur leyfa skilgreiningar á aukaupplýsingum. Þær geta verið fyrir ákveðið gildi, t.d. @import 'typography.css'; sem innifelur allt CSS úr typography.css. Þær geta einnig verið hreiðraðar (e. nested), innihalda þá CSS reglur sem eru aðeins notaðar við ákveðin skilyrði, t.d.

Gervi-element (e. pseudo-elements) leyfa okkur að velja elementi sem er ekki til staðar í DOM tré. Þau eru skilgreind í selector með ::.

CSS er hannað til að fyrirgefa minniháttar villur, þá er öll yfirlýsingin hunsuð og haldið áfram að næstu. Þetta gerir það að verkum að CSS er traust og byggt til að virka í dag með virkni sem verður til á morgun, t.d.:

Meiriháttar villur stoppa lestur á skjali frá þeim stað sem þær eiga sér stað. Þetta gerist yfirleitt þegar { og } eru ekki í jafnvægi ({ er ekki lokað á réttum stað).

Skilgreiningar á reglusetti eru innan { og }, og innihalda enga eða fleiri yfirlýsingar aðgreindar með semíkommu. Yfirlýsing byrjar á nafni eigindis (e. property), tvípunkti, gildi eigindis (e. value) og loks endar semíkomma yfirlýsinguna. eigindi: gildi;. Nöfn eiginda eru margvísleg í CSS og bætast við fleiri eftir því sem ný virkni er skilgreind. Gildin eru hinsvegar töluvert færri.

Fyrir sum eigindi er hægt að skilgreina í einni yfirlýsingu, þetta er kallað shorthand. Þessi virkni getur minnkað fjölda lína sem við þurfum að skrifa og kannski sparað tíma. Shorthand leyfir líka að sleppa því að skilgreina ákveðin gildi og eru þá sjálfgefin gildi sett í staðinn. Þetta getur valdið vandræðum ef það skrifar yfir gildi sem við höfum áður skilgreint.

Strengir er skilgreindir með ' eða ". Ef við þurfum að skrifa þessa stafi notum við lausnarstafinn (e. escape character) \ til að skilgreina lausnarrunu (e. escape sequence) fyrir stafinn.

Url skilgreinum við með url(<slóð>) þar sem slóð er innan eða utan strengs.

Strengir sem skilgreindir eru án ' eða " eru lykilorð sem vísa þá í vel skilgreinda hegðun samkvæmt CSS staðli. T.d. display: block;, block er lykilorð sem gefur til kynna hverskonar display hegðun element á að fylgja.

Tölur geta verið jákvæðar og neikvæðar heiltölur og rauntölur. Rauntölur eru skilgreindar með punkti, t.d. 1.2. Tölur notum við yfirleitt þegar við vinnum með lengdir í CSS. Einingar á tölum geta verið ýmsar en einnig getum við skilgreint prósentur, t.d. 25.5%. Þegar við notum prósentur miðast þær alltaf við gildi foreldris eða breidd tækis. width: 100%; lætur element taka breidd sem er jöfn 100% af breidd foreldris eða skjás.

Nokkur gildi eru sérstök og virka með örðum gildum eða upprunagildum:

Hægt er að nota þessi sérstöku gildi með sérstaka eigindinu all sem á við öll eigindi elements. T.d. all: initial; lætur öll eigindi fyrir element taka sín upprunagildi.

Liti má skilgreina með:

Þegar unnið er með útlit í CSS er mikið unnið með lengdir. Hvort sem það er til að stýra hversu breið, há eða hve mikið bil er á milli elementa. Eigindin geta tekið hinar ýmsu einingar. Í grunninn eru þær hlutfallslegar og nákvæmar.

Eitt sérstakt gildi er hægt að gefa fyrir lengd en það er auto sem leyfir vafra að reikna lengdina sjálfkrafa.

Nákvæmar einingar eiga við þegar við vinnum með hluti sem þurfa nákvæmar mælingar. T.d. fyrir prent þar sem við prentum á þekkta stærð í raunheimum, þar er hægt að nota einingar eins og in, cm, eða mm. Að skilgreina 1cm í CSS þýðir samt ekki að útkoman verði nákvæmlega einn sentimeter útprentuð. Nákvæma gildið er alltaf hlutfallslegt við upplausn prentunar, dpi eða dots per inch.

Í langflestum tilfellum reynum við að sleppa því að nota nákvæmar einingar þegar við útbúm birtingu fyrir vafra og stafræn tæki. Umhverfið sem vefurinn okkar birtist í er ekki þekkt stærð. Þó eru aðstæður þar sem við þurfum að nota nákvæmar einingar og þá notum við px eða pixel. Það er þó flóknara en svo að 1px í kóða sé 1px á öllum tækjum, þar kemur til upplausn tækis og fleira.

Hlutfallslegar einingar skiptast í tvo hópa, letur-hlutfallslegar einingar (e. font-relative lengths) og skjá-prósentu einingar (e. viewport percentage lengths).

Letur-hlutfallslegar einingar horfa til font-size eigindsins þegar þær skilgreina stærð fyrir element. Yfirleitt notum við em eða rem einingar. em var upphaflega stærð skilgreind útfrá breidd M í leturgerð en hefur í dag verið skilgreind í CSS sem stærð font-size. Ef ekkert hefur verið átt við font-size er 1em == 16px en ef font-size: 18px; hefur verið skilgreint verður 1em == 18px.

Þegar reiknað er úr em gildum í elementum sem eiga sér foreldri með skilgreint em gildi eru þau margfölduð. Þetta getur oft valdið ruglingi þegar em er notað:

Núna gætu einhverjir spurt sig, af hverju í ósköpunum að hafa svona flækjustig í útreikningum á stærðum fyrir texta? Þetta er svona flókið þar sem við getum með þessu útbúið vefi þar sem vertical rhythm eða lóðréttur hrynjandi í texta er réttur. Öll bil og allar stærðir eru margfeldi af grunnstærð. Einnig gerir þetta það að verkum að notendur geta breytt stærð og við það skalast allt sem skilgreint er í hlutfallslegum einingum í réttum hlutföllum. Ef við skilgreinum stærðir eingöngu í pixlum gerist það ekki, og vefurinn okkar verður óaðgengilegur.

Ef við notum rem eininguna þurfum við ekki þessa margföldun í gegnum tréð; hún notar alltaf stærð rótar elements, font-size á <html>. Þar með getum við fengið kosti þess að skilgreina hlutfallslega án þess að þurfa að vera í sífellu að reikna hlutföll.

Ástæðan fyrir því að nota hlutfallslegar einingar er, eins og áður var nefnt, til að hjálpa okkur að láta vefinn okkar birtast rétt í þeim mýmörgu tækjum sem hann gæti verið skoðaður í. Ef við fastsetjum allar stærðir útfrá stórum skjám með háa upplausn munu einstaklingar sem skoða hann á minni skjám með minni upplausn lenda í vandræðum, og öfugt.

Skjá-prósentu einingar eru hlutfallslegar við stærð viewports sem er yfirleitt stærð vafragluggans.

Hægt er að nota þessar einingar bæði til að stýra stærðum á elementum eða öðru, t.d. leturstærð.