Ahoana ny fomba fampiasana Class CSS maro amin'ny singa tokana

Tsy voafetra ho an'ny kilasy CSS iray isaky ny singa ianao.

Ny Cascading Style Sheets (CSS) dia mamela anao hamaritra ny endriky ny elanelana amin'ny fidirana ao anatin'ireo toetra izay ampiharanao amin'ilay singa. Ireo toetra ireo dia mety ho toy ny ID na kilasy iray ihany, ary, tahaka ireo toetra rehetra, dia manampy ampian'ireo singa izay ampifandraisina aminy izy ireo. Araky ny toetoetranao dia ampidirinao amin'ny singa iray ny sari-taninao CSS mba hampihatra ny endrika sary ilaina ilaina mba hahitana ny fijery sy ny fahatsapana ho an'io singa io sy ny tranonkala manontolo.

Na dia miasa toy izany aza ny ID na ny kilasy mba hampidirana azy ireo amin'ny fitsipika CSS, ny fomba amam-panaovan'ny tranonkala maoderina dia mankasitraka ny kilasy amin'ny IDs, amin'ny ampahany, satria tsy dia mazava loatra ary mora kokoa amin'ny miasa amin'ny ankapobeny. Eny, mbola hahita toerana maro mampiasa ID ianao, saingy ireo toetra ireo dia ampiharina bebe kokoa raha oharina amin'ny taloha raha ny lesona no nalaina tao amin'ny tranonkala maoderina.

Mpianatra iray na kilasy maromaro ao amin'ny CSS?

Amin'ny ankabeazan'ny tranga dia asiana singa tokana amin'ny singa iray ianao, saingy tsy voafetra ho kilasy tokana fotsiny ianao, fa amin'ny maha-ID anao. Na dia misy singa iray ihany aza ny singa iray, dia azonao atao ny manolotra kilasy maromaro misimisy kokoa, ary amin'ny toe-javatra sasany, ny fanaovana izany dia hahatonga ny pejinao ho mora kokoa ny manamboatra sy manandanja kokoa!

Raha mila manendry kilasy maromaro amin'ny singa iray ianao, dia azonao atao ny manampy ny kilasy fanampiny ary manavaka azy ireo amin'ny toerana iray ao amin'ny toetrao.

Ohatra, ity fehintsoratra ity dia misy kilasy telo:

pullquote featured left "> Ity ny lahatsoratra amin'ny paragrafy

Ity dia mamaritra ireto sokajy telo manaraka ireto:

  • Pullquote
  • nasongadina
  • Havia

Mariho ny habaka misy eo amin'ny soatoavina tsirairay. Ireo sehatra ireo dia mametraka azy ireo ho samy hafa, kilasy tsirairay. Izany koa no mahatonga ireo anarana tsy voatanisa ao amin'ny anaram-pianakaviana, satria izy ireo dia mametraka azy ho kilasy samihafa.

Ohatra, raha nampiasa "pullquote-featured-left" tsy misy sehatra iray ianao, dia mety ho lanjany ny lanjany, saingy ny ohatra etsy ambony, izay ahitana ireo teny telo ireo dia misaraka amin'ny toerana iray, mametraka azy ireo ho soatoavina. Zava-dehibe ny mahatakatra io foto-kevitra io rehefa manapa-kevitra ny amin'ny fitsipika arahinao hampiasaina ao amin'ny tranonkalanao ianao.

Rehefa manana ny soatoavin'ny kilasinao amin'ny HTML ianao, dia azonao atao ny manendry azy ireo ho kilasy ao amin'ny CSS ary hampihatra ireo style izay tianao hampiana. Ohatra.

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

Amin'ireo ohatra ireo, ny fanambarana CSS sy ny soatoavina dia mety ho ao anatin'ny kiran-tsoavaly, izany hoe ireo fomba ireo dia ampiharina amin'ny mpifidy mety.

Fanamarihana - raha mametraka kilasy iray amin'ny singa iray manokana ianao (ohatra p.left), dia azonao ampiasaina ao anatin'ny lisitry ny kilasy; Na izany aza, aoka ho fantatra fa hisy fiantraikany eo amin'ireo singa voatondro ao amin'ny CSS. Amin'ny teny hafa, ny style p.left dia ampiharina fotsiny amin'ny fehintsoratra miaraka amin'ity kilasy ity satria ny soso-kevitrao dia milaza fa hampihatra izany amin'ny "fehintsoratra miaraka amin'ny sandan'ny 'havia'". Mifanohitra amin'izany, ireo singafototra roa hafa ao amin'ny ohatra dia tsy mamaritra singa iray, ka dia ampiharina amin'ny singa iray izay mampiasa ireo soatoavina ireo.

Advantages of Classes Multiple

Ny kilasy maro dia mety ho mora kokoa ny manampy voka-tsoa manokana amin'ny singa raha tsy mamorona fomba vaovao iray ho an'ity singa ity.

Azonao atao, ohatra, ny manana fahafahana hivezivezy amin'ny ankavia na havia haingana. Azonao atao ny manoratra kilasy roa amin'ny ankavia sy ankavanana amin'ny sambon-danitra: havia; ary hitifitra: marina; ao aminy. Avy eo, isaky ny manana singa iray ilainao havaozina havia ianao, dia ampio fotsiny ny kilasy "havia" amin'ny lisitry ny kilasiny.

Misy tsipika tena tsara anefa ny mandeha eto. Tsarovy fa ny fitsipi-tranonkala dia manondro ny fisarahana ny fomba sy ny rafitra. Ny rafitra dia mipetraka amin'ny HTML ary ny style dia ao amin'ny CSS.

Raha feno ny singan-taratasy misy ny anarana hoe "mena" na "havia" ny rakitra HTML anao, izay anarana izay mamaritra ny fomba tokony hijerena ny singa fa tsy ny zavatra misy azy, dia miampita an'io andalana io ianao. Miezaka ny mametra ny anaran'ireo sarim-pianakaviana tsy semantic aho araka izay azo atao noho izany antony izany.

Classes maro, Semantika, ary JavaScript

Ny tombontsoa iray hafa amin'ny fampiasana kilasy maro dia ny manolotra fahafaha-manao fifandraisana maro kokoa.

Azonao ampiharina ireo kilasy vaovao amin'ny singa efa misy mampiasa JavaScript raha tsy manala ny iray amin'ireo kilasy voalohany. Azonao ampiasaina ihany koa ny kilasy mba hamaritana ny semantika amin'ny singa iray . Midika izany fa afaka manampy amin'ny kilasy fanampiny ianao mba hamaritana hoe inona io singa io dia midika famintinana. Izany no fomba fiasan'ny Microformats.

Ny tsy fahombiazan'ny kilasy maro

Ny tsy fahampian'ny fampiasana kilasy maro eo amin'ny singa misy anao dia ny mety hahatonga azy ireo tsy hiraharaha hijery sy hitantana ny fotoana. Mety ho sarotra ny mamaritra hoe inona avy ireo karazan-javatra manohina ny singa iray ary raha misy fiantraikany izany. Maro amin'ireo rafitra misy amin'izao fotoana izao, toy ny Bootstrap, dia mampihetsi-po ny singa manana kilasy maro. Io fehezan-dalàna io dia mety hivoatra ary sarotra ny hiasa haingana raha tsy mitandrina.

Raha mampiasa kilasy maromaro ianao, dia mety hampidi-doza koa ny fananana ny fomba iray ho an'ny kilasy iray hanova ny endriky ny iray, na dia tsy nieritreritra an'izany aza ianao. Izany dia mety ho sarotra ny hamantatra ny antony tsy anehoana ny fomba amam-panao na dia toa tsy tokony ho izy aza.

Mila mahafantatra tsara ny sariitatra ianao, na dia amin'ireo toetra mifandray amin'ny singa iray aza!

Amin'ny fampiasana fitaovana toy ny fitaovana webmaster ao Chrome, dia mora kokoa aminao ny mahita ny fiantraikan'ny kilasinao eo amin'ny endri-tsoratrao sy ny fialana amin'ny olana sy ny toetrany.

Lahatsoratra niavian'i Jennifer Krynin. Edited by Jeremy Girard on 8/7/17