Hvernig á að skrifa töflulausa CSS síðu fyrir byrjendur.

Töflulausar síður, eða hvað sem við viljum kalla það virka þannig að við skipum innihaldi síðunnar inní svokölluð lög (div tög). Helstu kostir töflulausra síðna er t.d. hvað vafrarar eru miklu fljótari að lesa þær, þær minnka álag á vefþjóninn (sá sem skoðar síðuna þarf bara að sækja CSS einu sinni) þetta veldur því að fólki finnst þægilegra að skoða vefinn þinn og getur þar af leiðandi eytt meiri tíma á honum.


Það sem maður byrjar á því að gera er bara html markup'ið, ekki hugsa neitt um útlit (eða þannig geri ég það a.m.k.). Skipar öllu upp eins og þú myndir vilja hafa þetta ef þú værir að skoða síðu með milljón ára gömlum vafrara.
Setur efnisyfirlit fyrst, síðan kemur víðtækt og sértækt neðst, og ekki reyna að troða of miklu á eina síðu því það verður bara leiðinlegra að vinna með það síðar (og minnir mig of mikið á töflur :P). Ok, þá veistu hvernig síðan kemur út hjá einhverjum með löngu úreltan vafrara.

Snúum okkur aftur að CSS…
Það eina sem sést í markup'inu okkar sem segir eitthvað til um útlit síðunnar er þetta:


og það sem sést í sjálfu innihaldi síðunnar…


Auðvitað er hægt að láta id=“” og class=“” á *nánast* (vil ekkert ábyrgjast) öll tög.

Vinnum aðeins með þetta. Við höfum id, sem ég vil þýða einkenni, þ.e. ef við höfum t.d. wrapper, eitthvað til að halda utan um allt efni, gefum við honum einkennið: wrapper/wrap/efni eða hvað annað sem okkur dettur í hug, samt gott að hafa það lýsandi svo að auðveldara sé að breyta seinna meir.

Class, eða hópar (betra orð, einhver?) er t.d. ef þú ert með marga hluti sem þú vilt hafa eins. T.d. ef þú vilt hafa tilvitnanir, þá seturðu class=“tilvitnun” og þá breytirðu bara stílsíðunni til að breyta forminu á öllum tilvitnunum.

Helstu tög í html sem þú munt væntanlega fatta uppá fyrst núna eða fatta uppá hvernig á að nota eru t.d. div (lag), span (virkar svipað og div nema er í línu), h1…(fyrirsagnir eru mjög góðir vinir manns aftur), p (ótrúlegt hvað er hægt að nota þetta), ol/ul (listar hafa líka notagildi, og maður skammast sín ekki lengur fyrir leiðinlegt útlit) og svona má lengi telja.

Í stílsíðunni eru óteljandi möguleikar, ég ætla aðallega að fara í hvernig síðan er uppbyggð, en svo verðið þið bara að nota google til að fá eitthvað um þessa ótrúlega miklu möguleika :)

Í fyrsta lagi, einkennin… Í stílsíðunni er einkenni táknað með # þessu merki.
Dæmi,
Þessi kóði myndi láta einkenni vera lengst til hægri í vafraraglugganum og allur texti þar inní yrði blár með litlu letri.

hópar:
Þ.e. það er bæði hægt að hafa .hópur til að hópurinn nái yfir allar gerðir taga og líka ákveða yfir hvað þetta nær.

Ok, ég sagði eitthvað áðan um að fyrirsagnir gætu orðið flottar…
Það er nefnilega líka hægt að breyta útlitinu á öllum töggum af einhverri tegund.
Þetta gefur fyrirsögninni aðeins skemmtilegra yfirbragð (það er líka hægt að skipta út texta fyrir mynd, en ég fer ekki í það hér).
Annað sem er skemmtilegt að gera (ekki hægt með plain html rusty) er að nota brotnar línur.
Ok, núna er ‘falleg’ 1px þykk brotin svört lína undir fyrirsögnunum okkar… Ekki slæmt (flottara en venjulegt).

Ég vona að þetta hafi hjálpað einhverjum. Það væri líka gaman ef einhver myndi skrifa um hverjir helstu möguleikar innan CSS skjalsins eru.
Ef einhver er í vandræðum vil ég líka benda á að Google veit allt, ef maður bara veit hvernig á að spyrja hann :)