Hvað er CSS og hvar er það notað?

Hvað eru Cascading Style Sheets?

Vefsíður samanstanda af nokkrum einstökum verkum, þar á meðal myndum, texta og ýmsum skjölum. Þessi skjöl innihalda ekki aðeins þau sem kunna að vera tengd við frá ýmsum vefsíðum, eins og PDF-skrár, en einnig skjölin sem eru notuð til að búa til síðurnar sjálfir, eins og HTML skjöl til að ákvarða uppbyggingu síðu og CSS (Cascading Style Sheet) skjöl að fyrirmæli um útlit síðu. Þessi grein mun grípa inn í CSS, sem nær yfir hvað það er og hvar það er notað á vefsíðum í dag.

A CSS History Lesson

CSS var fyrst þróað árið 1997 sem leið fyrir vefhönnuði til að skilgreina sjónræn útliti vefsíðna sem þeir voru að búa til. Það var ætlað að leyfa vefur sérfræðingar að skilja efni og uppbyggingu kóða vefsíðu frá sjónræn hönnun, eitthvað sem hafði ekki verið hægt fyrir þennan tíma.

Aðskilnaður uppbyggingar og stíl gerir HTML kleift að framkvæma meira af því hlutverki sem það var upphaflega byggð á - efnisyfirlit án þess að hafa áhyggjur af hönnun og skipulagi síðunnar sjálft, eitthvað sem almennt er þekkt sem "útlitið" af síðunni.

CSS náði ekki vinsældum fyrr en um 2000, þegar vafrar byrjuðu að nota meira en grunn letur og litaspjöll þessa markup tungumáls. Í dag styðja allar nútíma vafrar öll CSS Level 1, mest af CSS Level 2, og jafnvel flestum þáttum CSS Level 3. Þar sem CSS heldur áfram að þróast og nýjar stafir eru kynntar, hafa vafrar byrjað að innleiða einingar sem koma með nýjan CSS stuðning í þær vafra og gefa vefhönnuðum öflugum nýjum stíllartólum til að vinna með.

Á (mörgum) árum liðnum voru valin vefhönnuðir sem neituðu að nota CSS til að hanna og þróa vefsíður, en þessi æfing er allt frá því að vera í bransanum í dag. CSS er nú víða notaður staðall í vefhönnun og þú verður að vera harður þrýsta til að finna einhver sem vinnur í greininni í dag sem hafði ekki að minnsta kosti grunnskilning á þessu tungumáli.

CSS er skammstöfun

Eins og áður er getið, stendur hugtakið CSS fyrir "Cascading Style Sheet." Skulum brjóta þessa setningu niður svolítið til að útskýra betur hvað þessi skjöl gera.

Orðið "style sheet" vísar til skjalið sjálft (eins og HTML, CSS skrár eru í raun bara text skjöl sem hægt er að breyta með ýmsum forritum). Style blöð hafa verið notuð í skjalhönnun í mörg ár. Þau eru tækniforskriftir fyrir útlit, hvort sem þær eru prentaðar eða á netinu. Prenthönnuðir hafa lengi notað stílblöð til að tryggja að hönnun þeirra sé prentuð nákvæmlega eftir forskriftir. Stíll blað fyrir vefsíðu þjónar sömu tilgangi, en með aukinni virkni að segja einnig vafranum hvernig á að gera skjalið skoðað. Í dag geta CSS stílblöð einnig notað fjölmiðlafyrirspurnir til að breyta því hvernig síða leitar að mismunandi tækjum og skjástærð . Þetta er ótrúlega mikilvægt þar sem það leyfir að eitt HTML skjal sé skilað öðruvísi í samræmi við skjáinn sem notaður er til að fá aðgang að henni.

Cascade er mjög sérstakur hluti hugtaksins "cascading style sheet". Vefstíll lak er ætlað að fletta í gegnum röð af stílum á því blaði, eins og ána yfir foss. Vatnið í ánni slær alla steina í fossinn, en aðeins þau sem neðst eru, hafa áhrif á nákvæmlega hvar vatnið rennur. Hið sama gildir um Cascade í vefsíðustílblöðum.

Sérhver vefsíða er fyrir áhrifum af að minnsta kosti einu stílblaði, jafnvel þótt vefhönnuður noti ekki stíl. Þessi stíll lak er sniðmát notendaviðmiðsins - einnig þekkt sem sjálfgefin stíll sem vafrinn notar til að birta síðu ef engar aðrar leiðbeiningar eru gefnar. Til dæmis eru sjálfgefið tenglar stíll í bláum og þær eru undirstrikaðar. Þessar stíll kemur frá sjálfgefin stíl blaðsíðu vafrans. Ef vefhönnuður veitir aðrar leiðbeiningar þarf vafrinn þó að vita hvaða leiðbeiningar hafa forgang. Allir vafrar hafa eigin sjálfgefin stíl, en margir af þeim vanskilum (eins og bláu undirstrikaðar textatenglar) eru deilt yfir öllum eða flestum helstu vöfrum og útgáfum.

Fyrir annað dæmi um sjálfgefna vafra, í vefskoðaranum, er sjálfgefið leturgerðin " Times New Roman " birtist í stærð 16. Næstum enginn af þeim síðum sem ég heimsækir birtist í leturgerðinni og stærðinni. Þetta er vegna þess að Cascade skilgreinir að önnur stílblöðin, sem hönnuðirnir setja sig til, endurskilgreina leturstærðina og fjölskylduna og yfirgnæfa sjálfgefna vafrann. Sérhvert stílblöð sem þú býrð til fyrir vefsíðu mun hafa nákvæmni en sjálfgefin stillingar vafrans, þannig að þessar vangildingar gilda aðeins ef stíllinn þinn er ekki að hunsa þau. Ef þú vilt að tenglar séu bláar og undirstrikaðar þarftu ekki að gera neitt þar sem það er sjálfgefið, en ef CSS skráin þín segir að tenglar séu grænir þá mun þessi litur yfirbæta sjálfgefið bláa. Undirstrikunin verður áfram í þessu dæmi, þar sem þú gafst ekki upp annað.

Hvar er CSS notað?

CSS getur einnig notað til að skilgreina hvernig vefsíður eigi að líta þegar þær eru skoðaðar í öðrum miðlum en vafra. Til dæmis getur þú búið til prenta stíl lak sem mun skilgreina hvernig vefsíðan ætti að prenta út. Vegna þess að vefsíðum, eins og siglingarhnappar eða vefur gerðir, hafa engin tilgang á prentuðu blaðinu, er hægt að nota Print Style Sheet til að slökkva á þessum sviðum þegar blaðsíða er prentuð. Þó að það sé ekki mjög algengt á mörgum stöðum, þá er möguleiki á að búa til prentstikblöðin öflug og aðlaðandi (í mínum huga - flestir vefur sérfræðingar gera þetta ekki einfaldlega vegna þess að kostnaðarhámark vefsvæðisins kallar ekki á að þessi viðbótarvinna sé að gera ).

Af hverju er CSS mikilvægt?

CSS er eitt af öflugustu verkfærunum sem vefhönnuður getur lært af því að með því getur þú haft áhrif á alla sjónræna útliti vefsíðunnar. Vel skrifaðar stílblöð geta verið uppfærðar fljótt og leyfa síðum að breyta því sem er forgangs sjónrænt á skjánum, sem síðan sýnir gildi og áherslu á gesti, án þess að breytingar þurfi að verða gerðar á undirliggjandi HTML markup.

Helstu áskorun CSS er sú að það er frekar hluti af því að læra - og með því að breyta vöfrum á hverjum degi, það sem virkar vel í dag getur ekki skilið í morgun þar sem nýjar stílar verða studdar og aðrir eru fallnir eða falla úr hag af einum ástæðum eða öðrum .

Vegna þess að CSS getur cascade og sameina, og íhuga hvernig mismunandi vöfrum geta túlkað og framfylgt tilskipunum á annan hátt, getur CSS verið erfiðara en einfaldan HTML til að læra. CSS breytist einnig í vafra þannig að HTML virki ekki. Þegar þú hefur byrjað að nota CSS, þá munt þú sjá að virkja kraft stílblöðanna mun gefa þér ótrúlega sveigjanleika í því hvernig þú setur upp vefsíðum og skilgreinir útlit þeirra. Á leiðinni verður þú að sameina "pokann af bragðarefur" af stílum og aðferðum sem hafa starfað fyrir þig í fortíðinni og sem þú getur snúið aftur til þegar þú býrð til nýjar vefsíður í framtíðinni.

Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 7/5/17,