Ipinaliliwanag kung bakit hindi dapat gawin ang estilo nang direkta sa HTML

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Napansin ko kamakailan na ang ay hindi na ginagamit mula sa html ayon sa site na ito . Mula sa sagot na ito sa Stack Overflow , ang kapalit ng marquee ay ginawa mula sa CSS. Ang paliwanag na ibinigay sa pagbabago ay ang html ay tungkol sa istraktura ng dokumento, at ang layout at animation at styling atbp ay dapat gawin mula sa CSS.

Naisip ko ito:

Gagawing malinaw na itinuturo ang pagkakaiba sa pagitan ng pagtatakda ng style katangian ng isang html tag, at ginagawa ito sa pamamagitan ng CSS na kapaki-pakinabang para sa pagdaragdag ng pag-unawa ng mga estudyante sa pagsali ng CSS at HTML?

Upang paliitin ito, naghahanap ako ng mga halimbawa o mga paliwanag kung paano malinaw na ang pagtuturo nito ay maaaring gawing mas madali ang estilo ng mga estudyante sa kanilang mga webpage . Mas mabuti ang paliwanag.

Sa pamamagitan ng "malinaw na pagtuturo" ang ibig kong sabihin ay talagang nagsasagawa ng isang aralin na may pamagat ng "Pag-istilo sa pamamagitan ng .CSS", o isang katulad na bagay.

Ang ilang konteksto, kung kinakailangan:

Ang mga mag-aaral ay natututo ng pangunahing pagdidisenyo ng web: HTML, JavaScript (napaka basic), JSP at SQL. Natutunan nila ang mga ito para sa 1 taon at sa katapusan ng taon dapat silang magkaroon ng isang website (kung saan sila ay tumatanggap ng mga grado). Ako ay nagtataka kung ang isang aralin sa buong tungkol sa CSS ay maaaring humahantong sa huli sa mas mahusay na naghahanap ng mga website.

5 Comments
3 Puppy 07/30/2017
Ang pangunahing problema dito ay na ipinapalagay mo na ang estilo ay hindi dapat gawin nang direkta sa HTML, at ang paggamit ng CSS ay mas mahusay. Wala sa mga bagay na iyon ay totoo.
ItamarG3 07/31/2017
@Puppy mabuti, bahagi ng tanong ay kung dapat kong ituro ito separatly. Kung wala ako, hindi nila gagamitin ang mga estilo. Ngunit sa tingin mo ba ang anumang website saanman talagang hardcodes ang lahat ng ito ay css sa html? Every div ay may isang bundok ng code sa kanyang style katangian?
1 David Spence 07/31/2017
Ang site na ito ay nagpapakita ng lakas ng pagpapanatiling hiwalay na css. csszengarden.com - Parehong istraktura, iba't ibang mga css stylesheet.
ItamarG3 07/31/2017
Maganda ang DAVIDSpence. Tiyak na gagamitin ko iyan
1 no comprende 07/31/2017
Anuman ang iyong ginagawa, huwag ipakita sa kanila ang post na ito tungkol sa pag-parse ng HTML sa Regex . Maaring bigyan sila ng mga bangungot!

12 Answers


richard 07/30/2017.

Gusto ko ang ideya ng paggawa ng ilang mga style sheets, at ang mga mag-aaral ay ilapat ang mga ito sa kanilang HTML. Maaari nilang makita ang kapangyarihan ng pagkakaroon ng hiwalay na estilo ng sheet.

Pagkatapos ay maaari nilang simulan ang pag-edit ng mga sheet ng estilo, at makita ang kapangyarihan ng isang maliit na pagbabago ay maaaring baguhin ang bawat heading, o bawat talata atbp.

Mayroon din ako sa nakaraan, nakasulat na isang HTML file na may isang hanay ng mga pindutan sa ibaba. Ang mga pindutan na ito ay magpapalitaw ng ibang CSS file na mai-load. Ito ay ilang simpleng JavaScript.

Upang sagutin sila ay dapat manatiling hiwalay

Ang pagpapanatiling estilo at nilalaman na hiwalay, ay inirerekomenda ng W3 at marami pang iba. Ipinatupad nito ang paghihiwalay ng mga alalahanin at nag-iisang responsibilidad. Parehong napakahalagang mga pattern sa disenyo ng software.

Upang sagutin dapat mong italaga ang isang aralin upang paghiwalayin ang mga file ng CSS.

Oo. Kung mahalaga na panatilihin ang mga hiwalay na ito, kung ano ito, dapat mong turuan ang mga mag-aaral na panatilihing hiwalay ang mga ito. Mag-save ng oras sa pamamagitan ng hindi pagtuturo sa kanila upang ihalo ito sa sa HTML (Ito ay i-save ng oras ng dalawang beses, dahil hindi mo na kailangang i-un-magturo ito).


Ginawa ko lang ito sa isa o dalawang tao (hindi isang klase).

5 comments
ItamarG3 07/30/2017
Ang pangalawang talata ay lalong kapaki-pakinabang. Subalit hindi nito sasagutin kung dapat kong talagang italaga ang isang aralin para sa pagtuturo kung paano at kung bakit ang isang tao ay dapat magsulat ng isang css stylesheet, sa halip na mga inline html style attribute.
richard 07/30/2017
Nagdagdag ng isang bahagyang sagot sa Kung at kung bakit upang italaga ang isang aralin sa ito.
1 Buffy 07/30/2017
Sumasang-ayon ako na ang di-pagtuturo ay isang espesyal na pag-aaksaya ng oras ng lahat. Pinakamainam na mahuli ang mga maling kuru-kuro bago maitayo at mapalakas ang masasamang gawi.
1 richard 07/30/2017
@tim, ito ay isang pag- optimisation load. Ang konsepto ay dapat pa rin itong manatiling hiwalay. Gayunpaman sinasabi ng Google na ilagay ito sa parehong file. Hindi nila sinasabi na dapat mong ihiwalay ang bawat isa nang hiwalay. Sinasabi nila na kunin ang maaaring nasa isang css file at idagdag ito sa seksyon ng <style> ng html.
1 Darren 07/31/2017
Sa halip na bigyan ang mga mag-aaral ng iba't ibang estilo ng sheet na nakakaapekto sa kanilang code, susubukan ko ang kabaligtaran na diskarte. Matapos ituro sa kanila ang mga inline na estilo sa HTML, bigyan sila ng isang pahina na nakasalalay sa isang CSS na dokumento para sa estilo nito at hilingin sa kanila na gumawa ng kanilang sariling mga stylesheet para dito (gamit ang parehong mga diskarte na natutunan nila mula sa paggamit ng inline na HTML - isang bagay lamang ng pag-label ng mga estilo at paglalagay ng mga ito sa isang lugar). Pagkatapos ay maihahambing ng bawat isa sa klase ang kanilang mga style sheet sa isang pangkaraniwang paksa ng pagsusulit (ang isa na iyong ibinigay) at makita ang mga posibilidad.

Buffy 07/30/2017.

Kung gusto mo lamang magtayo ng isang pahina na simple at ad-hoc at hindi kailanman magbabago sa hinaharap at makikita lamang sa isang uri ng device, pagkatapos, siguraduhing itayo ang estilo nang direkta sa html. Ito ay pareho kapag sumulat ka ng isang programa na tatakbo lamang nang isang beses sa isang aparato upang makakuha ng isang sagot, pagkatapos kung saan ang programa ay nagiging hindi na ginagamit. Kung gayon, walang dahilan upang maingat na ma-code. Ang "mabilis at marumi" ay gumagana para sa mga bagay.

However bagay ay nagbabago, at ang mga web page ay tiningnan sa mga device na may iba't ibang laki ng screen, kahit na mga modelo ng kulay. At maaaring makita sila sa hinaharap sa mga device na hindi pa umiiral.

Kaya, kung gusto mong bumuo ng mga site na mahalaga at tumatagal at dapat na panatilihin sa hinaharap, gumamit ng CSS. Marahil ay hindi mo isulat ang isang mahalagang programa sa C sa lahat ng main , ngunit hindi bababa sa, kadahilanan ang mga bagay na dapat ay pareho ngunit muling ginagamit. Sa simpleng C programming, kami ay nagtatakda ng mga pag-andar para dito. Sa html nauugnay natin ang estilo. Sa isang mas malalim na antas, ang server side ay nakakaapekto rin sa karamihan ng data, atbp. Nagbibigay-daan ito sa mga bagay na dapat ay magkapareho, manatiling pareho, at hinahayaan kaming baguhin ang isang antas ng disenyo nang nakapag-iisa mula sa iba pang mga antas.

Ito ay hindi eksakto ang parehong bagay, ngunit tingnan ang pinagbabatayan code ng front page ng Google. Hindi ko alam kung ano ang ginagamit nila upang ilagay iyon nang sama-sama at panatilihin ito, ngunit pagdudahan ko na ito ay isang text editor lamang. Tandaan na ang kanilang front page , bagaman hindi kapani-paniwalang simple sa layout, madalas na nagbabago.

Note to the Instructor Kapag handa ka nang mag-grade sa trabaho ng mag-aaral, tingnan ito sa iba't ibang mga device, na may iba't ibang mga resolution ng screen. Gayunpaman, hindi ko pinapayo na gagawa ka rin ng mga ito na nagbibigay ng per-device css.

Para sa bagay na iyon, tingnan ang ilan sa mga pahina ng StackExchange sa isang desktop kumpara sa isang telepono. At para sa isang mas kawili-wili, tingnan ang parehong pinagmumulan at estilo ng mga pahina ng ilan sa mga pahina.

2 comments
1 Luke Sawczak 07/31/2017
Ang paghahambing sa mga pag-andar ay mabuti. Inakala kong ang kasalanan na pinag-uusapan ay direktang nagbibigay ng mga katangian ng estilo sa source HTML. Kung gayon, maaari itong ihambing sa pagkuha ng katawan ng isang paraan at pagtatago lamang kung saan ka tatawagan ang pamamaraan. Nakakalito sa labis.
no comprende 08/01/2017
Para sa isang tunay na nakakagulat, tingnan ang pinagmulan at estilo ng mga pahina ng Microsoft at Moodle! Maaari silang maging daan-daang haba ng linya. Ang orihinal na konsepto ng HTML ay na gagana ito sa mga device na "wala pa". At may mga kasalukuyang napakaraming mga laki ng screen na maaari rin itong maging isang variable.

AnoE 07/30/2017.

Upang maunawaan ang mga ito kung ano ang maaari mong gawin sa CSS nang mag-isa - sa pamamagitan only pagpapalit ng isa pang CSS file - dalhin sila sa CSS Zen Garden . Na may eksaktong parehong HTML para sa bawat pahina, at only ang .css na file ay pinalitan, nakakakuha ka ng walang katotohanan na mga ligaw na pahina. Mula sa matahimik na maliit na kawalang-halaga sa 3D-scroll cubes ...

Pagkatapos ay ipaliwanag sa kanila na ang mga kasanayan na kailangan upang gawin ang HTML, kumpara sa mga skillset para sa (lalo na labis na tulad ng mga) CSS ay lubhang magkakaiba, at ang mga HTML function bilang ang carrier impormasyon lamang.

Ang isang karagdagang goodie ay ang pag-install ng isang screen reader (para sa bulag) - may mga may limitadong libreng paggamit - upang ipakita sa kanila kung paano ang parehong "hitsura" ng HTML kapag binigkas nang malakas.

Ituro din na ang mga tool para sa may kapansanan sa paningin ay maaaring maging halimbawa ng mga teksto ng extract ng mga link at iba pa mula sa HTML kung ito ay mahusay na nakabalangkas, at ito rin ay ginagawang posible upang mag-navigate sa isang pahina na may keyboard lamang - na maaaring maging kapaki-pakinabang kung ang isa ay kaya hilig, kahit na ang paningin ay pagmultahin.

Panghuli, ituro na ang isang pahina na may mahusay na paghihiwalay ng nilalaman at estilo ay may mas mataas na pagkakataon na magtrabaho sa mga portable device - ang pangunahing salita na tumutugon disenyo, kung saan ang nilalaman ay maaaring malayang dumaloy sa anumang resolution kung kinakailangan.


thehayro 07/30/2017.

Upang paliitin ito, naghahanap ako ng mga halimbawa o mga paliwanag kung paano malinaw na ang pagtuturo nito ay maaaring gawing mas madali ang estilo ng mga estudyante sa kanilang mga webpage. Mas mabuti ang paliwanag.

Gaya ng sinasabi ng richard, makikita ng mga mag-aaral kung paano maaaring baguhin ng isang simpleng pag-edit ng estilo ang bawat elemento.

Bilang isang halimbawa, maaari mong hayaan ang iyong mga mag-aaral 'pakiramdam' ang pakinabang ng paghihiwalay ng estilo mula sa html. Na nangangahulugang, bigyan sila ng ehersisyo, kung saan kailangan nila ang estilo ng ilang elemento (hal. Kulay ang background ng elemento) sa kanilang html. Pagkatapos ay palitan ang mga ito ng bawat elemento sa isa pang kulay. Ang aral ay upang ipaalam sa kanila na maunawaan na ang gawaing ito ay maaaring mas mababa ang pag-ubos ng oras kung ihiwalay mo ang estilo mula sa html. Pagkatapos ay maaari mong ipakita kung paano baguhin ang isang linya sa css, na nagbabago sa lahat ng kulay ng background elemento.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Maligayang pagdating sa Computer Science Educators !
Puppy 07/30/2017
Bilang kahalili, maaari silang bumuo ng kanilang HTML sa pamamagitan ng code tulad ng isang maliwanag na tao, kung saan ang kaso, ito ay walang halaga upang baguhin ang kulay ng bawat elemento nang walang hiwalay na estilo ng sheet.
1 thehayro 07/30/2017
Oo naman. Iyon ay hanggang sa mga kinakailangan kung saan dapat ipakita ang webpage (mobile / desktop). Ngunit ang tanong hangga't naintindihan ko ito, kung paano ipaliwanag kung bakit at kung paano may pangangailangan para sa paghihiwalay ng HTML at CSS.
no comprende 08/01/2017
Kapag natututo ako ng CSS binigyan ko ang aking sarili ng mga tungkulin ng paglikha ng isang re-sizable chessboard, at isang canonical na tatlong-hanay na layout ng pahina na may header at footer.

SpiritBH 07/31/2017.

Tinanong mo ang iyong sarili: Bakit kami nakahiwalay sa anumang anyo ng code?

Sa halos lahat ng isang programming / scripting language mayroong paghihiwalay at delegasyon. Ginagawa namin ito upang tiyakin na mas madali mong masubaybayan ang lahat ng code at magagawang mas madaling makilala ang mga isyu (na hindi maiiwasang usbong dahil walang programmer ay hindi maaaring magkamali)

Kaya sa tingin ko na ang isang dedikadong aralin sa CSS ay isang magandang ideya, sapagkat ito ay tumutulong sa kanila na maunawaan kung ano ang responsable para sa kung saan. Nakakatulong ang mga ito na maunawaan na kung ang lahat ng HTML ay tama kapag tumitingin sa pinagmulan, ngunit ang lahat ng mga makeup ay pa rin ginulo, na kailangan nila upang tumingin sa CSS.

Higit pa rito, ang CSS ay malaki, kakayahang umangkop at magagawa ng higit pa kaysa sa paglalagay ng magandang border sa paligid ng mga bagay. Upang maipakita ang klase kung ano ang magagawa nito, at kung paano kumplikado ang makakakuha nito, ay dadalhin ang punto nang higit pa sa bahay kung paano hindi maalam ang pagsamahin ang HTML at CSS masyadong malalim.

Sa huli, ang paghihiwalay ng CSS mula sa HTML (o anumang code para sa bagay na iyon) ay isang pagpapaunlad ng pag-unlad; hindi nito tungkol sa paglikha ng paggana (mas mahusay) nito tungkol sa developer na may higit at mas madaling kontrol sa kanilang paglikha.

Siguro sa talang iyan na gusto mong subukan at gawin ang klase suriin ang bawat trabaho ng iba, makakatulong ito sa kanila na makita kung gaano kahalaga ang magkaroon ng malinis na ipinagkaloob na code kapag nagtatrabaho ka sa isang team.

1 comments
ItamarG3 07/31/2017
Nagtataas ka ng ilang mga kawili-wiling punto. Salamat! at maligayang pagdating sa Computer Science Educators

gabe3886 07/31/2017.

Ang isang bahagyang iba't ibang paraan ng pagtingin sa maaaring ito ay upang ipakilala ang DRY code (Huwag Ulitin ang Iyong Sarili).

Sa pamamagitan ng paggamit ng CSS upang gawin ang estilo, alam mo na sa pamamagitan lamang ng pagdaragdag ng isang klase sa isang elemento ng HTML, ang estilo ay dapat humawak. Kung kailangan mo munang idagdag ang lahat ng ito, kung kailangan mong baguhin ang isang bahagi, kailangan mong baguhin ang marami, marami pang iba.

Upang magnakaw ng isang ideya ng ilustrasyon mula sa Mga Paaralan ng W3 , kung gusto mo, sabihin, ang mga talata na may magkakaibang mga kulay ng background, magagawa mo ito sa ganitong paraan:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Ngunit, kung nais kong baguhin ang order kaya ito ay 2,4,3,1 ngunit panatilihin ang kulay, pagkatapos ay kailangan kong baguhin ang lahat ng mga estilo na binuo sa bawat tag. Kung iyon sa maraming mga pahina, pagkatapos ay ang pag-load ng trabaho ay maaaring dumating malaki.

Kung ginawa ko ito sa CSS, maaari kong gawin ang sumusunod:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Ngayon hindi na ito nagmamalasakit kung ano ang nilalaman, maaari kong iutos sa kanila kung paano ko gusto at ang estilo ay gumagana pa rin. Napakaraming pagsisikap ang nabago. Hindi pinapansin ang pag-order, kung nais kong palitan ang mga ito sa mas makabuluhang mga kulay upang madali itong mababasa, binabago ko ang halaga sa CSS nang isang beses, at inilalapat ito sa bawat pagtutugma ng DOM item.

Higit pa riyan (tulad ng CSS na maaaring ma-embed sa HTML sa tag ng ulo), binabahagi ito sa isang file at kasama na ang ibig sabihin nito ay hindi ko kailangang ulitin ang aking (ngayon mas makatwirang) CSS sa iba't ibang mga file, pababa sa mga istraktura ng folder para sa bawat isa pahina mayroon akong. Isama ko ang CSS file sa header at ang mga estilo ay magkakabisa. Ngayon kung kailangan kong gumawa ng mga pagbabago sa mga kulay o magdagdag ng karagdagang mga estilo, nakukuha ko ang parehong mga benepisyo ng hindi nangangailangan na dobleng kung saan ako ay hindi gumagamit ng mga inline na estilo.

Isa pang benepisyo mula sa pagkakaroon ng isang hiwalay na file, ang layo mula sa split responsibilidad, ay pagganap. Ang mga browser ay medyo maganda sa mga file ng pag-cache, kaya't kung mayroon itong mag-download ng isang solong (minimize na pinakasimpleng) CSS file para sa site nang isang beses kung saan maaari itong muling mag-apply, ito ay isang mas kaunting bagay para dito upang i-download para sa iba pang mga pahina. Dapat palaging magiging konsiderasyon ang pagganap para sa mga tao, lalo na sa pagtaas sa pag-browse sa mobile. Kung ang isang web page ay may maraming CSS dito pagkatapos ang source ay, natural, malaki. Ito ay tumatagal ng mas mahaba upang i-download at / o maging kapaki-pakinabang, na maaaring ilagay ang mga tao off ito ang paghihintay ay nagiging hindi katanggap-tanggap sa kanila.


ncmathsadist 08/01/2017.

Itinuturo namin na may tatlong layer sa isang web page: istraktura, anyo, at pag-uugali. Ang structure ay tinutukoy ng DOM, na nilikha gamit ang mahusay na nabuo markup ng HTML5. Kapag natutunan namin ang tungkol sa HTML, agad naming sinimulan ang pagguhit ng puno ng dokumento, upang maunawaan namin kung paano nauugnay ang mga elemento sa isang pahina sa isa't isa.

Tinutukoy ng hitsura ng CSS ang CSS, na nag-access ng DOM sa format at estilo ng pahina. Ito ay itinatago sa isang hiwalay na file upang maibahagi ito sa pamamagitan ng isang kaugnay na grupo ng mga pahina. Hinahawakan ng HTML ang mga sitwasyong ad hoc gamit ang id o class . Ang paggamit ng mga ito ay ginagawang mas madali ang pagpapanatili ng mga pahina, dahil ang estilo para sa mga bagay na may ganitong mga katangian ay ginawa sa one place sa isang CSS file.

Ang ikatlong layer ay pag-uugali, na dapat lumitaw sa isang JavaScript file. Hindi kailangang lumitaw ang JavaScript sa isang pahina, i-save para sa mga function sa pagtawag mula sa event-handling code. Kahit na ito ay maaaring naka-attach sa isang JS file. Siguraduhing alam ng iyong mga estudyante ang tungkol sa mga kaganapan ng pag- load at maaga sa pag- load , upang maantala nila ang pagtawag ng code hanggang sa umiiral ang mga elemento ng pahina.

Kung nag-install ka ng Node, maaari kang magpatakbo ng mga pagsubok ng JS code sa command line, at bumuo ng mga test suite para sa mga function na iyong nilikha.

Ang paghihiwalay sa tatlong layers ay nagpapanatili ng mga bagay na malinis at nagpapakinabang ng muling paggamit ng code.


user1639154 07/31/2017.

Tila na maraming mga sagot dito ay hindi addressing ang punto ng mana sa estilo, dahil ito ay dapat din na itinuro. Ang pangunahing tuntunin ay kung ano ang nabasa huling ay ilalapat.

ang unang na-load ay karaniwang ang panlabas na sheet sa ulo ng dokumento. Ang isang style sheet na naka-link sa ulo ng dokumento ay higit sa ridden sa pamamagitan ng mga estilo na inilagay inline sa html katawan, at ang mga naman naman ay napapalitan ng mga estilo na inilagay nang direkta sa elemento ng DOM. Ang mahalagang tag ay maaaring gamitin upang baguhin ang pag-uugali na ito din.

Karamihan ay maglalagay ng lahat ng kanilang css sa sarili nitong file dahil mas madaling mapanatili at hindi nangangailangan ng mas maraming trabaho kapag na-update / binago.

EDIT: Lamang upang linawin nang kaunti pa, ito ay lamang ang mga tiyak na mga estilo na tumutugma sa mga klase na magkasalungat / sumasalungat sa bawat isa, kung ang isang inline ay nagdaragdag ng isang estilo upang salungguhit ang teksto, na wala sa klase sa panlabas na sheet para sa Halimbawa ito ay idagdag lamang na ang dagdag na estilo. Ang mga klase ay hindi direktang palitan ang bawat isa ngunit pagsasama sa bawat isa.

5 comments
1 ItamarG3 07/31/2017
Wow. Maligayang pagdating sa Computer Science Educators . Ito ay talagang isang bagay na hindi ko isinasaalang-alang. Gustung-gusto ko ito kung maaari kang magdagdag ng ilang mga halimbawa o paglalarawan na nagpapakita na. ( can kong isulat ang mga ito sa aking sarili, ngunit mas interesado ako sa makita kung ano ang maaari ninyong isipin). Ito talaga ay isang kagiliw-giliw na sagot :)
1 ItamarG3 07/31/2017
Hindi nauugnay: bakit hindi mo isasagawa ang aming paglilibot ? Sigurado ako na gusto mong mahanap ito kagiliw-giliw.
user1639154 07/31/2017
Nakuha ko ito ng bahagyang mali, ang panlabas na estilo ng sheet una, pagkatapos ay i-dokumento ang mga estilo at pagkatapos ay sa elemento, ang aking utak ay hindi kailanman 100% sa isang umaga ng Lunes. :)
ItamarG3 07/31/2017
patawarin at kalimutan;). Maaari mong i-edit ang iyong sagot. May isang pindutan ng pag- edit \ link nang direkta sa ilalim ng iyong sagot. Habang nasa iyo ka, gusto mo bang magdagdag ng ilang halimbawa upang maipakita kung ano ang iyong sagot sa pagtugon? Gusto mo talagang gawin itong mas mahusay na sagot: D
user1639154 07/31/2017
Sa kasamaang palad wala akong panahon ngayon. Nais ko lamang na banggitin ang mana ng css, dahil ito ay mahalagang aspeto ng css.

rackandboneman 08/03/2017.

Gumawa ng isang proyekto kung saan ang resulta ay TWO ganap na iba't ibang mga pagtingin sa same document , hal. Isang bersyon na mukhang mahusay sa isang malaking monitor at isa pang na mukhang mahusay sa isang iPhone.

Ang paggamit ng hindi isang static na webpage ngunit binuo ng computer, ang mga updateable na mga dokumento ay dadalhin ang punto ng bahay kahit na higit pa, dahil ang pag-embed ng estilo ng impormasyon sa ang generator ng dokumento ay gawin itong nakikitang mas kumplikado - ang tanging mga opsyon sa gulo na may estilo ay alinman sa pagbabago ng dokumento generator sa ang lahat ng problema na kasangkot o ang stylesheet kung ano mismo ang nilalayon mo. Mas mabuti: Magtalaga ng two grupo sa magkakaibang sulok ng silid upang gawin ang pagbuo ng dokumento at ang mga bahagi ng stylesheet - at kontrolin kung paano ipinakikita ang mga pagtutukoy sa pagitan ng dalawa.

4 comments
ItamarG3 08/03/2017
Ito ay hindi kapani-paniwala. Wow.
rackandboneman 08/03/2017
Well, gawin itong kapani-paniwala pagkatapos.
ItamarG3 08/03/2017
Ito ay hindi kapani-paniwala sapagkat nalulutas nito ang isang problema sa mga kalagayan na hindi ko ibubunyag (mga bagay-bagay sa paaralan), ngunit hindi ito exactly tumutugon sa tanong ...
1 rackandboneman 08/03/2017
Oh, at nakakaharap ako sa talakayan na hindi isang guro ngunit isang propesyonal sa IT - kung ano ang inilarawan ko ang dahilan kung bakit ginagawa ang mga bagay sa pagsasanay tulad ng teorya na nais mong ituro na nagsasabi :)

Chris M. 08/02/2017.

Maraming magandang sagot dito. Ang isang puntong hindi ko nakita ay ginawa na ang nilalaman at disenyo ay madalas na nilikha ng magkakahiwalay na mga tao o mga koponan, at sa gayon ang pagkakaroon ng bawat tinukoy na may sariling mga tool at wika ay nagbibigay-daan para sa mga kinakailangang mga hiwalay na daloy ng trabaho.

4 comments
ItamarG3 08/02/2017
Wow. Hindi ko naisip iyon. Gusto mo bang palawakin ang kaunti sa kung paano ko maipaliwanag ito sa isang hiwalay na aralin tungkol sa paggamit ng mga estilo ng CSS?
Chris M. 08/02/2017
Gusto kong gamitin ang isang pagkakatulad. Ang mga inhinyero sa Automotive ay hindi pipili ng mga kulay ng kotse. Ang mga screenwriters ay hindi karaniwang gumagawa ng costume design.
ItamarG3 08/02/2017
Nakita ko. Siguro dapat mong isama ang mga analogies sa iyong sagot sa pamamagitan ng pag-edit ng sagot.
1 Buffy 08/03/2017
Talaga ito ay mas masahol pa kaysa sa na. Sa ilang mga malalaking kumpanya na may isang mahalagang presensya sa web, mayroong isang team ng pamantayan na nakaupo sa itaas ng parehong mga koponan ng nilalaman at layout. Kung ang layout ay isang pixel off ng pamantayan, gawin mo ito sa paglipas. Isang pixel.

thesecretmaster 08/03/2017.

Isang mahalagang dahilan kung bakit ang mga estilo ng inline ay masama ay ang pagiging madaling mabasa ng code, plain at simple. Sa kasong ito, ang isang halimbawa ay dapat sapat upang patunayan ang iyong punto:

  
The Title
This is a super great article

Kumpara sa:

  
The Title
This is a super great article

Bilang karagdagan sa halimbawang ito, nang hindi gumagamit ng mga klase at mga id na ginagawa mo ang DOM ay mas mahirap na manipulahin ang paggamit ng javascript at ginagawang imposible kang gumamit ng mga pseudo-elemento at ilan sa mga magagandang tagapili ng CSS tulad ng :nth-child() at :first-child , upang pangalanan ang ilang.


Puppy 07/31/2017.

Gusto ko lubos na hindi sumasang-ayon - ang estilo ay dapat gawin nang direkta sa HTML.

Ang pangunahing problema ay ang estilo na ito ay hindi kahit malayo sa independiyenteng HTML na istraktura. Ang pagsulat lamang ng mga estilo sa pisikal na hiwalay na file ay hindi nagbabago nito. Ang isang magandang halimbawa ay ang suporta sa mobile device. Sa teorya, maaari kang gumawa ng isang mobile CSS file. Ngunit sa katotohanan, malamang na kailangan mo ng isang ganap na hiwalay na disenyo ng UI upang makabuo ng isang mahusay na karanasan sa isang mobile na aparato, at pagkatapos ay isang hiwalay na istraktura ng HTML upang suportahan ito, at pagkatapos ay isang hiwalay na hanay ng mga estilo. "Gawin ang pindutan ng parehong ngunit medyo mas maliit" ay gumagana lamang para sa pinakamaliit na piraso.

Ang paggawa ng tamang UI ay nagsasangkot ng paggawa ng istraktura ng HTML na sumusuporta sa mga estilo na kailangan mo. Dahil ang dalawa ay sa katunayan ay sinamahan ng magkasama, ang pagkakaroon ng mga ito ay nakakuha lamang ng mga bagay na madaling maunawaan at lahat sa isang lugar.

Bukod pa rito, dahil ikaw ay maaaring bumubuo ng iyong HTML sa pamamagitan ng code, walang problema sa pagbuo ng HTML na may mga dobleng estilo, dahil ang iyong code generator ay maaaring magsuka ng mga estilo sa buong araw.

Ang pagkakaroon ng raw na CSS ay napakalubhang problemado dahil ang mga estilo ay ganap na random at sa global na saklaw, at mahirap na muling gamitin. Gumawa ka ng isang pangalan ng klase sa ilalim ng pag-asa na walang sinuman ang gumamit nito. Nest mo ang iyong sariling mga klase sa loob ng sangkap na upang subukan upang malutas ang problemang ito ng kaunti ngunit ngayon ay hindi mo maaaring muling gamitin ang mga klase sa iba pang mga lugar dahil wala sila sa kanang DOM structure. Pagkatapos ay nalaman mo na ang ilang mga random na taong masyadong maselan sa pananamit sa ilang ganap na hiwalay na bahagi ng iyong pahina ay gumagamit ng iyong klase nang hindi nag-aabiso sa iyo at ngayon ay na-break mo ito sa pamamagitan ng pagbabago ng iyong mga estilo. At mahusay na swerte sa pagkuha ng uri ng pag-check, IDE support, atbp. Mahirap ring lumikha ng eg parameterised klase, o globally mag-apply kapalit, eg display: flex sa display: flex at display: -webkit-flex for iOS.

Ang tamang paraan upang makitungo sa mga estilo ay upang harapin ang mga ito tulad ng anumang iba pang mga code-encapsulate ang mga ito sa ilang mga function.

5 comments
1 thesecretmaster♦ 07/31/2017
Hi Puppy, maligayang pagdating sa Computer Science Educators ! Kung gusto mong makilala ang isa pang puppy, maaari mong sabihin hi sa Buffy , na isang buldog, sa chat . Ito ay isang kagiliw-giliw na sagot, salamat sa pagbabahagi ng iyong pananaw dito!
2 richard 07/31/2017
Habang hindi ako sumasang-ayon sa lahat ng sinasabi mo. Nakikita ko ang iyong punto. Lalo na ang huling linya (sa palagay ko dapat mong palawakin ito). Ipakita sa amin kung paano mo iniisip na dapat itong gawin. Kahit na hindi kami sumasang-ayon sa 100%, maaari kaming matuto ng isang bagay.
no comprende 08/01/2017
Ang iyong sagot ay nagpapaalala sa akin tungkol sa oras na tinanong ko ang isang tanong at may nagsabi, "Kung basahin mo ang Mass sa Latin." Mayroong maraming mga 'tamang' mga paraan upang gawin ang mga bagay, at mula sa iyong pananaw, na may nabuong HTML, sa katunayan ito ay walang pagkakaiba. Ngunit ang karamihan sa mga tagapagturo ay hindi nagtuturo ng nabuong HTML, tulad ng karamihan sa mga programmer ay hindi natututo kung paano sumulat ng mga compiler. Ang layer na idinagdag namin upang gawing mas madali ang pagpapanatili ng mga file ng HTML ay labis sa throw-away HTML. Gusto ko ring gumawa ng mga bagay, ngunit ako ay nasa malawak na minorya. Siguro maaari naming makipag-usap tungkol sa Domain Specific Languages ​​minsan?
Puppy 08/01/2017
Ang mga instructor na hindi nagtuturo ng nabuong HTML ay hindi nagtuturo ng kapaki-pakinabang na HTML.
ItamarG3 08/02/2017
@Puppy Ganiyan ba iyan?

Related questions

Hot questions

Language

Popular Tags