Inline, naka-embed, at panlabas na style sheet: Narito ang kailangan mong malaman
Ang pag-unlad ng website na pang-harap ay madalas na kinakatawan bilang 3-legged stool. Ang mga binti ay ang mga sumusunod:
- HTML para sa istraktura ng isang site;
- CSS para sa mga visual na estilo;
- Javascript para sa pag-uugali.
Ang ikalawang binti ng bangkito na ito, CSS o Cascading Style Sheets, ay ang hinahanap natin dito ngayon. Sa partikular, nais naming tugunan ang 3 uri ng estilo na maaari mong idagdag sa isang dokumento.
- Mga estilo ng inline
- Naka-embed na estilo
- Mga panlabas na estilo
Ang bawat isa sa mga uri ng mga estilo ng CSS ay may mga benepisyo at mga kakulangan nito, kaya't kumuha ng mas malalim na pagtingin sa bawat isa sa kanila nang isa-isa.
Inline Styles
Ang mga estilo ng inline ay mga estilo na nakasulat nang direkta sa tag sa HTML na dokumento. Ang mga estilo ng inline ay nakakaapekto lamang sa partikular na tag na inilalapat nila. Narito ang isang halimbawa ng estilo ng inline na inilapat sa isang standard na link, o anchor, tag:
Ang panuntunan ng CSS na ito ay magpapasara sa standard na salungguhit na palamuti ng teksto ng isang link na ito. Gayunpaman, hindi ito magbabago ng anumang iba pang link sa pahina. Ito ay isa sa mga limitasyon ng mga estilo ng inline. Dahil nagbabago lamang ang mga ito sa isang partikular na item, kakailanganin mong iwasto ang iyong HTML sa mga estilo na ito upang makamit ang isang aktwal na disenyo ng pahina. Iyon ay hindi isang pinakamahusay na kasanayan. Sa katunayan, isang hakbang ang inalis mula sa mga araw ng mga tag na "font" at ang halo ng istraktura at estilo sa mga web page.
Ang mga estilo ng inline ay mayroon ding napakataas na pagtitiyak.
Ito ay nagpapahirap sa kanila na patungan ang iba pang mga di-inline na estilo. Halimbawa, kung gusto mong gumawa ng isang site na tumutugon at baguhin kung paano nakikita ng isang elemento ang ilang mga breakpoint sa pamamagitan ng paggamit ng mga query sa media , ang mga inline na estilo sa isang elemento ay gagawin itong napakahirap gawin.
Sa huli, ang mga inline na estilo ay talagang angkop lamang kapag ginamit nang napakaliit.
Sa katunayan, bihira kong gamitin ang mga inline na estilo sa aking mga webpage.
Mga naka-embed na Estilo
Ang naka-embed na estilo ay mga estilo na naka-embed sa pinuno ng dokumento. Ang mga naka-embed na estilo ay nakakaapekto lamang sa mga tag sa pahina na naka-embed na nila. Muli, ang diskarte na ito ay negatibo sa isa sa mga lakas ng CSS. Dahil ang bawat pahina ay may estilo sa
, kung nais mong gumawa ng pagbabago sa sitwasyon, tulad ng pagpapalit ng kulay ng mga link mula sa pula hanggang berde, kailangan mong gawin ang pagbabagong ito sa bawat pahina, dahil ang bawat pahina ay gumagamit ng naka-embed na style sheet. Ito ay mas mahusay kaysa sa mga estilo ng inline, ngunit may problema pa rin sa maraming pagkakataon.
Mga estilo na idinagdag sa
ng isang dokumento ay nagdaragdag din ng isang malaking halaga ng markup code sa pahinang iyon, na maaari ring gawing mas mahirap na pamahalaan ang pahina sa hinaharap.
Ang benepisyo ng mga naka-embed na estilo ng sheet ay ang pag-load kaagad sa pahina mismo, sa halip ng pag-load ng iba pang mga panlabas na file na mai-load. Ito ay maaaring maging isang benepisyo mula sa bilis ng pag-download at pananaw ng pagganap .
Mga Panlabas na Estilo ng Sheet
Karamihan sa mga website ngayon ay gumagamit ng mga panlabas na style sheet. Mga panlabas na estilo ay mga istilo na nakasulat sa isang hiwalay na dokumento at pagkatapos ay naka-attach sa iba't ibang mga dokumento sa web. Ang mga panlabas na style sheet ay maaaring makaapekto sa anumang dokumento na nakalakip sa mga ito, na nangangahulugang kung mayroon kang 20-pahinang website kung saan ang bawat pahina ay gumagamit ng parehong style sheet (karaniwang ito kung paano ito nagagawa), maaari kang gumawa ng visual na pagbabago sa bawat isa ng mga pahinang iyon sa pamamagitan lamang ng pag-edit ng style sheet na iyon.
Ginagawa ang pang-matagalang pamamahala ng site nang mas madali.
Ang downside sa mga panlabas na estilo ng sheet ay na nangangailangan sila ng mga pahina upang makuha at i-load ang mga panlabas na mga file. Hindi magagamit ng bawat pahina ang bawat estilo sa sheet ng CSS, kaya maraming mga pahina ang makakapag-load ng isang mas malaking pahina ng CSS kaysa sa aktwal na kailangan.
Habang totoo na mayroong isang hit ng pagganap para sa panlabas na mga file ng CSS, maaari itong tiyak na mababawasan. Sa totoo lang, ang mga file ng CSS ay mga tekstong file lamang, kaya karaniwang hindi sila masyadong malaki upang magsimula sa. Kung ang iyong buong site ay gumagamit ng 1 CSS file, makakakuha ka rin ng benepisyo ng dokumentong ini-cache pagkatapos na ito ay na-load sa simula.
Nangangahulugan ito na maaaring magkaroon ng isang bahagyang pagganap ng hit sa unang pahina ng ilang mga pagbisita, ngunit ang mga susunod na pahina ay gagamit ng naka-cache na CSS file, kaya ang anumang hit ay negated. Ang mga panlabas na CSS file ay kung paano ko binuo ang lahat ng aking mga webpage.