Veebisaidid koosnevad mitmest üksikust tükist, sealhulgas piltidest, tekstist ja erinevatest dokumentidest. Need dokumendid hõlmavad mitte ainult dokumente, millele saab linkida erinevatelt lehtedelt, näiteks PDF-failid, vaid ka dokumente, mida kasutatakse lehtede koostamiseks, näiteks HTML-dokumendid määrata lehe struktuur ja CSS-i (kaskaadiga stiilileht) dokumendid lehe välimuse dikteerimiseks. See artikkel süveneb CSS-i, kajastades seda, mis see on ja kus seda veebisaitidel täna kasutatakse.
CSSi ajalootund
CSS töötati esmakordselt välja 1997. aastal, et veebiarendajad saaksid määratleda nende loodud veebilehtede visuaalse ilme. Selle eesmärk oli võimaldada veebiprofessionaalidel sisu eraldada ja veebisaidi koodi visuaalse kujunduse struktuur, mis polnud enne seda aega olnud võimalik.
Struktuuri ja stiili eraldamine võimaldab HTML-il täita rohkem funktsiooni, millel see algselt põhines - märgistus sisu, ilma et peaksite muretsema lehe enda kujunduse ja paigutuse pärast. See on üldtuntud nimi lehele.
CSS-i areng
CSS sai populaarsuse alles umbes 2000. aastal, kui veebibrauserid hakkasid kasutama rohkem kui selle märgistuskeele põhifondi ja värvi aspekte. Tänapäeval toetavad kõik kaasaegsed brauserid kõiki CSS 1. taset, enamikku CSS 2. taset ja isegi enamikku CSS 3. taseme aspekte. Kuna CSS areneb edasi ja võetakse kasutusele uusi stiile, on veebibrauserid hakanud mooduleid juurutama mis toovad nendesse brauseritesse uue CSS-toe ja annavad veebidisaineritele töötamiseks võimsad uued stiilivahendid koos.
(Mitu) aastat varem oli valitud veebidisainereid, kes keeldusid CSS-i kasutamisest veebisaitide kujundamine ja arendamine, kuid see tava on tööstusest tänapäeval üle läinud. CSS on nüüd veebidisainis laialt kasutatav standard ja teil oleks raske leida tänapäeval mõnda selles valdkonnas töötavat inimest, kellel poleks sellest keelest vähemalt põhiteadmisi.
CSS on lühend
Nagu juba mainitud, tähistab CSS terminit "Cascading Style Sheet". Jaotame selle fraasi natuke lahti, et selgitada täielikumalt, mida need dokumendid teevad.
Sõna "stiilitabel" viitab dokumendile endale (nagu HTML, on CSS-failid tegelikult vaid tekstidokumendid, mida saab redigeerida mitmesuguste programmidega). Stiililehti on dokumentide kujundamisel kasutatud juba mitu aastat. Need on paigutuse tehnilised kirjeldused, olgu see siis trükitud või veebipõhine. Prindidisainerid on pikka aega kasutanud stiililehti, et tagada nende kujunduse printimine täpselt nende spetsifikatsioonidele vastavalt. Veebilehe stiilileht täidab sama eesmärki, kuid lisaks sellele on veebibrauserile ka öeldud, kuidas vaadatav dokument renderdada. Tänapäeval saavad kasutada ka CSS-i stiililehed meediapäringud lehe otsimise viisi muutmiseks erinevad seadmed ja ekraani suurused. See on uskumatult oluline, kuna see võimaldab ühte HTML-dokumenti renderdada erinevalt vastavalt sellele juurdepääsuks kasutatavale ekraanile.
Kaskaad on termini "kaskaadne stiilileht" tõeliselt eriline osa. Veebistiili leht on mõeldud kaskaadiks läbi selle lehe mitmete stiilide nagu jõgi üle kose. Jõe vesi tabab kose kõiki kive, kuid ainult need, mis asuvad põhjas, mõjutavad täpselt seda, kuhu vesi voolama hakkab. Sama lugu on kaskaadiga veebisaidi stiililehtedes.
Kujundaja stiililehed alistavad brauseri vaikelaadi
Igat veebilehte mõjutab vähemalt üks stiilileht, isegi kui veebidisainer ei rakenda ühtegi stiili. See stiilileht on kasutajaagendi stiilileht - tuntud ka kui vaikestiilid, mida veebibrauser lehe kuvamiseks kasutab, kui muid juhiseid pole esitatud. Näiteks on hüperlingid vaikimisi sinisega ja allajoonitud. Need stiilid pärinevad veebibrauseri vaikelaadilehelt. Kui veebidisainer annab aga muid juhiseid, peab brauser teadma, millised juhised on ülimuslikud. Kõigil brauseritel on oma vaikestiilid, kuid paljud neist vaikeväärtustest (näiteks sinised allajoonitud tekstilingid) on jagatud kõigi või enamiku suuremate brauserite ja versioonide vahel.
Veel ühe näite brauseri vaikimisi kohta on meie veebibrauseris vaikefont "Times New Roman"kuvatakse suuruses 16. Peaaegu ükski leht, mida me selle fontide perekonna ja suurusega ekraanil külastame, pole siiski olemas. Seda seetõttu, et kaskaad määratleb, et teised stiililehed, mille disainerid ise määravad, määratlevad uuesti fondi suurus ja pere, ületades meie veebibrauseri vaikesätted. Kõigil veebisaidi jaoks loodud stiililehtedel on spetsiifilisem kui brauseri vaikestiilidel, seega kehtivad need vaikesätted ainult siis, kui teie stiilitabel neid ei alista. Kui soovite, et lingid oleksid sinised ja allajoonitud, ei pea te midagi tegema, kuna see on vaikimisi kuid kui teie saidi CSS-fail ütleb, et lingid peaksid olema rohelised, siis see värv tühistab vaikesinise. Selles joones jääb joon alla, kuna te ei määranud teisiti.
Kus CSS-i kasutatakse?
CSS-i abil saab määratleda ka selle, kuidas veebilehed peaksid välja nägema, kui neid vaadatakse muus meediumis kui a veebibrauseris. Näiteks saate luua printimisstiili, mis määrab, kuidas veebileht peaks välja printima. Kuna veebilehtedel, näiteks navigeerimisnuppudel või veebivormidel, pole prinditud lehel mingit eesmärki, saab lehe printimisel nende alade "välja lülitamiseks" kasutada printimisstiili lehte. Ehkki paljudel saitidel pole see tavapärane tava, on printimisstiilide loomise võimalus võimas ja atraktiivne (meie versioonis kogemus - enamik veebiprofessionaale ei tee seda lihtsalt seetõttu, et saidi eelarve ulatus ei nõua seda täiendavat tööd teha).
Miks on CSS oluline?
CSS on üks võimsamaid tööriistu, mida veebidisainer õppida saab, sest sellega saate mõjutada kogu veebisaidi visuaalset välimust. Hästi kirjutatud stiililehti saab kiiresti uuendada ja võimaldada saitidel muuta seda, mis on visuaalselt esikohale seatud ekraan, mis omakorda näitab külastajatele väärtust ja fookust, ilma et oleks vaja muudatusi teha aluseks HTML-i märgistus.
CSS-i peamine väljakutse on see, et õppida on üsna vähe - ja kui brauserid muutuvad iga päev, siis mis täna hästi töötab ei pruugi homme enam mõtet olla, kuna uued stiilid saavad toetuse ja teised langevad või langevad ühel põhjusel poolehoiust välja või teine.
CSS-i õppekõver on seda väärt
Kuna CSS suudab kaskaadida ja kombineerida ning arvestades seda, kuidas erinevad brauserid direktiive erinevalt tõlgendada ja rakendada saavad, võib CSS-i õppida raskem kui tavalist HTML-i. CSS muutub ka brauserites viisil, mida HTML tõesti ei tee. Kui hakkate CSS-i kasutama, näete siiski, et stiililehtede jõu kasutamine annab teile uskumatu paindlikkuse veebilehtede paigutamisel ning nende välimuse ja olemuse määratlemisel. Teel kogub teile "trikkide kott" stiile ja lähenemisviise, mis on teie jaoks varem toiminud ja mille poole saate uuesti pöörduda, kui olete ehitada uusi veebilehti tulevikus.