Tsvaga chokwadi neaya mazano
Zvose zvinoshandiswa pawebhu zvinosanganisira izvo zvinozivikanwa se "defauly mitambo." Aya ndiwo maitiro anongoratidzira kutarisa uye kunzwa kwezvinhu zve HTML mukusabatwa kweumwe ruzivo rwetsika. Semuenzaniso, munenge mutsvaga wega wega kutarisa kusinganzwisisiki kwe hyperlink ishinda yakajeka yebhuruu ine mutsara. Iyi ndiyo nzira iyo iyo masangano anotarisa kunze kwekuti iwe uvaudze kuti varatidze nenzira yakasiyana.
Zvichienderana neshanduro dzekushandura zvinogona kubatsira, asi kazhinji ma web designers vanoda kubvisa mitambo iyi kuitira kuti vatange kutanga nemitambo yava 100% mukutonga. Izvi zvinoshandiswa kushandisa izvo zvinozivikanwa se "master stylesheet."
A master stylesheet inofanirwa kuva yekutanga maitiro aunoshevedzera mumagwaro ako ose. Iwe unoshandisa tema stylesheet kuti ubvise zvigadziriswa zvekushandura zvigadziri zvinogona kukonzera matambudziko mu-cross-browser Web design. Kana wapedza kubvisa maitiro nematsetsetiet, temberi yako inotanga kubva panzvimbo imwe chete mumashamba ese - sechando chakachena chekupenda.
Global inokanganisika
Tenzi wako unyanzvi hwetsika hunofanira kutanga nekukwira kunze kwemaseri, paddings nemiganhu peji. Mamwe mawebvu eWebhuturi anoshandura muviri wechirongwa ku 1 kana 2 pixels indented kubva kumusikana pane mapeji. Izvi zvinogutsa kuti vose vanoratidza zvakafanana:
html, muviri {margin: 0px; padding: 0px; muganhu: 0px; }Iwewo unoda kuita kuti faira ishande. Iva nechokwadi chekuisawo hukuru hwemafonti kusvika kuzana zana kana 1m, kuitira kuti peji yako iwanikwe, asi usinga huri hunoenderana. Uye iva nechokwadi chokuti unosanganisira yakakwirira-mutsara.
muviri {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Musoro weKumbomira
Musoro wepamusoro kana musoro wemateti (H1, H2, H3, nezvimwewo) zvinowanzoshandurwa kuva neshoko rakashandurwa nemakona marefu kana padding pedo navo. Nokubvisa uremu, margins uye padding, unova nechokwadi kuti matema aya anoramba ari makuru (kana kuti maduku) kupfuura zvinyorwa akavapoteredza asina micheti yakawanda:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: zvakajairika; font-family: Arial, Helvetica, sans-serif; }Iwe unogona kunge uchida kufunga nezvekuisa hukuru hwakasiyana-siyana, tsamba-nzvimbo uye paddings kumusoro wako wemusoro, asi izvo zvinowirirana nezvetsika yewebsite yauri kugadzirisa uye inofanira kusiyiwa kunze kwetenzi style pepa. Iwe unogona kuwedzera mamwe mapepa emataurirwo aya sezvinoda kudikanwa kwako.
Nhamba yeArain Kuburitsa
Kunze kwemashoko, pane mamwe mavara tags kuti iwe unofanira kunge uine chokwadi chekusunungura. Rimwe rakagadzirirwa vanhu kakawanda ndiro tafura yematareji (TH naTD) uye mavara matomu (SELECT, TEXTAREA uye INPUT). Kana iwe usingagoni kuisa zviyero zvakafanana nemuviri wako uye ndima, iwe unogona kushamisika kushamisika kuti mabheji anovapa sei.
p, t, t, li, dd, dt, ul, ol, blockquote, q, zita, abbr, a, input, select, textarea {margin: 0; padding: 0; fonti: zvakajairika zvakajairika zvakajairika 1em / 1.25 Arial, Helvetica, sans-serif; }Zvakanakawo kupa zvinyorwa zvako (BLOCKQUOTE uye Q), mazwi, uye mabhiizo zvishoma kudarika, kuitira kuti vaone zvishoma:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; ▣ chirevo, abbr {cursor: help; Muganhu-pasi: 1px dashed; }Links neZvifananidzo
Zvisungo zviri nyore kugadzirisa nekushandura kubva pane izvo zvataurwa pamusoro pevara bhuruu rakatsanangurwa. Ndinosarudza kugara nguva dzose hukama hwangu husingaregi, asi kana uchida nenzira yakasiyana iwe unogona kusarudza izvi nenzira imwechete. Iniwo handisanganisi mavara mumudzidzisi wepeji pepa, nokuti izvozvo zvinoenderana nekugadzirwa.
a, a: link, a: visited: a: active, a: hover {text-decoration: underline; }Nemifananidzo, zvakakosha kuvhara miganhu. Kunyange zvazvo dzimwe nyanzvi dzisati dziratidze muganhu wakakomberedza mufananidzo wakajeka, kana mufananidzo wacho wakabatana, ma browsers anotenderera muganhu. Kugadzirisa izvi:
Img {border}; }Tables
Kunyange zvazvo matafura asingasashandiswi nechinangwa chekugadzirisa, iwe nzvimbo inogona kunge ichiri kushandiswa kwemashoko chaiwo e tabluar. Uku kushandiswa kwakanaka kwematafura e HTML. Tatova nechokwadi chekuti kushandiswa kwemavara kusingana kwakafanana pamatafura ematafura ako, asi pane mamwe maitiro mashoma unofanira kuisa kuti matafura ako arambe akafanana:
tafura [margin: 0; padding: 0; border: none; }Forms
Kufanana nedzimwe nheyo, unofanirwa kubvisa maruva uye paddings zvakapoteredza mafomu ako. Chimwe chinhu chandinoda kuita ndechekunyorazve fomu yepeti se " inline " kuitira kuti irege kuwedzera nzvimbo yakawanda apo iwe unoisa taki mumutsetse. Sezvimwe nezvimwe zvinyorwa zvitsanangudzo, ndinotsanangura mazita efonti yekusarudza, textarea uye kuiswa kumusoro, kuitira kuti zvive zvakafanana nemamwe mavara angu.
fomu [margin: 0; padding: 0; kuratidza: inline; }Ichowo chirevo chakanaka chekushandura chinyorwa chemavara ako. Izvi zvinobatsira vanhu kuti vaone kuti mazita acho achaita chimwe chinhu pavanenge vachitsvaga.
shandisa {cursor: pointer; }Kazhinji Makirasi
Nokuda kwechikamu ichi chetsika dzemhando, unofanirwa kutsanangura makirasi aya anonzwisisa kwauri. Aya ndiwo mamwe emakirasi andinoshandisa kakawanda. Cherechedza kuti haisi kuiswa pane chimwe chinhu, saka unogona kuvagovera kune chaunoda:
.clear {clear: both; } .floatKusara (svetuka: kuruboshwe; } .floatRight {float: right; } .textLeft {text-align: kuruboshwe; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {kuratidza: kubvisa; marginal-left: auto; marginal-right: auto; } / * yeuka kuisa upamhi * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; ▣ hauna (marginal-left: 0; padding-kuruboshwe: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; rwandu-style-image: none; }Yeuka kuti nokuti makirasi aya akanyorwa zvisati zvaitika kune mamwe maitiro uye ari masangano chete, zviri nyore kudarika nemamwe maitiro chaiwo anowanikwa gare gare muchikwata. Kana iwe ukawana kuti iwe unogadza kirasi yakafanana pane chimwe chinhu uye hachiiti, unofanirwa kutarisa kuti uone kuti hapana imwe mimwe maitiro mune imwe yemashizha ako akazotevera anokanganisa icho ichocho.
Yose Mudzidzisi Stylesheet
/ * Global Defaults * / html, muviri {margin: 0px; padding: 0px; muganhu: 0px; ▣ muviri {faira: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Nhepfenyuro * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: zvakajairika; font-family: Arial, Helvetica, sans-serif; } / * Zvinyorwa Zvinyorwa * / p, t, t, li, d, dt, ul, ol, blockquote, q, zita, abr, a, in, select, textarea {margin: 0; padding: 0; fonti: zvakajairika zvakajairika zvakajairika 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25m; padding: 1.25em} q {font-style: italic; ▣ chirevo, abbr {cursor: help; Muganhu-pasi: 1px dashed; } duku {font-size: .85em; } guru {font-size: 1.2em; } / * Links nezvifananidzo * / a, a: link, a: visited: a: active, a: hover {text-decoration: underline; } img {muganhu: hapana; } / * Tables * / tafura {margin: 0; padding: 0; border: none; } / * Mafomu * / fomu {margin: 0; padding: 0; kuratidza: inline; } shandura {cursor: pointer; } / * Kazhinji Makirasi * / .clear {tsanangura: zvose; } .floatKusara (svetuka: kuruboshwe; } .floatRight {float: right; } .textLeft {text-align: kuruboshwe; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {kuratidza: kubvisa; marginal-left: auto; marginal-right: auto; } / * yeuka kuisa upamhi * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; ▣ hauna (marginal-left: 0; padding-kuruboshwe: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; rwandu-style-image: none; }Nyaya yekutanga naJennifer Krynin. Yakarongedzwa naJeremy Girard musi wa10/6/17