Kui sa ehitada veebisait nullist, on mõistlik alustada määratletud põhistiilidega. See on nagu alustamine puhta lõuendi ja värskete pintslitega. Üks esimesi probleeme, millega veebidisainerid silmitsi seisavad, on see veebibrauserid on kõik erinevad. Fondi vaikemõõt on platvormiti erinev, vaikefontide perekond on erinev, mõned brauserid määravad kehasildil veerised ja täidise, teised aga mitte jne. Nendest vasturääkivustest mööda saate, määratledes oma veebilehtede vaikestiilid.
CSS ja märgistik
Kõigepealt määrake oma CSS-dokumentide märgistikuks utf-8. Kuigi on tõenäoline, et enamik teie kujundatud lehtedest on kirjutatud inglise keeles, võivad mõned olla lokaliseeritud - kohandatud vastavalt erinevale keelelisele ja kultuurilisele kontekstile. Kui need on, utf-8 lihtsustab protsessi. Märgistiku määramine menüüs väline stiilileht ei ole ülimuslik HTTP päis, kuid kõigis muudes olukordades see nii on.
Märgistiku määramine on lihtne. CSS-i dokumendi esimese rea jaoks kirjutage:
@charset "utf-8";
Sel viisil, kui kasutate sisu atribuudis või kui rahvusvahelisi tähemärke klassi ja ID nimed, stiilileht töötab endiselt õigesti.
Lehe keha kujundamine
Järgmine asi, mida vaikimisi stiilileht vajab, on stiilid nullivad veerised, polstrid ja äärised. See tagab, et kõik brauserid paigutavad sisu samasse kohta ning brauseri ja sisu vahel pole varjatud tühikuid. Enamiku veebilehtede jaoks on see teksti jaoks liiga lähedal servale, kuid on oluline alustada sellest, et taustapildid ja paigutuse jaotused oleksid õigesti reastatud.
HTML, body {
veeris: 0px;
polster: 0px;
ääris: 0px;
}
Määrake esiplaani või fondi vaikevärv mustaks ja vaikevärviks valge. Ehkki see muutub enamiku veebilehtede kujunduste puhul tõenäoliselt, on nende standardsete värvide määramine kehal ja HTML-märgend algul muudab lehe lugemise ja sellega töötamise lihtsamaks.
HTML, body {
värv: # 000;
taust: #fff;
}
Vaikefondi stiilid
Fondi suurus ja fondiperekond on midagi, mis paratamatult muutub, kui kujundus saab kinnitust, kuid algab vaikimisi fondisuurusega 1 em ja vaikimisi fondipere Arialist, Genfist või mõnest muust sans-serif font. Emsi kasutamine hoiab lehe võimalikult ligipääsetavana ja sans-serif font on ekraanil paremini loetav.
HTML, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
Võib olla ka muid kohti, kus võite teksti leida, kuid lk, th, td, li, ddja dt on hea algus põhifondi määratlemiseks. Kaasa HTML ja keha igaks juhuks, kuid paljud brauserid alistavad fondivalikud kui määrate oma fondid ainult HTML-i või keha jaoks.
Pealkirjad
HTML-päised on oluline kasutada, et aidata teie saidil visandada ja lasta otsingumootoritel teie saidile sügavamale jõuda. Ilma stiilideta on nad kõik üsna koledad, seega määrake neile kõigile vaikestiilid ja määrake nende jaoks fondipere ja fondisuurused.
h1, h2, h3, h4, h5, h6 {
font-perekond: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
Ärge unustage linke
Lingivärvide kujundamine on peaaegu alati kujunduse kriitiline osa, kuid kui te ei määra neid vaikestiilides, siis on tõenäoline, et unustate vähemalt ühe pseudoklassi. Määratlege need väikese sinise variatsiooniga ja muutke neid siis, kui olete saidi jaoks värvipaleti määratlenud.
Seadistamiseks lingid sinistes toonides komplekt:
- lingid nagu sinine
- külastatud linke nagu tumesinine
- hõljutage linke nagu helesinine
- aktiivsed lingid veel kahvatum sinine
Nagu on näidatud selles näites:
a: link {color: # 00f; }
a: külastatud {color: # 009; }
a: hõljutage kursorit {color: # 06f; }
a: aktiivne {color: # 0cf; }
Kujundades lingid üsna kahjutu värvilahendusega, tagab see, et te ei unusta ühtegi klassi ja muudab need veidi vähem valjuks kui vaikimisi sinine, punane ja lilla.
Täielik stiilileht
Siin on täielik stiilileht:
@charset "utf-8";
HTML, body {
veeris: 0px;
polster: 0px;
ääris: 0px;
värv: # 000;
taust: #fff;
}
HTML, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-perekond: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
a: link {color: # 00f; }
a: külastatud {color: # 009; }
a: hõljutage kursorit {color: # 06f; }
a: aktiivne {color: # 0cf; }