Makirasi uye maDzisi Kubatsira Kuwedzera CSS Yako
Kuvaka mawebhusayithi paWebhu nhasi kunoda kunzwisisa kwakadzama kweCSS (Cascading Style Sheets). Iyi ndiyo mirayiridzo yaunopa webhusaiti kuti uone kuti ichagadzirisa sei muwindo rekushandura. Iwe unoshandisa rutsva rwe "mafashoni" kuhwaro rako re HTML rinozoita kuti utarisire uye kunzwa zvewebhu rako.
Kune nzira dzakawanda dzekushandisa izvo zvataurwa pamusoro apa pane imwe nyanzvi, asi kazhinji unoda kushandura chimiro pane zvimwe zvezvinhu zviri muhuturo, asi kwete mamiriro ese ezvo chinhu.
Iwe unogonawo kuda kugadzira chimiro chaunogona kushandisa kune zvimwe zvikamu mune imwe rugwaro, pasina kudzokorora mutemo wekuita kune mumwe nomumwe muenzaniso. Kuti uwane maitiro aya aunoda, iwe uchishandisa kirasi neAi HTML maitiro. Izvi zvinoshandiswa pasi rose zvinogona kushandiswa kune inenge yose yeTime tag. Izvi zvinoreva kuti kana iwe uri kutarisa mazano, ndima, mazano, mazita kana zvimwe zvezvimwe zvikamu zve HTML mumagwaro ako, unogona kutendeukira kukirasi nehudzi hunhu kukubatsira kuti uite basa iri!
Vatsva veChikoro
Chikoro chokusarudza chinokubvumira kuti uise mitambo yakawanda kune chinhu chimwe chete kana kuti tag in document. Somuenzaniso, unogona kunge uine zvikamu zvemashoko ako zvakadanwa mumuvara wakasiyana kubva pane zvakanyorwa mumagwaro. Izvi zvikamu zvakasimbiswa zvingava "kuchenjerera" iwe uri kuisa peji. Iwe unogona kugovera ndima yako nezvikoro zvakadai sezvi:
p {ruvara: # 0000ff; }
p.alert {ruvara: # ff0000; }
Aya maitiro aizoisa ruvara rwemavara ose ku bhuruu (# 0000ff), asi chero ndima neyechikoro chekuti "wakangwarira" kunogona kunge yakanyorwa muhutsvuku (# ff0000). Izvi ndechokuti chikwata chechikoro chinonyanya kukwirira kudarika chekutanga CSS mutongi, iyo inoshandisa chete musarudzo.
Paunenge uchishanda neCSS, humwe hutongi huchaita huchawedzera huwandu hushoma. Saka mumuenzaniso uyu, mutemo unowanzoisa ruvara rwemavara ose, asi wechipiri, mutemo unonyanya kudarika unopfuura hunoisa pane dzimwe ndima.
Hezvino kuti izvi zvingashandiswa sei mune rimwe marimi HTML:
Iyi ndima inogona kuiswa mubhuruu, iyo ndiyo yakashata ye peji.
Iyi ndima inogonawo kuva yebhuruu.
Uye iyi ndima inogona kuratidzwa muhutsvuku sezvo chikwata chekirasi chaizodzokorora mavara emuvara webhuruu kubva pane imwe sarudzo yekunyorera.
Muchiitiko ichocho, chimiro che "p.alert" chaizongoshanda kune zvinyorwa zvinoshandisa iyo "yakangwarira" kirasi.Kana iwe waida kushandisa kirasi iyi pane dzakawanda HTML zvinyorwa, iwe ungangobvisa zvinyorwa zve HTML kubva pakutanga kwe chiito chekuita (ingova nechokwadi chekusiya nguva (.) panzvimbo), sezvizvi:
.alert {ruvara-ruvara: # ff0000;}
Iyi kirasi ikozvino inowanikwa kune chero chinhu chinochida. Chero chidimbu che HTML chako chine chikwata chechikoro cheku "chengetedza" ikozvino chiwana chimiro ichi. Mune HTML iri pasi apa, tine zvose ndima uye musoro wepamusoro 2 unoshandisa boka re "chengwariro". Zvose izvi zvingadai zvine ruvara-ruvara rwvuku ruchibva paCSS yatangoratidzira.
Iyi ndima inganyorwa yakatsvuka.
Uye iyi h2 inogonawo kuva tsvuku.
Panzvimbo dzewebhu nhasi, zvigadzidzo zvekirasi zvinowanzoshandiswa pane zvimwe zvinhu nokuti zviri nyore kushanda pamwe chete kubva pane zvakananga maonero ekuti ID. Iwe uchawana magwaro akawanda emaji eHTML anozozadzikiswa nehudzidzo hwekirasi, dzimwe dzadzo dzinodzokororwa kazhinji mune imwe nyanzvi uye dzimwe dzinogona kuonekwa kamwe chete.
ID Selectors
Mutori weDhiyabhorosi anokubvumira kupa zita kune imwe nzira kunze kwekubatanidza nekiti kana zvimwe zvimwe zve HTML . Iti iwe wakanga uine kupatsanurwa mune yako HTML markup iyo ine ruzivo pamusoro pechiitiko.
Iwe unogona kupa kupatsanurwa ichi chiito cheDhiyabhorosi che "chiitiko", uye zvino kana iwe uchida kurondedzera kupatsanurwa uku ne 1-pixel yakazara muganhu mutsva iwe unyore kadhi yedhidhi seiyi:
#event {muganhu: 1px solid # 000; }
Iyo dambudziko nevasarudzo veAIDS ndeyokuti havagone kudzokororwa mune imwe nyanzvi ye HTML. Dzinofanirwa kunge dzakasiyana (iwe unogona kushandisa idhi imwechete pamapeji akawanda ewebsite yako, asi kamwe chete pane imwe yega yega HTML document). Saka kana iwe uine zviitiko zvitatu izvo zvose zvaidiwa muganhu uyu, iwe unoda kuvapa zivo dzeDhiyabhorosi ye "event1", "event2" uye "event3" uye chimiro chimwe nechimwe chazvo. Saka, zvingava nyore kwazvo kushandisa shanduro yepamusoro yechirongwa che "chiitiko" uye chishandise ivo vose kamwechete.
Imwe dambudziko nehuzivi hweDzi ndeyekuti vane hukuru hwepamusoro pane zvidzidzo zvekirasi. Izvi zvinoreva kuti kana iwe uchida kuva neCSS iyo inopfurikidza netsika yakambosimbiswa, zvingava zvakaoma kuzviita kana iwe wakatendererawo zvikuru paInds. Ndicho chikonzero chokuti vateereri vazhinji vewebhu vakabva kurega kushandisa maAIDS mumakambani avo, kunyange kana vakangoda kushandisa chinhu ichocho kamwe chete, uye panzvimbo pacho vakashandura kune zviduku-zvidzidzo zvemakirasi zvese zvinenge zvese mitambo.
Imwe nzvimbo iyo ID inofanirwa kuita inowanikwa ndeyekuti iwe unoda kuumba peji ine ma-page anchor links. Nemuenzaniso, kana iwe une webhusaiti yepaallax yakawanda ine zvinyorwa zvose pane peji rimwe chete ine zvikwata zvinotanga "kuruka" kune zvikamu zvakasiyana zvepeji iroro. Izvi zvinoshandiswa kushandiswa kweAID uye zvinyorwa zvemashoko zvinoshandisa idzi dzinotsigisa.
Iwe unongowedzera kukosha kwechiratidzo ichocho, chakatangwa ne # chiratidzo, kune chikonzero chekubatana kwekubatana, seizvi:
Ichi ndicho chibvumirano
Paunenge wakanyatsogunzva kana kugunzwa, hukama iyi huchasvika kune chikamu chepeji ine chiratidzo ichi cheDhiyabhorosi. Kana pasina chimwe chinhu chiri peji chakashandisa ichi chizivo cheAID, chibatanidzwa hachizoiti chero chinhu.
Yeuka, kana iwe uchida kugadzira mu-peji ichibatanidza pane imwe nzvimbo, kushandiswa kwehudzi hunofanirwa huchadiwa, asi iwe unogona kutendeukira kumakira e General CSS styling zvinangwa. Iyi ndiyo nzira yandinoisa mapeji nhasi - Ndakashandisa vasarudzo vekirasi zvakanyanya sezvinobvira uye ndangotendeukira kuAIDS apo ini ndinoda chiito chekuita kwete kwete se hook kune CSS asiwo se-in-page link.
Nyaya yekutanga naJennifer Krynin. Yakagadziriswa naJeremy Girard musi we8/9/17