Ampio ny CSS ho fanampiana ny kilasy sy ID ianao
Ny tranokalan'ny tranokalan'ny tranonkala amin'izao fotoana izao dia mitaky fahalalàna lalina momba ny CSS (Cascading Style Sheets). Ireo no torolalana omenao tranonkala iray mba hamaritana ny fomba hametrahana azy ao amin'ny varavarankala. Mampihatra andian-tsoratra "styles" ianao ao amin'ny rakitra HTML izay mamorona ny fijery sy ny fahatsapana ny tranonkalanao.
Misy fomba maro ahafahana mampihatra ireo endrika voalaza etsy ambony ireo amin'ny rakitra iray, saingy matetika ianao dia te hampiasa fomba iray amin'ny sasantsasany amin'ireo singa ao anaty rakitra, fa tsy ny singa rehetra amin'io singa io.
Azonao atao ihany koa ny te-hamorona fomba iray izay azonao ampiharina amin'ny singa maromaro ao anaty rakitra, tsy mila mamerina ny fitsipiky ny fomba ho an'ny isam-batan'olona tsirairay. Mba hahatratrarana ireo karazana tadiavinao ireo, dia hampiasa ny toetra ambaran'ny kilasy sy ny HTML HTML ianao. Ireo toetra ireo dia toetoetr'izao tontolo izao izay azo ampiharina amin'ny alan'ny HTML rehetra. Izany dia midika fa raha manavaka ny fizarana, ny fehintsoratra, ny rohy, ny lisitra na ny iray amin'ireo singa HTML hafa ao amin'ny rakitrao ianao, dia afaka manova ny toetra ambaran'ny kilasy sy ID Manampy anao hamita io asa io!
Class Selectors
Ny selector class dia ahafahanao mametraka maromaro maromaro amin'ireo singa mitovy na marika ao anaty rakitra. Azonao atao, ohatra, ny tianao haka ampahany sasany amin'ny lahatsoratrao amin'ny loko hafa amin'ny andininy hafa ao amin'ilay rakitra. Ireo sokajy nasongadina ireo dia mety ho "mailaka" mipetraka eo amin'ny pejy. Azonao atao ny manendry fehintsoratra miaraka amin'ny kilasy toy izao:
p {color: # 0000ff; }
p.alert {loko: # ff0000; }
Ireo endriky ireo dia mametraka ny lokon'ny fehintsoratra rehetra amin'ny manga (# 0000ff), fa ny fehintsoratra rehetra misy karazana "alert" dia ho solon'ny mena (# ff0000). Izany dia satria manana toetra manokana ambony kokoa noho ny fitsipika CSS voalohany, izay mampiasa marika famantarana fotsiny.
Rehefa miasa miaraka amin'i CSS, fitsipika voafaritra kokoa dia handrotsa-danja kokoa ny iray. Noho izany amin'ity ohatra ity, ny fitsipika ankapobeny dia mamaritra ny lokon'ny fehintsoratra rehetra, fa ny fitsipika faharoa, izay voafaritra manokana kokoa noho ny fifehezana izay mametraka fehintsoratra sasantsasany.
Toy izao no azo ampiasaina amin'ny marika HTML:
Ity fehintsoratra ity dia haseho amin'ny manga, izay tsy inona fa ny pejy.
Ity paragrafy ity dia ho manga ihany koa.
Ary ity fehintsoratra ity dia haseho amin'ny mena satria ny tononkalon'ny kilasy dia handika ny loko manga tsy mendrika avy amin'ny styliler selector styling.
Amin'io ohatra io, ny style of "p.alert" dia tsy mihatra afa-tsy amin'ny endritsoratra paragrafy izay mampiasa ny kilasy "mahazatra". Raha te hampiasa izany kilasy izany amin'ny endritsoratra HTML maromaro ianao dia hanala ny singa HTML hatramin'ny fiandohan'ny antso an-tariby (azafady azo antoka fa hivoaka ny vanim-potoana (.) amin'ny toerana), tahaka ity:
.alert {background-color: # ff0000;}
Ity kilasy ity dia azo alaina amin'ny singa rehetra izay mila izany. Ny endriky ny HTML rehetra misy sarany fanamarinam-pianarana "classe" dia hahazo izao fomba izao. Ao amin'ny HTML etsy ambany, dia samy manana ny fehintsoratra sy ny loha-laharana faha-2 izay mampiasa ny kilasy "mailaka". Ny roa amin'izy ireo dia hanana loko mena-loko matevina mifototra amin'ny CSS izay vao naseho anay.
Ity paragrafy ity dia hosoratana amin'ny mena.
Ary ity h2 ity dia mena ihany koa.
Ao amin'ny tranonkala amin'izao fotoana izao, ny toetoetry ny kilasy dia matetika ampiasaina amin'ny ankamaroan'ny singa satria mora kokoa ny miasa miaraka amin'ny fahitana manokana fa ID ireto. Hahita pejy HTML maimaim-poana ianao ho feno ny toetoetry ny kilasy, ny sasany amin'izany dia averimberina imbetsaka ao anaty rakitra sy hafa izay mety hiseho indray mandeha indray mandeha.
ID Selectors
Ny selector ID dia ahafahanao manome anarana manokana amin'ny fomba tsy mifanaraka amin'ny marika na HTML hafa. Lazao fa manana fizarazarana ianao ao amin'ny marika HTML anao izay misy ny vaovao momba ny hetsika iray.
Azonao omena ity fizaràna ity ny toetoetran'ny ID "event", ary raha toa ka te hanoratra ity fizaràna ity miaraka amin'ny sisin-tany mainty 1-pixel ianao dia manoratra kaody ID toy izao:
#event {border: 1px solid # 000; }
Ny fanamby amin'ny solosaina ID dia tsy afaka averina amina dossier HTML izy ireo. Tsy maintsy miavaka izy ireo (afaka mampiasa ny ID mitovy amin'ny pejy maromaro ao amin'ny tranokalanao, fa indray mandeha monja amin'ny taratasy HTML tsirairay). Noho izany raha manana tranga 3 izay nila an'io sisintany io ianao, dia mila manome azy ireo toetra ofisialin'ny "event1", "event2" ary ny "event3" ary manamboatra azy tsirairay. Ho mora kokoa àry ny hampiasa an'io "hetsika" voalaza etsy ambony io, ary hampiova azy rehetra indray mandeha.
Ny fanamby iray hafa amin'ny toetra amam-panahy dia ny hoe manana mari-pahaizana ambony kokoa izy ireo noho ny toetra amam-pahaizana. Midika izany fa raha toa ka mila manana CSS izay manimba fomba fanao taloha ianao, dia mety ho sarotra ny manao izany raha niantehatra loatra tamin'ny ID ianao. Noho izany antony izany dia maro ireo mpandraharaha amin'ny tranonkala no nanalavitra ny fampiasana IDs amin'ny marika an-tsoratra, na dia mikasa ny hampiasa io sanda io indray aza izy ireo, fa kosa dia manodina ireo toetra amam-panao tsy dia fantatra loatra ho an'ny karazan'asa rehetra.
Ny faritra iray misy ny toetra amam-pahefana dia miditra an-tsehatra raha te-mamorona pejy misy rohy an-tserasera ianao. Ohatra, raha manana tranonkala tranokala parallax izay ahitana ny votoatiny amin'ny pejy tokana miaraka amin'ny rohy izay "mitsambikina" amin'ny faritra maro amin'ity pejy ity. Izany dia atao amin'ny fampiasana ny toetra amam-panahy sy rohy mifototra amin'ny rohy izay mampiasa ny rohy fanoratana.
Ampio fotsiny ny lanjan'io toetra io, arakaraka ny marika #, mankany amin'ny toetra href'ny rohy, toy izao:
Ity no rohy
Rehefa tsindriana na kasihina, ity rohy ity dia hitsidika ny ampahan'ny pejy misy an'io toetra io. Raha tsy misy singa ao amin'ny pejy nampiasa ity sanda ID ity, dia tsy hanao na inona na inona ny rohy.
Tadidio fa raha te hamorona rohy ao amin'ny pejy ao amin'ny tranokala ianao, dia ilaina ny fampiasana ny toetra amam-pitsipika, saingy mbola afaka mitodika any amin'ny kilasy ho an'ny tanjona jeneralin'ny CSS ianao. Toy izao ny fanasongadiko ny pejy androany - nampiasa karazan'olona vitsivitsy araka izay tratra aho ary mitodika any amin'ny IDs raha mila ny toetoetran'ity hetsika ity mba tsy hiasa ho an'ny CSS ihany fa ho toy ny rohy ao amin'ny pejy ihany koa.
Lahatsoratra niavian'i Jennifer Krynin. Edited by Jeremy Girard on 8/9/17