Paano Gumawa ng isang Panlabas na Estilo ng Sheet

Paggamit ng CSS Site Wide

Ang mga website ay isang kumbinasyon ng estilo at istraktura, at sa web ngayon, ito ay isang pinakamahusay na kasanayan upang panatilihin ang mga dalawang aspeto ng isang site na hiwalay mula sa bawat isa.

Ang laging HTML ay kung ano ang nagbibigay ng isang site na may istraktura nito. Sa mga unang araw ng Web, naglalaman din ang HTML ng estilo ng impormasyon. Ang mga elemento na tulad ng tag na ay naiipit sa buong HTML code, pagdaragdag ng hitsura at pakiramdam ng impormasyon kasama ng impormasyon sa istruktura. Ang kilusan ng mga pamantayan sa web ay nagtulak sa amin na baguhin ang praktis na ito at sa halip itulak ang lahat ng impormasyon ng istilo sa CSS o Cascading Style Sheets. Ang pagkuha ng karagdagang hakbang na ito, ang mga kasalukuyang rekomendasyon ay ginagamit mo ang tinatawag na "panlabas na style sheet" para sa mga pangangailangan ng iyong website.

Mga Kalamangan at Disadvantages ng Mga Panlabas na Estilo ng Sheet

Isa sa mga pinakamahusay na bagay tungkol sa Cascading Style Sheets ay maaari mong gamitin ang mga ito upang panatilihing pare-pareho ang iyong buong site. Ang pinakamadaling paraan upang gawin ito ay i-link o i-import ang isang panlabas na style sheet . Kung gagamitin mo ang parehong panlabas na style sheet para sa bawat pahina ng iyong site, maaari mong tiyakin na ang lahat ng mga pahina ay magkakaroon ng parehong estilo. Maaari mo ring gawing mas madali ang mga pagbabago para sa hinaharap. Dahil ang bawat pahina ay gumagamit ng parehong panlabas na style sheet, ang anumang pagbabago sa sheet na iyon ay makakaapekto sa bawat pahina ng site. Ito ay mas mahusay kaysa sa pagbabago ng bawat pahina nang isa-isa!

Mga Bentahe ng Mga Panlabas na Estilo ng Sheet

  • Maaari mong kontrolin ang hitsura at pakiramdam ng ilang mga dokumento nang sabay-sabay.
    • Ito ay lalong kapaki-pakinabang kung nagtatrabaho ka sa isang pangkat ng mga tao upang lumikha ng iyong web site. Maraming mga panuntunan sa estilo ay maaaring maging mahirap matandaan, at habang maaaring may naka-print na gabay sa estilo, ito ay hindi mabisa at nakakapagod na patuloy na pag-flip sa pamamagitan nito upang matukoy kung ang teksto ng halimbawa ay isulat sa 12 puntos Arial font, o 14 point courier. Sa pamamagitan ng pagkakaroon ng lahat ng bagay sa isang lugar, at dahil sa lugar na iyon ay din kung saan mo gagawin ang mga pagbabago, maaari mong gawing mas madali ang pagpapanatili.
  • Maaari kang lumikha ng mga klase ng mga estilo na maaaring magamit sa maraming iba't ibang mga elemento ng HTML .
    • Kung madalas kang gumamit ng ilang mga estilo ng font upang bigyang diin ang iba't ibang mga bagay sa iyong pahina, maaari mong gamitin ang isang katangian ng klase na iyong itinakda sa iyong estilo ng sheet upang makuha ang hitsura at pakiramdam na ito, sa halip na tukuyin ang isang partikular na estilo para sa bawat halimbawa ng diin.
  • Madali mong mai-grupo ang iyong mga estilo upang maging mas mahusay.
    • Ang lahat ng mga paraan ng pagsasama na magagamit sa CSS ay maaaring gamitin sa mga panlabas na style sheet, at nagbibigay ito sa iyo ng higit na kontrol at kakayahang umangkop sa iyong mga pahina.

Mga Disadvantages ng Mga Panlabas na Estilo ng Sheet

  • Maaaring dagdagan ng mga estilo ng panlabas na estilo ang oras ng pag-download, lalo na kung malaki ang mga ito. Dahil ang CSS file ay isang hiwalay na dokumento na dapat ma-load, ito ay makakaapekto sa pagganap upang maisagawa ang pag-download na iyon.
  • Ang mga estilo ng panlabas na estilo ay mabilis na napakalaki dahil mahirap sabihin kung kailan hindi na ginagamit ang estilo dahil hindi ito natanggal kapag tinanggal ang pahina. Ang tamang pamamahala ng iyong mga file sa CSS ay mahalaga, lalo na kung maraming tao ang nagtatrabaho sa parehong file.
  • Kung mayroon ka lamang isang website na may isang pahina, ang pagkakaroon ng panlabas na file para sa CSS ay maaaring hindi kinakailangan dahil mayroon ka lamang na isang pahina sa estilo. Marami sa mga benepisyo ng panlabas na CSS ay nawala kapag mayroon ka lamang isang solong pahina ng site.

Paano Gumawa ng isang Panlabas na Estilo ng Sheet

Ang mga panlabas na estilo ng sheet ay nilikha gamit ang isang katulad na syntax upang mag-dokumento ng mga style style sheet. Gayunpaman, ang kailangan mo lamang isama ang tagapili at ang deklarasyon. Tulad ng sa isang sheet-style na sheet ng dokumento, ang syntax para sa isang panuntunan ay:

selector {property: value;}

I-save ang mga panuntunang ito sa isang text file gamit ang extension css. Hindi ito kinakailangan, ngunit ito ay isang mahusay na ugali upang makakuha ng, upang maaari mong agad na makilala ang iyong style sheet sa isang listahan ng direktoryo.

Sa sandaling mayroon kang isang style sheet na dokumento, kailangan mong i-link ito sa iyong mga pahina sa Web . Magagawa ito sa dalawang paraan:

  1. Pag-uugnay
    1. Upang mai-link ang isang style sheet, gagamitin mo ang HTML tag. Ito ay may mga katangian ng rel , uri , at href . Ang katangian ng rel ay nagsasabi kung ano ang iyong nagli-link (sa kasong ito isang stylesheet), ang uri ay tumutukoy sa Uri ng MIME para sa browser, at ang href ang path sa .css file.
  2. Pag-import
    1. Gagamitin mo ang isang na-import na sheet ng estilo sa loob ng isang sheet ng estilo ng antas ng dokumento upang maaari mong i-import ang mga katangian ng isang panlabas na style sheet habang hindi nawawala ang anumang partikular na dokumento. Tinatawag mo ito sa katulad na paraan sa pagtawag sa naka-link na style sheet, dapat lamang itong tawagin sa loob ng deklarasyon ng estilo ng antas ng dokumento. Maaari kang mag-import ng maraming panlabas na style sheet na kailangan mo upang mapanatili ang iyong Web site.

Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 8/8/17