CSS, o Cascading Style Sheets, ang ginagamit sa modernong disenyo ng website upang ilapat ang visual na hitsura sa isang pahina. Habang ang HTML ay lumilikha ng istraktura ng pahina at maaaring hawakan ng Javascript ang pag-uugali, ang hitsura at pakiramdam ng isang website ay ang domain ng CSS. Pagdating sa mga estilo na ito, sila ay madalas na inilalapat gamit ang mga panlabas na estilo ng sheet, ngunit maaari mo ring ilapat ang mga estilo ng CSS sa isang solong, tiyak na elemento sa pamamagitan ng paggamit ng mga tinatawag na "mga inline na estilo."
Ang mga estilo ng inline ay mga estilo ng CSS na inilalapat nang direkta sa HTML ng pahina. Mayroong parehong mga pakinabang at disadvantages sa diskarte na ito. Una, tingnan kung eksakto kung paano isinulat ang mga estilo na ito.
Paano Sumulat ng isang Inline na Estilo
Upang lumikha ng isang estilo ng inline na CSS, magsisimula ka sa pagsulat ng iyong estilo ng ari-arian na katulad ng kung paano mo naisin sa isang style sheet, ngunit kailangan nito na maging isang buong linya. Paghiwalayin ang maramihang mga katangian na may isang tuldok-tulsa tulad ng sa isang style sheet.
background: #ccc; kulay: #fff; border: solid black 1px;
Ilagay ang linya ng mga estilo sa loob ng estilo ng katangian ng elemento na gusto mong i-istilong. Halimbawa, kung nais mong ilapat ang estilo na ito sa isang talata sa iyong HTML, ang sangkap na magiging ganito:
Sa halimbawang ito, ang partikular na talata ay lilitaw na may isang kulay-abo na background (na kung saan ay magbibigay ng #ccc), itim na teksto (mula sa # 000 na kulay), at may isang 1-pixel solid black border sa paligid ng lahat ng apat na panig ng talata .
Mga Bentahe ng Mga Estilo ng Inline
Salamat sa kaskad ng mga estilo ng inline ng Cascading Style Sheet na may pinakamataas na precedence o pagtitiyak sa isang dokumento. Ang ibig sabihin nito ay ilalapat ang mga ito kahit na ano pa ang dictated sa iyong panlabas na stylesheet (na may isang eksepsiyon ay anumang mga estilo na binigyan ng mahalagang deklarasyon na sheet, ngunit ito ay hindi isang bagay na dapat gawin sa mga site ng produksyon kung ito maaaring iwasan).
Ang tanging mga estilo na may mas mataas na precedence kaysa sa mga inline na estilo ay mga estilo ng gumagamit na inilalapat ng mga mambabasa mismo. Kung nagkakaproblema ka sa pagkuha ng iyong mga pagbabago upang ilapat, maaari mong subukan ang pagtatakda ng isang estilo ng inline sa elemento. Kung hindi ka pa nagpapakita ng mga estilo gamit ang estilo ng inline, alam mo na may iba pang nangyayari.
Ang mga estilo ng inline ay madali at mabilis na idaragdag at hindi mo kailangang mag-alala tungkol sa pagsulat ng tamang tagapili ng CSS dahil ikaw ay nagdaragdag ng mga estilo ng direkta sa elemento na gusto mong baguhin (ang elementong iyon ay pinapalitan ang tagapili na isusulat mo sa isang panlabas na style sheet ). Hindi mo kailangang gumawa ng isang buong bagong dokumento (tulad ng mga panlabas na style sheet) o i-edit ang isang bagong elemento sa ulo ng iyong dokumento (tulad ng mga panloob na style sheet). Nagdagdag ka lamang ng estilo ng katangian na wasto sa halos bawat elemento ng HTML. Ang mga ito ay ang lahat ng mga kadahilanan kung bakit maaaring matukso kang gumamit ng mga estilo ng inline, ngunit dapat mo ring malaman ang ilang mga napaka makabuluhang disadvantages sa diskarteng ito.
Mga Disadvantages ng Mga Estilo ng Inline
Dahil ang mga estilo ng inline ang mga ito ay ang pinaka-tiyak sa kaskad, maaari silang over-ride bagay na hindi mo nilayon sa kanila. Sila rin ay bumabagsak sa isa sa mga pinaka-makapangyarihang mga aspeto ng CSS - ang kakayahang mag-istilong maraming at maraming mga web page mula sa isang gitnang file ng CSS upang gawing mas madaling pamahalaan ang mga update sa hinaharap at estilo.
Kung kailangan mo lamang gumamit ng mga estilo ng inline, ang iyong mga dokumento ay mabilis na magiging namamaga at napakahirap mapanatili. Ito ay dahil ang mga inline na estilo ay dapat ilapat sa bawat sangkap na gusto mo sa kanila. Kaya kung nais mo ang lahat ng iyong mga talata na magkaroon ng font na pamilya "Arial", kailangan mong magdagdag ng isang inline na estilo sa bawat
na tag sa iyong dokumento. Nagdadagdag ito ng parehong work maintenance para sa taga-disenyo at pag-download ng oras para sa mambabasa dahil kakailanganin mong baguhin ito sa bawat pahina sa iyong site upang baguhin ang font na pamilya. Bilang kahalili, kung gumamit ka ng isang hiwalay na stylesheet, maaari mong baguhin ito sa isang lugar at tanggapin ang bawat pahina ng update na iyon.
Totoo, ito ay isang hakbang pabalik sa disenyo ng web - bumalik sa mga araw ng tag na !
Ang isa pang disbentaha sa mga estilo ng inline ay imposibleng mag-estilo ng mga hindi tunay na elemento at -classes sa kanila. Halimbawa, may mga estilo ng panlabas na estilo, maaari mong estilo ang binisita, hover, aktibo, at kulay ng link ng isang anchor tag, ngunit may estilo ng inline, ang lahat ng maaari mong estilo ay ang link mismo, sapagkat iyon ang naka-attach sa estilo ng katangian .
Sa huli, inirerekumenda namin na huwag gumamit ng mga estilo ng inline para sa iyong mga web page dahil nagdudulot ito ng mga problema at ginagawang mapanatili ang mga pahina ng mas maraming trabaho. Ang tanging oras na ginagamit namin ang mga ito ay kapag gusto naming suriin ang isang estilo ng mabilis sa panahon ng pag-unlad. Sa sandaling nakuha namin ito na naghahanap ng tama para sa isang sangkap, ilipat namin ito sa aming panlabas na style sheet.
Orginal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard.