Gaukite faktus su šiais patarimais
Visose žiniatinklio naršyklėse yra žinomi kaip "neveiklūs stiliai". Tai stiliai, diktuojantys HTML elementų išvaizdą ir jausmą, jei nėra kitos informacijos apie stilių. Pavyzdžiui, beveik kiekvienoje naršyklėje numatytasis hipersaitų išvaizda yra ryškiai mėlyna spalva su pabraukimu. Štai kaip atrodo šie saitai, nebent jūs pasakote jiems, kad jie rodomi kitaip.
Numatytieji naršyklės stiliai gali būti naudingi, tačiau daugeliu atvejų interneto dizaineriai nori pašalinti šiuos stilius, kad jie galėtų pradėti naujo stilių, kuriuos jie gali valdyti 100%. Tai daroma naudojant vadinamąją "pagrindinę stilių lentelę".
Pagrindinė stilių lentelė turėtų būti pirmoji stiliaus lentelė, kurią skambinate visuose savo dokumentuose. Jūs naudojate pagrindinę stilių lentelę, kad išvalytumėte numatytuosius naršyklės nustatymus, kurie gali sukelti problemų kryžminio naršyklės interneto dizaino. Išskyrus stilius su pagrindine stiliaus lape, jūsų dizainas prasideda toje pačioje vietoje visose naršyklėse, pvz., Švarios drobės dažymui.
Global Defaults
Jūsų pagrindinė stiliaus lentelė turėtų būti pradėta nuliui išlyginti puslapio maržas, padėklas ir sieneles . Kai kuriose žiniatinklio naršyklėse numatytasis dokumento kūnas yra 1 arba 2 pikseliai, išdėstyti iš naršymo srities kraštų. Tai užtikrina, kad visi jie būtų vienodi:
html, body {margin: 0px; padding: 0px; sienos: 0px; }Taip pat norite, kad šriftas būtų nuoseklus. Būtinai nustatykite šrifto dydį iki 100 proc. Arba 1em, kad jūsų puslapis būtų prieinamas, tačiau jis vis tiek atitinka. Ir būtinai įtraukite linijos aukštį.
kūnas {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Antraštės formatavimas
Antraštės arba antraščių žymos (H1, H2, H3 ir tt) paprastai yra paryškintu tekstu su dideliais paraštėmis arba juostelėmis. Išvalydami svorį, paraštes ir polsterius, įsitikinkite, kad šios žymos lieka didesnės (ar mažesnės) nei aplink juos esantis tekstas be papildomų stilių:
h1, h2, h3, h4, h5, h6 (marža: 0; padding: 0; šrifto svoris: normalus; font-family: Arial, Helvetica, sans-serif; }Galbūt norėsite nustatyti konkrečius dydžius, raidžių atstumą ir padėklas į antraštės žymes, bet tai tikrai priklauso nuo jūsų sukurtos svetainės stiliaus ir turėtų būti pašalinta iš pagrindinio stiliaus lapo. Galite pridėti daugiau stilių šioms antraštėms, jei to reikia konkrečiam dizainui.
Paprasto teksto formatavimas
Be antraštės, yra ir kitų tekstinių žymų, kurias turėtumėte aiškiai išvalyti. Vienas nustatymas, kurį žmonės dažnai pamiršta, yra lentelės elementų žymos (TH ir TD) ir formos žymos (SELECT, TEXTAREA ir INPUT). Jei nenustatysite tokio paties dydžio kaip kūno ir pastraipos tekstas, gali būti nemaloniai nustebinti, kaip naršyklės jas parodo.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronimas, abbr, a, input, select, textarea (margin: 0; padding: 0; šriftas: įprastas normalus normalus 1em / 1,25 Arial, Helvetica, sans-serif; }Taip pat malonu, kad jūsų citatos (BLOCKQUOTE ir Q), akronimai ir sutrumpinimai būtų šiek tiek papildomo stiliaus, kad jie išsiskirtų šiek tiek daugiau:
fragmentas {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronimas, abbr (žymeklis: help; border-bottom: 1px dashed; }Nuorodos ir nuotraukos
Nuorodos yra lengvai valdomos ir keičiamos iš minėto ryškiai mėlynos, pabrėžto teksto. Manau, kad visada mano nuorodos dar labiau pabrėžiamos, bet jei norite tai kitaip, galite nustatyti šias parinktis atskirai. Aš taip pat neįtraukiu spalvų į pagrindinį stiliaus lapą, nes tai priklauso nuo dizaino.
a, a: nuoroda, a: aplankyta, a: aktyvi, a: užveskite tekstą (text-decoration: underline; }Su vaizdais svarbu išjungti sienas. Nors dauguma naršyklių nerodo ribos aplink paprastą vaizdą, kai vaizdas yra susietas, naršyklės įjungia sieną. Norėdami išspręsti šią problemą:
img {border: none; }Lentelės
Nors lentelės nebėra naudojamos išdėstymo tikslais, svetainė vis tiek gali jas naudoti faktiniams tabluar duomenims. Tai puikus HTML lentelių naudojimas. Mes jau įsitikinome, kad numatytojo teksto dydis yra tas pats jūsų lentelių ląstelėms, tačiau yra keli kiti stiliai, kuriuos turėtumėte nustatyti taip, kad jūsų lentelės liktų tokios pačios:
stalas {margin: 0; padding: 0; siena: nėra; }Formos
Kaip ir kiti elementai, turėtumėte išvalyti maržas ir padėklas aplink savo formas. Kitas dalykas, kurį norėčiau padaryti, yra perrašyti formos žymą kaip " inline ", kad ji nepridėtų papildomos vietos, kur žymeklis įdėtas į kodą. Kaip ir kiti tekstiniai elementai, aš nustatau pasirinkimą, teksto sritį ir įvesties aukščiau esančią šriftą, kad jis būtų toks pat kaip likęs mano tekstas.
forma {margin: 0; padding: 0; rodyti: inline; }Taip pat rekomenduojama pakeisti etikečių žymeklį. Tai padeda žmonėms pamatyti, kad etiketė kažką padarys spustelėjus.
etiketė (žymeklis: žymiklis; }Bendros klasės
Šiam pagrindinio stiliaus lapo daliai turėtumėte apibrėžti jums svarbias klases . Tai yra keletas klasių, kurias dažniausiai naudoju. Atkreipkite dėmesį, kad jie nenustatyti jokio konkretaus elemento, todėl galite priskirti juos viskam, ko jums reikia:
. aišku {aišku: abu; } .floatLeft (float: left; } .floatRight (plūdės: teisė; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify (text-align: justify; } .blockCenter {display: block; margin-left: auto; atsarginė pusė: automatinė; } / * nepamirškite nustatyti pločio * / .bold {font-weight: bold; } .italic {font-style: italic; }. enderline {text-decoration: underline; } .noindent (margin-left: 0; padding-left: 0; }. nomargin (margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: nė vienas; }Atminkite, kad kadangi šios klasės yra parašytos prieš bet kokius kitus stilius ir yra tik klasių, juos lengva perrašyti su konkretesnėmis stiliaus savybėmis, kurios atsiranda vėliau kaskadoje . Jei pastebėsite, kad elemente nustatėte bendrąją klasę ir jis neįsigalioja, turėtumėte įsitikinti, kad viename iš vėlesnių stilių lentelių, veikiančių to paties elemento, nėra kito stiliaus.
Viso pagrindinio stiliaus lentelė
/ * Global Defaults * / html, body (margin: 0px; padding: 0px; sienos: 0px; } kūnas {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Antraštės * / h1, h2, h3, h4, h5, h6 (marža: 0; padding: 0; šrifto svoris: normalus; font-family: Arial, Helvetica, sans-serif; } / * Teksto stilius * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronimas, abbr, a, input, select, textarea (margin: 0; padding: 0; šriftas: įprastas normalus normalus 1em / 1,25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronimas, abbr (žymeklis: help; border-bottom: 1px dashed; } mažas (font-size: .85em; } didelis {font-size: 1.2em; } / * Nuorodos ir atvaizdai * / a, a: nuoroda, a: aplankyta, a: aktyvi, a: hover {text-decoration: underline; } img {border: none; } / * Lentelės * / lentelė (marža: 0; padding: 0; siena: nėra; } / * Forms * / form {margin: 0; padding: 0; rodyti: inline; } etiketė {žymeklis: rodyklė; } / * Common Classes * / .clear {clear: both; } .floatLeft (float: left; } .floatRight (plūdės: teisė; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify (text-align: justify; } .blockCenter {display: block; margin-left: auto; atsarginė pusė: automatinė; } / * nepamirškite nustatyti pločio * / .bold {font-weight: bold; } .italic {font-style: italic; }. enderline {text-decoration: underline; } .noindent (margin-left: 0; padding-left: 0; }. nomargin (margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: nė vienas; }Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 17.10.06