Cael y ffeithiau gyda'r awgrymiadau hyn
Mae pob porwr gwe yn cynnwys yr hyn sy'n cael ei adnabod fel "arddulliau di-dor". Mae'r rhain yn arddulliau sy'n pennu edrychiad a theimlad elfennau HTML yn absenoldeb unrhyw wybodaeth arddull arall. Er enghraifft, ym mron pob porwr, mae'r golwg ddiffygiol o hypergysylltiadau yn liw glas llachar gyda thanlinell. Dyma sut mae'r cysylltiadau hynny'n edrych oni bai eich bod yn dweud wrthynt arddangos mewn ffordd wahanol.
Gall arddulliau porwr diofyn fod o gymorth, ond mewn sawl achos mae dylunwyr gwe am ddileu'r arddulliau hyn fel y gallant ddechrau ffres gydag arddulliau y maent yn rheoli 100% ohonynt. Gwneir hyn gan ddefnyddio'r hyn a elwir yn "daflen arddull feistr".
Dylai dalen arddull feistr fod y daflen arddull gyntaf yr ydych yn ei alw yn eich holl ddogfennau. Rydych chi'n defnyddio meinlen arddull i glirio gosodiadau'r bysellau rhagosodedig a all achosi problemau mewn dylunio gwe draws-borwr. Unwaith y byddwch wedi clirio'r arddulliau gyda thaflen arddull fechan, bydd eich dyluniad yn cychwyn o'r un lle ym mhob porwr - fel cynfas glân ar gyfer paentio.
Diffygion Byd-eang
Dylai eich prif ddalen arddull ddechrau drwy sero allan yr ymylon, padlinau a ffiniau ar y dudalen. Mae rhai porwyr gwe yn diystyru corff y ddogfen i 1 neu 2 picsel wedi'i bentio o ymylon y porwr. Mae hyn yn sicrhau eu bod i gyd yn arddangos yr un fath:
html, corff {ymyl: 0px; padio: 0px; ffin: 0px; }Rydych chi hefyd am wneud y ffont yn gyson. Cofiwch hefyd osod maint y ffont i 100 y cant neu 1em, fel bod eich tudalen yn hygyrch, ond mae'r maint yn dal i fod yn gyson. A gwnewch yn siŵr eich bod yn cynnwys uchder y llinell.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Fformatio Pennawd
Fel arfer, mae tagiau pennawd neu bennawd (H1, H2, H3, ac ati) yn cael eu diofyn i destun trwm gydag ymylon mawr neu olchi o'u cwmpas. Trwy glirio pwysau, ymylon a padio, byddwch yn sicrhau bod y tagiau hyn yn dal i fod yn fwy (neu lai) na'r testun o'u cwmpas heb arddulliau ychwanegol:
h1, h2, h3, h4, h5, h6 {margin: 0; padio: 0; ffont-bwysau: normal; ffont-deulu: Arial, Helvetica, sans-serif; }Efallai yr hoffech ystyried gosod meintiau penodol, mannau llythyrau a paddings i'ch tagiau pennawd, ond mae hynny'n wir yn dibynnu ar arddull y safle rydych chi'n ei ddylunio ac y dylid ei adael allan o'r daflen feistr. Gallwch ychwanegu mwy o arddulliau ar gyfer y penawdau hyn fel bo'r angen ar gyfer eich dyluniad penodol.
Fformatio Testun Plaen
Y tu hwnt i benawdau, mae tagiau testun eraill y dylech fod yn siŵr eu bod yn glir. Un set y mae pobl yn aml yn ei anghofio yw'r tagiau cell bwrdd (TH a TD) a ffurfio tag (SELECT, TEXTAREA a INPUT). Os na fyddwch chi'n gosod y rhai sydd â'r un maint â'ch corff a'ch testun paragraff, efallai na fyddwch yn synnu yn anffodus sut y mae'r porwyr yn eu rendro.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marg: 0; padio: 0; ffont: normal arferol 1em / 1.25 Arial, Helvetica, sans-serif; }Mae'n braf hefyd rhoi eich dyfynbrisiau (BLOCKQUOTE a Q), acronymau, a byrfoddau ychydig o arddull ychwanegol, fel eu bod yn sefyll allan ychydig yn fwy:
blockquote {ymyl: 1.25em; padio: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; gwaelod y ffin: 1px wedi'i daflu; }Cysylltiadau a Delweddau
Mae'r dolenni yn hawdd i'w rheoli ac i newid o'r testun danlinellu glas llachar uchod. Mae'n well gennyf bob amser bod fy nghysylltiadau wedi'u tanlinellu o hyd, ond os yw'n well gennych chi fod yn ffordd wahanol gallwch chi osod yr opsiynau hyn ar wahân. Nid wyf hefyd yn cynnwys lliwiau yn y daflen feistr, oherwydd mae hynny'n dibynnu ar y dyluniad.
a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }Gyda delweddau, mae'n bwysig dileu'r ffiniau. Er nad yw'r rhan fwyaf o borwyr yn dangos ffin o gwmpas delwedd plaen, pan gysylltir y ddelwedd, mae'r porwyr yn troi'r ffin. I wneud hyn:
img {ffin: dim; }Tablau
Er nad yw tablau bellach yn cael eu defnyddio at ddibenion gosodiad, efallai y bydd eich safle yn dal i eu defnyddio ar gyfer data tabluar gwirioneddol. Mae hwn yn ddefnydd manwl o dablau HTML. Rydym eisoes wedi gwneud yn siŵr bod y maint testun diofyn yr un fath ar gyfer eich celloedd bwrdd, ond mae yna ychydig o arddulliau eraill y dylech eu gosod fel bod eich tablau yn aros yr un fath:
tabl {ymyl: 0; padio: 0; ffin: dim; }Ffurflenni
Yn debyg i elfennau eraill, dylech egluro'r ymylon a'r padlinau o gwmpas eich ffurflenni. Un peth arall yr hoffwn ei wneud yw ailysgrifennu'r tag ffurflen fel " inline " fel nad yw'n ychwanegu lle ychwanegol lle rydych chi'n gosod y tag yn y cod. Fel gydag elfennau testun eraill, rwy'n diffinio'r wybodaeth ffont ar gyfer dethol, textarea a chyfrannu i fyny uchod, fel ei bod yr un peth â gweddill fy nhestun.
ffurflen {ffin: 0; padio: 0; arddangos: inline; }Mae hefyd yn syniad da i newid y cyrchwr ar gyfer eich labeli. Mae hyn yn helpu pobl i weld y bydd y label yn gwneud rhywbeth pan fyddant yn ei glicio.
label {cursor: pointer; }Dosbarthiadau Cyffredin
Ar gyfer y rhan hon o'r prif ddalen arddull, dylech ddiffinio dosbarthiadau sy'n gwneud synnwyr i chi. Dyma rai o'r dosbarthiadau yr wyf yn eu defnyddio yn fwyaf aml. Sylwch nad ydynt yn cael eu gosod i unrhyw elfen benodol, felly gallwch chi eu neilltuo i'r hyn sydd ei angen arnoch:
.clear {clir: y ddau; } .floatLeft {arnofio: chwith; } .floatRight {arnofio: dde; } .textLeft {testun-align: left; } .textRight {testun-alinio: dde; } .textCenter {testun-align: center; } .textJustify {text-align: justify; } .blockCenter {arddangos: bloc; ymyl-chwith: auto; ymyl-dde: auto; } / * cofiwch osod lled * / .bold {font-weight: bold; } .italic {font-style: italic; } .lineline {text-decoration: tanlinellu; } .noindent {ymyl-chwith: 0; padio-chwith: 0; } .nomargin {ymyl: 0; } .nopadding {padio: 0; } .nobullet {rhestr-arddull: dim; rhestr-arddull-ddelwedd: dim; }Cofiwch, oherwydd bod y dosbarthiadau hyn wedi'u hysgrifennu cyn unrhyw arddulliau eraill ac mai dim ond dosbarthiadau ydyn nhw, mae'n hawdd eu hatal gyda nodweddion arddull mwy penodol sy'n digwydd yn nes ymlaen yn y rhaeadr . Os canfyddwch eich bod chi wedi gosod dosbarth cyffredin ar elfen ac nad yw'n dod i rym, dylech wirio i sicrhau nad oes arddull arall yn un o'ch taflenni arddull diweddarach sy'n effeithio ar yr un elfen honno.
Y Daflen Feistiau Gyfan
/ * Diffygion Byd-eang * / html, body {margin: 0px; padio: 0px; ffin: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Penawdau * / h1, h2, h3, h4, h5, h6 {margin: 0; padio: 0; ffont-bwysau: normal; ffont-deulu: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marg: 0; padio: 0; ffont: normal arferol 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {ymyl: 1.25em; padio: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; gwaelod y ffin: 1px wedi'i daflu; } bach {font-size: .85em; } mawr {font-size: 1.2em; } / * Dolenni a Delweddau * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline; } img {ffin: dim; } / * Tablau * / tabl {ymyl: 0; padio: 0; ffin: dim; } / * Ffurflenni * / ffurflen {ffin: 0; padio: 0; arddangos: inline; } label {cyrchwr: pwyntydd; } / * Dosbarthiadau Cyffredin * / .clear {clear: both; } .floatLeft {arnofio: chwith; } .floatRight {arnofio: dde; } .textLeft {testun-align: left; } .textRight {testun-alinio: dde; } .textCenter {testun-align: center; } .textJustify {text-align: justify; } .blockCenter {arddangos: bloc; ymyl-chwith: auto; ymyl-dde: auto; } / * cofiwch osod lled * / .bold {font-weight: bold; } .italic {font-style: italic; } .lineline {text-decoration: tanlinellu; } .noindent {ymyl-chwith: 0; padio-chwith: 0; } .nomargin {ymyl: 0; } .nopadding {padio: 0; } .nobullet {rhestr-arddull: dim; rhestr-arddull-ddelwedd: dim; }Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 10/6/17