Ano ang Cascading Style Sheets?
Ang mga website ay binubuo ng isang bilang ng mga indibidwal na piraso, kabilang ang mga larawan, teksto, at iba't ibang mga dokumento. Ang mga dokumentong ito ay hindi lamang nagsasama ng mga maaaring iugnay sa iba't ibang mga pahina, tulad ng mga PDF file, kundi pati na rin ang mga dokumento na ginagamit upang buuin ang mga pahina mismo, tulad ng mga dokumento ng HTML upang matukoy ang istraktura ng isang pahina at CSS (Cascading Style Sheet) na mga dokumento upang idikta ang hitsura ng isang pahina. Ang artikulong ito ay maghanap ng CSS, na sumasakop sa kung ano ito at kung saan ito ginagamit sa mga website ngayon.
Isang Aralin sa Kasaysayan ng CSS
Ang CSS ay unang binuo noong 1997 bilang isang paraan para sa mga web developer upang tukuyin ang visual na hitsura ng mga pahina ng web na kanilang nililikha. Nilayon upang pahintulutan ang mga propesyonal sa web na paghiwalayin ang nilalaman at istraktura ng code ng isang website mula sa visual na disenyo, isang bagay na hindi naging posible bago ang oras na ito.
Ang paghihiwalay ng istraktura at estilo ay nagbibigay-daan sa HTML upang maisagawa ang higit pa sa mga function na ito ay orihinal na batay sa - ang markup ng nilalaman, nang hindi mag-alala tungkol sa disenyo at layout ng pahina mismo, isang bagay na karaniwang kilala bilang ang "hitsura at pakiramdam" ng pahina.
Ang CSS ay hindi nakakuha ng katanyagan hanggang sa paligid ng 2000, nang ang mga web browser ay nagsimulang gumamit ng higit sa pangunahing mga aspeto ng font at kulay ng wikang ito ng markup. Ngayon, sinusuportahan ng lahat ng mga modernong browser ang lahat ng CSS Level 1, karamihan sa CSS Level 2, at kahit na karamihan sa aspeto ng CSS Level 3. Habang ang CSS ay patuloy na nagbabago at ang mga bagong estilo ay ipinakilala, ang mga web browser ay nagsimula na magpatupad ng mga module na nagdadala ng bagong suporta sa CSS sa mga browser na iyon at binibigyan ang mga web designer ng mga makapangyarihang bagong mga tool sa estilo na gagana.
Sa (maraming) taon na ang nakaraan, may mga piling mga web designer na tumangging gumamit ng CSS para sa disenyo at pagpapaunlad ng mga web site, ngunit ang pagsasanay na iyon ay halos wala na sa industriya ngayon. Ang CSS ngayon ay isang malawakang ginagamit na pamantayan sa disenyo ng web at ikaw ay napigipit na makahanap ng kahit sino na nagtatrabaho sa industriya ngayon na walang hindi bababa sa isang pangunahing pag-unawa sa wikang ito.
Ang CSS ay isang Pagpapaikli
Tulad ng nabanggit na, ang terminong CSS ay kumakatawan sa "Cascading Style Sheet." Let us break this phrase down a bit upang mas lubos na ipaliwanag kung ano ang mga dokumentong ito.
Ang salitang "style sheet" ay tumutukoy sa dokumento mismo (tulad ng HTML, mga file ng CSS ay talagang mga tekstong dokumento lamang na maaaring mai-edit ng iba't ibang mga programa). Ginamit ang mga style sheet para sa disenyo ng dokumento para sa maraming taon. Ang mga ito ay ang teknikal na mga pagtutukoy para sa isang layout, kung naka-print o online. Ang mga taga-disenyo ng print ay may matagal na ginamit na mga style sheet upang matiyak na ang kanilang mga disenyo ay naka-print nang eksakto sa kanilang mga pagtutukoy. Naghahain ang isang estilo ng sheet para sa isang web page ng parehong layunin, ngunit may idinagdag na pag-andar na nagsasabi din sa web browser kung paano i-render ang dokumento na tiningnan. Sa ngayon, maaari ring gamitin ng mga style sheet ng CSS ang mga query sa media upang baguhin ang paraan ng hitsura ng isang pahina para sa iba't ibang mga device at laki ng screen . Ito ay hindi kapani-paniwalang mahalaga dahil pinapayagan nito ang isang solong dokumentong HTML na nai-render nang naiiba ayon sa screen na ginagamit upang i-access ito.
Ang Cascade ay ang talagang espesyal na bahagi ng terminong "cascading style sheet". Ang isang web style sheet ay inilaan upang mag-cascade sa pamamagitan ng isang serye ng mga estilo sa sheet na iyon, tulad ng isang ilog sa isang waterfall. Ang tubig sa ilog ay pumupunta sa lahat ng mga bato sa talon, ngunit ang mga nasa ilalim lamang ay nakakaapekto kung saan mismo ang tubig ay dumadaloy. Ang parehong ay totoo sa cascade sa mga style sheets ng website.
Ang bawat web page ay apektado ng hindi bababa sa isang style sheet, kahit na ang taga-disenyo ng web ay hindi nalalapat ang anumang mga estilo. Ang style sheet na ito ay ang style sheet ng user agent - na kilala rin bilang mga default na estilo na gagamitin ng web browser upang magpakita ng isang pahina kung walang ibang mga tagubilin ay ibinigay. Halimbawa, sa pamamagitan ng mga default na hyperlink ay naka-istilong asul at naka-underline ito. Ang mga estilo ay mula sa default na style sheet ng web browser. Kung ang taga-disenyo ng web ay nagbibigay ng iba pang mga tagubilin, gayunpaman, ang browser ay kailangang malaman kung aling mga tagubilin ang may nauna. Ang lahat ng mga browser ay may sariling mga estilo ng default, ngunit marami sa mga default (tulad ng mga asul na nakasalalay na mga link ng teksto) ay ibinabahagi sa lahat o karamihan sa mga pangunahing browser at bersyon.
Para sa isa pang halimbawa ng default na browser, sa aking web browser, ang default na font ay " Times New Roman " na ipinapakita sa laki na 16. Halos wala sa mga pahinang binibisita ko ang ipinapakita sa font ng pamilya at laki, gayunpaman. Ito ay dahil ang cascade ay tumutukoy na ang pangalawang estilo ng sheet, na itinakda ng mga designer mismo, upang muling tukuyin ang laki ng font at pamilya, na pinapalitan ang default ng aking web browser. Ang anumang mga style sheet na iyong nilikha para sa isang web page ay magkakaroon ng higit na pagtitiyak kaysa sa mga default na estilo ng browser, kaya ang mga default na ito ay nalalapat lamang kung ang iyong style sheet ay hindi pinapalitan ang mga ito. Kung nais mo ang mga link na maging asul at nakasalungguhit, hindi mo na kailangang gumawa ng anumang bagay dahil ito ang default, ngunit kung ang CSS file ng iyong site ay nagsasabing ang mga link ay dapat na berde, ang kulay na iyon ay sasapaw sa default na asul. Ang salungguhit ay mananatili sa halimbawang ito, dahil hindi mo tinukoy kung hindi man.
Saan ginagamit ang CSS?
Maaari ring gamitin ang CSS upang tukuyin kung paano dapat tumingin ang mga pahina ng web kapag tiningnan sa ibang media kaysa sa isang web browser. Halimbawa, maaari kang lumikha ng isang naka-print na estilo ng sheet na tumutukoy kung paano dapat i-print ang web page. Dahil ang mga item sa web page tulad ng mga pindutan sa nabigasyon o mga form sa web ay walang layunin sa naka-print na pahina, maaaring gamitin ang isang Print Style Sheet upang "i-off" ang mga lugar na iyon kapag naka-print ang isang pahina. Habang hindi talaga isang pangkaraniwang kasanayan sa maraming mga site, ang pagpipilian upang lumikha ng estilo ng sheet ng pag-print ay malakas at kaakit-akit (sa aking karanasan - karamihan sa mga propesyonal sa web ay hindi ginagawa ito dahil lamang sa saklaw ng isang badyet ng site ay hindi tumawag para sa karagdagang gawain na ito upang magawa ).
Bakit mahalaga ang CSS?
Ang CSS ay isa sa mga pinaka-makapangyarihang mga tool na maaaring matutunan ng isang taga-disenyo ng web dahil sa ito maaari mong maapektuhan ang buong visual na hitsura ng isang website. Maaaring ma-update nang mabilis ang mga mahusay na nakasulat na estilo ng sheet at payagan ang mga site na baguhin kung ano ang nauna nang nakikita sa screen, na kung saan naman ay nagpapakita ng halaga at naka-focus sa mga bisita, nang walang anumang mga pagbabago na kailangang gawin sa pinagbabatayan markup ng HTML.
Ang pangunahing hamon ng CSS ay ang pagkakaroon ng kaunti upang matuto - at may mga browser na nagbabago araw-araw, kung ano ang gumagana nang maayos sa araw na ito ay hindi maaaring magkaroon ng kahulugan bukas bilang mga bagong estilo maging suportado at ang iba ay bumaba o mahulog sa labas ng pabor para sa isang kadahilanan o iba pa .
Dahil ang CSS ay maaaring mag-cascade at pagsamahin, at isinasaalang-alang kung paano naiiba ang iba't ibang mga browser at ipatupad ang mga direktiba, ang CSS ay maaaring maging mas mahirap kaysa sa simpleng HTML upang makabisado. Nagbabago din ang CSS sa mga browser sa isang paraan na talagang hindi gumagana ang HTML. Sa sandaling simulan mo ang paggamit ng CSS, gayunpaman, makikita mo na ang paggamit ng lakas ng mga style sheet ay magbibigay sa iyo ng unbelievable flexibility sa kung paano ka mag-layout ng mga web page at tukuyin ang kanilang hitsura at pakiramdam. Sa tabi ng daan, magtitipon ka ng isang "bag ng mga trick" ng mga estilo at mga diskarte na nagtrabaho para sa iyo sa nakaraan at kung saan maaari kang bumalik muli habang nagtatayo ka ng mga bagong webpage sa hinaharap.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 7/5/17,