Pezani zoona ndi izi
Zonsezi zimaphatikizapo zomwe zimadziwika ngati "mafilimu oyenerera." Izi ndizo mafashoni omwe amachititsa kuti maonekedwe ndi maonekedwe a HTML azioneka ngati palibe maonekedwe ena. Mwachitsanzo, pafupi ndi osatsegula paliponse kuyang'ana kosasintha kwa hyperlink ndi mtundu wobiriwira wabuluu wokhala ndi pansi. Izi ndi momwe zizindikirozo zimawonekera pokhapokha mukawauza kuti asonyeze m'njira zosiyanasiyana.
Zojambula zosinthika zamasewera zingakhale zothandiza, koma nthawi zambiri opanga ma webusaiti akufuna kuchotsa mafashoniwa kuti athe kuyamba mwatsopano ndi maonekedwe omwe ali 100%. Izi zachitika pogwiritsa ntchito zomwe zimatchedwa "master stylesheet."
Makhalidwe apamwamba ayenera kukhala ojambula oyamba omwe mumatchula m'malemba anu onse. Mumagwiritsa ntchito ma stylesheet kuti muchotse zosintha zosasinthika zomwe zingayambitse mavuto mumasewero omasulira. Mukachotsa mafashoni ndi masewera apamwamba, mapangidwe anu amayamba kuchokera pamalo omwewo m'masakiti onse - ngati chinsalu choyera chojambula.
Zosintha zapadziko lonse
Makhalidwe anu amtunduwu ayambe kutulukira pamphepete mwazitali, mapepala ndi malire pa tsamba. Mawindo ena a pawebusaiti amasokoneza thupi la chilembocho ku pixel 1 kapena 2 zomwe zimachokera kumasana omwe ali osatsegula. Izi zimatsimikizira kuti onse amawonetsera chimodzimodzi:
html, thupi {margin: 0px; padding: 0px; malire: 0px; }}Mukufunanso kupanga mazenera mofanana. Onetsetsani kuti inunso muyambe kukula kwazithunzi kwa 100 peresenti kapena 1em, kotero kuti tsamba lanu likhale lofikira, koma kukula kwake kumagwirizanabe. Ndipo onetsetsani kuti muli ndi kutalika kwa mzere.
thupi {font: 1em / 1.25 Arial, Helvetica, sans-serif; }}Kulemba mutu wa mutu
Mitu yamutu kapena ma mutu (H1, H2, H3, etc. Mwa kuchotsa kulemera kwake, mitsinje ndi padding, mumatsimikiza kuti malemba awa adakali aakulu (kapena ang'onoang'ono) kuposa malemba ozungulira iwo popanda kukhala ndi miyeso yowonjezera:
h1, h2, h3, h4, h5, h6 {m'mphepete: 0; padding: 0; zojambulajambula: zachizolowezi; foni-banja: Arial, Helvetica, sans-serif; }}Mwina mungafune kuganizira zoika zazikulu, zolemba-macheza ndi zolembera pamakalata anu apamwamba, koma zimadalira mtundu wa malo omwe mukukonzekera ndipo muyenera kuchoka pa pepala lapamwamba. Mukhoza kuwonjezera mafashoni a mitu imeneyi ngati mukufunikira kuti mupangidwe.
Malemba Opanda Kulemba
Pambuyo pa mutu, palinso malemba ena omwe muyenera kutsimikiza kuti mutha kuchotsa. Imodzi yomwe anthu amaiwala kawirikawiri ndi ma tebulo a tebulo lamasamba (TH ndi TD) ndi ma fomu (SELECT, TEXTAREA ndi INPUT). Ngati simugwiritsa ntchito zofanana ndi thupi lanu ndi ndime yanu, mungadabwe momvetsa chisoni momwe masakatuli amapezera.
p, th, td, li, dd, dt, ul, ol, blockquote, q, mawu, abbr, a, input, select, textarea {m'mphepete: 0; padding: 0; mapepala: mwachizoloŵezi wamba 1em / 1.25 Arial, Helvetica, sans-serif; }}Ndibwino kuti mupereke ndemanga zanu (BLOCKQUOTE ndi Q), zilembo, ndi zilembo zocheperako pang'ono, kotero kuti aziwonekeranso pang'ono:
blockquote {m'mphepete: 1.25em; padding: 1.25m} q {zojambulajambula: italic; } mawu achidule, abbr {cursor: thandizo; malire-pansi: 1px adasweka; }}Zotsatira ndi Zithunzi
Zolumikiza ndizosavuta kusintha ndikusintha kuchokera pazomwe tafotokoza pamwambapa. Ndimasankha kukhala ndi maulendo anga nthawi zonse, koma ngati mukusankha mwanjira ina mukhoza kusankha njirazi. Sindimaphatikizapo mitundu yojambula pamasewera, chifukwa zimadalira kupanga.
a, a: link, a: visited: a: active, a: hover {text-decoration: tsinde; }}Ndi mafano, nkofunika kutseka malire. Pamene masakatuli ambiri sakuwonetsera malire pafupi ndi fano lamtundu, pamene chithunzi chikugwirizanitsidwa, zowakanema zimatsegula malire. Kukonzekera izi:
img {border} palibe; }}Matebulo
Ngakhale matebulo sakugwiritsidwanso ntchito pazokambirana, malo anu angagwiritsenso ntchito pazomwe mukudziwira. Ichi ndigwiritsidwe bwino kwa matebulo a HTML. Takhala tikuonetsetsa kuti kukula kwa malemba osasintha ndi ofanana ndi masebulo anu, koma pali zojambula zina zochepa zomwe muyenera kuziyika kuti matebulo anu akhale ofanana.
tebulo {m'mphepete: 0; padding: 0; malire: palibe; }}Mafomu
Mofanana ndi zinthu zina, muyenera kuchotsa mazenera ndi paddings kuzungulira mafomu anu. Chinthu china chimene ndimakonda kuchita ndikulembanso fomu ya fomu ngati " inline " kuti iwonjezere malo ena omwe mumayikapo. Mofanana ndi malemba ena, ndikufotokozera mauthenga amtundu wosankha, textarea ndi kulowezera pamwamba, kotero kuti ndi zofanana ndi zonse zomwe ndimalemba.
fomu {margin: 0; padding: 0; kusonyeza: mkati; }}Ndichonso lingaliro lothandizira kusintha malonda kwa malemba anu. Izi zimathandiza anthu kuona kuti chizindikirocho chidzachita chinachake pamene akuchotsa.
lembani {cursor: pointer; }}Ophunzira Ambiri
Pa gawo ili la master stylesheet, muyenera kufotokozera makalasi omwe ali omveka kwa inu. Izi ndi zina mwa maphunziro omwe ndimagwiritsa ntchito nthawi zambiri. Tawonani kuti sichiyikidwa ku chinthu china chilichonse, kotero mukhoza kuwapatsa zonse zomwe mukufuna:
.clear {chotsani: zonse; } .floatLeft {yasambira: kumanzere; } .floatRight {float: kumanja; } .textLeft {malemba-align: kumanzere; } .textRight {malemba-align: kulondola; } .textCenter {text-align: pakati; } .textJustify {mawu-align: zifukwa; } .blockCenter {kuwonetsera: kubisa; malire kumanzere: auto; kumanja kumanja: galimoto; } / * kumbukirani kuika width * / .bold {font-weight: bold; } .italic {zojambulajambula: italic; } pansi palemba {text-decoration: pansi; } .panda (kumanzere kumanzere: 0; padding-kumanzere: 0; } .nomginji {m'mphepete: 0; } .nopadding {padding: 0; } .nobullet {mndandanda wazinthu: palibe; mndandanda-ndondomeko-fano: palibe; }}Kumbukirani kuti chifukwa makalasiwa amalembedwa kale musanakhale ndi masewera ena, ndizosavuta kugwedezeka ndi mawonekedwe ena enieni omwe amapezeka pambuyo pake. Ngati mutapeza kuti mumagwiritsa ntchito kalasi yapadera pa chinthucho ndipo simukugwira ntchito, muyenera kuyang'ana kuti muwonetsetse kuti palibe kalembedwe kake kamodzi kake kamene kamakhudza chinthu chomwecho.
The Master Master Stylesheet
/ * Global Zosiyana * / html, thupi {margin: 0px; padding: 0px; malire: 0px; } thupi {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Mitu ya nkhani * / h1, h2, h3, h4, h5, h6 {m'mphepete: 0; padding: 0; zojambulajambula: zachizolowezi; foni-banja: Arial, Helvetica, sans-serif; } / * Zilembedwe Zosudzo * / p, th, td, li, dd, dt, ul, ol, blockquote, q, malemba, malemba, malemba, malemba, malemba, malemba, mavesi, 0; padding: 0; mapepala: mwachizoloŵezi wamba 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {m'mphepete: 1.25m; padding: 1.25m} q {zojambulajambula: italic; } mawu achidule, abbr {cursor: thandizo; malire-pansi: 1px adasweka; } yaying'ono {font-size: .85em; } lalikulu {font-size: 1.2em; } / * Links ndi Zithunzi * / a, a: link, a: visited: a: active, a: hover {text-decoration: tsinde; } img {border} palibe; } / * Matebulo * / tebulo {m'mphepete: 0; padding: 0; malire: palibe; } / * Fomu * / mawonekedwe {m'mphepete: 0; padding: 0; kusonyeza: mkati; } chizindikiro {cursor: pointer; } / * Kawirikawiri Maphunziro * / .clear {omveka: onse; } .floatLeft {yasambira: kumanzere; } .floatRight {float: kumanja; } .textLeft {malemba-align: kumanzere; } .textRight {malemba-align: kulondola; } .textCenter {text-align: pakati; } .textJustify {mawu-align: zifukwa; } .blockCenter {kuwonetsera: kubisa; malire kumanzere: auto; kumanja kumanja: galimoto; } / * kumbukirani kuika width * / .bold {font-weight: bold; } .italic {zojambulajambula: italic; } pansi palemba {text-decoration: pansi; } .panda (kumanzere kumanzere: 0; padding-kumanzere: 0; } .nomginji {m'mphepete: 0; } .nopadding {padding: 0; } .nobullet {mndandanda wazinthu: palibe; mndandanda-ndondomeko-fano: palibe; }}Nkhani yoyamba ndi Jennifer Krynin. Yosinthidwa ndi Jeremy Girard pa 10/6/17