Mmene Mungagwiritsire Ntchito Mipingo Yambiri ya CSS pa Element Single

Inu simunali ochepa pa CSS imodzi yopangira gawo.

Mafilimu Amitundu Osakanikirana (CSS) amakulolani kufotokoza maonekedwe a chinthucho mwa kugwiritsira ntchito zizindikiro zomwe mumagwiritsa ntchito ku chinthucho. Zizindikiro izi zingakhale ziri ndi ID kapena kalasi, ndipo, monga zikhumbo zonse, iwo amawonjezera chidziwitso chothandizira ku zinthu zomwe zimakhudzidwa nazo. Malinga ndi chikhalidwe chomwe mumapangira chinthu, mungathe kulemba chosankha cha CSS kuti mugwiritse ntchito zofunikira zojambula zofunikira zomwe zikufunika kuti mukwaniritse mawonekedwe anu ndi webusaitiyi yonse.

Ngakhale ma ID kapena magulu akugwira ntchito kuti azigwiritsanso ntchito ndi malamulo a CSS, njira zamakono zamakono zamakono zimakondera maphunziro kupyolera mu ma ID, mbali ina, chifukwa ndizosavuta kwenikweni komanso zosavuta kugwira ntchito ndi onse. Inde, mutha kupeza malo ambiri omwe amagwiritsira ntchito ma ID, koma zizindikirozo zikugwiritsidwa ntchito mochepa kuposa kale, pamene magulu atenga masamba a masiku ano.

Maphunziro Akhaokha Kapena Ambiri mu CSS?

Kawirikawiri mungapereke chikhalidwe chimodzi pa chinthucho, koma inu simungathe kuwerengera kalasi imodzi basi momwe mulili ndi ma ID. Ngakhale chinthu chikhoza kukhala ndi chizindikiritso chokha, mukhoza kupereka gawo losiyanasiyana, ndipo nthawi zina, kuchita zimenezi kumapangitsa kuti tsamba lanu likhale losavuta komanso zosintha zambiri.

Ngati mukufuna kuyika makalasi angapo ku chigawo, mukhoza kuwonjezera makalasi ena ndikuwapatulira ndi malo mu chikhalidwe chanu.

Mwachitsanzo, ndimeyi ili ndi makalasi atatu:

kuchoka kwina kumayikidwa kumanzere "> Izi ndizolemba ndime

Izi zikukhazikitsa makalasi atatu otsatirawa pa ndime:

  • Pullquote
  • Zatchulidwa
  • Kumanzere

Zindikirani malo omwe ali pakati pa imodzi mwazigawo zamtengo wapatali. Malo amenewo ndi omwe amawaika kukhala osiyana, makalasi pawokha. Izi ndi chifukwa chake maina a m'kalasi sangakhale nawo malo, chifukwa kuchita zimenezi kungawaike ngati magulu osiyana.

Mwachitsanzo, ngati mutagwiritsa ntchito "pullquote-featured-left" popanda malo, zikhoza kukhala phindu limodzi, koma chitsanzo pamwambapa, pamene mawu atatuwa akulekanitsidwa ndi danga, amawaika ngati ofunika. Ndikofunika kumvetsetsa lingaliro limeneli pamene mukuganiza kuti ndizofunika ziti zomwe mungagwiritse ntchito pa webpages yanu.

Mukakhala ndi kalasi yanu yamtengo wapatali mu HTML, mukhoza kuyika izi monga makalasi mu CSS yanu ndikugwiritsa ntchito mafayilo omwe mungafune kuwonjezera. Mwachitsanzo.

.pullquote {...}
.featured {...}
p.left {...}

Mu zitsanzo izi, zilembo za CSS ndi zilembo zamalonda zingakhale mkati mwazitali zozungulira, momwemo machitidwewo angagwiritsidwe ntchito kwa wosankha woyenera.

Zindikirani - ngati mutayika kalasi ku chinthu china (mwachitsanzo, p.left), mutha kugwiritsa ntchito ngati gawo la makalasi; Komabe, dziwani kuti izi zidzakhudza zinthu zomwe zili mu CSS. Mwa kuyankhula kwina, chikhalidwe cha p.left chidzagwiritsidwa ntchito pa ndime ndi kalasi iyi kuyambira pamene wosankha wanu akunena kuti akugwiritsa ntchito "ndime ndi kuwerengera kwa gulu" lamanzere "". Mosiyana ndi ena, osankhidwa awiriwa mwachitsanzo samatchula chinthu china, kotero iwo angagwiritse ntchito pa chinthu chilichonse chomwe chimagwiritsa ntchito zigawo zomwezo.

Ubwino wa Maphunziro Ambiri

Mipingo yambiri ingathandize kuti kukhale kosavuta kuwonjezera zotsatira zapadera kwa zinthu popanda kupanga chiyero chatsopano cha chinthucho.

Mwachitsanzo, mungafune kukhala ndi luso loyandama zinthu kumanzere kapena mwamsanga. Mungathe kulemba makalasi awiri omwe achoka ndi kumanja ndi kungoyandama: kumanzere; ndi kuyandama: kumanja; mwa iwo. Kenaka, nthawi iliyonse mukakhala ndi chofunika muyenera kuyandama kumanzere, mungowonjezerapo kalasi "kumanzere" ku mndandanda wa m'kalasi.

Pali mzere wabwino woti uyende pano, komabe. Kumbukirani kuti maofesi a intaneti amayenera kupatukana kwa kalembedwe ndi kapangidwe kake. Chikhalidwe chimayendetsedwa kudzera pa HTML pamene kalembedwe chiri mu CSS.

Ngati ndondomeko yanu ya HTML ikudza ndi zinthu zomwe onse ali ndi mayina a kalasi monga "ofiira" kapena "akumanzere", omwe ndi mayina omwe amachititsa kuti zinthu ziziyang'ana mmalo mosiyana ndi zomwe ziri, mukudutsa mzerewu pakati pa kapangidwe ndi kachitidwe. Ndiyesa kuchepetsa maina anga osaphatikizapo masewera chifukwa chaichi.

Maphunziro Ambiri, Semantics, ndi JavaScript

Chinthu chinanso chogwiritsa ntchito makalasi angapo ndikuti zimakupatsani mwayi wochulukirapo.

Mungagwiritse ntchito makalasi atsopano ku zinthu zomwe mukugwiritsa ntchito pogwiritsa ntchito JavaScript popanda kuchotsa makalasi oyambirira. Mukhozanso kugwiritsa ntchito makalasi kuti mufotokoze semantics ya chinthu . Izi zikutanthauza kuti mukhoza kuwonjezera pa makalasi ena kuti muwone chomwe chiganizocho chikutanthawuza mwachidule. Izi ndi momwe Microformates imagwirira ntchito.

Kuipa kwa Maphunziro Ambiri

Chosavuta kwambiri kugwiritsa ntchito makalasi angapo pazipangizo zanu ndikuti zingawathandize kuti ayang'ane ndikuyang'anira nthawi. Zingakhale zovuta kudziwa kuti ndi mitundu iti yomwe ikukhudza chinthucho ndipo ngati malemba aliwonse akukhudzidwa. Makhalidwe ambiri omwe alipo lero, monga Bootstrap, gwiritsani ntchito kwambiri zinthu ndi magulu angapo. Code ikhoza kutuluka ndi zovuta kugwira ntchito mwamsanga ngati simusamala.

Mukamagwiritsa ntchito makalasi ambiri, mumakhala ndi chizoloƔezi chokhala ndi kalembedwe ka kalasi imodzi kupitirira kalembedwe ka wina ngakhale mutakhala kuti simukufuna. Izi zikhoza kuvuta kuti mudziwe chifukwa chake mafashoni anu sakugwiritsidwa ntchito ngakhale pamene akuwoneka kuti akuyenera.

Muyenera kudziwa zenizeni, ngakhale ndi zikhumbo zomwe zimagwiritsidwa ntchito ku chinthu chimodzicho!

Pogwiritsira ntchito chida monga zida za Webmaster mu Chrome, mukhoza kuona mosavuta momwe maphunziro anu akukhudzira mafashoni anu ndi kupeƔa vutoli la machitidwe ndi zovuta zotsutsana.

Nkhani yoyamba ndi Jennifer Krynin. Yosinthidwa ndi Jeremy Girard pa 8/7/17