Ülevaade kastipiltide stiililehtedest, millel on näidise stiilileht
Kui teete veebisaidi nullist välja, on see nutikas alustada põhiliste stiilide määratlemisega. See on nagu alustades puhast lõuendit ja värskeid harusid. Veebi disainerite üks esimesi probleeme on see, et veebibrauserid on kõik erinevad. Vaikimisi on kirjasuurus platvormilt erinev platvormile, vaikimisi fontide rühm on erinev, mõned brauserid määratlevad serva ja täidised keha märgisel, teised ei tee seda ja nii edasi. Hoidke need vasturääkivused ümber, määratledes oma veebisaitide vaikimisi stiilid.
CSS ja märkide komplekt
Kõigepealt asetage CSS- failide kooditabel utf-8-le . Kuigi on tõenäoline, et enamik kujundatud lehti on kirjutatud inglise keeles, mõned võivad olla lokaliseeritud, kohandatud erineva keelelise ja kultuurilise konteksti jaoks. Kui need on, utf-8 lihtsustab protsessi. Välise stiililehe märgistiku seadistamine ei ole HTTP-päisest ülimuslik, kuid kõigis muudes olukordades on see.
Tähistuste komplekti on lihtne. CSS-dokumendi esimeses reas kirjutage:
@ charset "utf-8";Sel moel, kui kasutate sisumärki rahvusvahelisi tähemärke või klassi ja ID-ide nimesid, siis jätkub stiilide leht õigesti.
Lehekülje keha kujundamine
Järgmine asi vaikimisi stiililehtede vajadusteks on stiilid, et nullida marginaale, täiustus ja piirid. See tagab, et kõik brauserid paigutavad sisu samasse kohta ja brauseri ja sisu vahel pole peidetud ruume. Enamiku veebilehtede puhul on see teksti servale liiga lähedal, kuid seal on oluline alustada nii, et taustpildid ja paigutus jaguneb korrektselt.
html, keha {margin: 0px; padding: 0px; piiri: 0px; }Määrake vaikimisi esiplaan või fondi värv mustaks ja vaikimisi taustavärv valgeks. Kuigi see muutub kõige tõenäolisemalt enamiku veebilehe kujunduste puhul, on need standardvärvid kehal ja HTML-märgend esmalt muudab lehe lihtsamaks lugemiseks ja töötamiseks.
html, keha {color: # 000; taust: #fff; }Vaikimisi fondi stiilid
Kirjasuurus ja fontide perekond on midagi, mis muutub paratamatult pärast disaini läbimist, kuid algab vaikimisi 1 em fontide suurusega ja Ariali, Genfi või mõne muu sans-serif-fondi vaikefritiliigiga. EMSi kasutamine hoiab lehte võimalikult hõlpsalt juurdepääsetavana ja ekraanil on loetav mitte-serif-fondi loetavus.
html, keha, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Võib olla ka teisi kohti, kus võite teksti leida, kuid p , th , td , li , dd ja dt on hea algus põhifondi määratlemiseks. Hõlmake HTML-i ja keha igaks juhuks, kuid paljud brauserid ignoreerivad fontide valikuid, kui määrate oma HTML-i või keha jaoks oma fonte.
Pealkirjad
HTML-pealkirjad on olulised, et aidata teie saidi kirjeldust ja lasta otsingumootoritel teie saidil sügavamalt juurde pääseda. Ilma stiilita on need kõik üsna koledad, nii et määrates neile kõigile vaikimisi stiilid ja määra kindlaks fontide kogu ja fondi suurused.
h1, h2, h3, h4, h5, h6 {font-family: 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; }Ära unusta lingid
Lingivärvide kujundamine on peaaegu alati disaini kriitiline osa, kuid kui te neid vaikimisi stiilides ei määratle, on tõenäoline, et unustate vähemalt ühte pseudoklassi. Määratlege need mõne väikese variatsiooniga sinisel kujul ja seejärel muutke neid, kui teil on kindlaks määratud saidi värvipalett.
Seadistamiseks lingid siniste varjunditega seada:
- lingid sinisega
- külastatud lingid tumesinine
- vihjata linke helesinine
- aktiivsed lingid on isegi heledamad
nagu näitab see näide:
a: link {color: # 00f; } a: külastatud {color: # 009; } a: hover {color: # 06f; } a: aktiivne {color: # 0cf; } Lingid kujundades üsna kahjutu värviskeemiga, tagab see, et ma ei unusta ühtegi klassi ja muudab need natuke vähem valjemaks kui vaikimisi sinine, punane ja lilla värv.Täismõõdus lehti
Siin on täielik stiil:
@ charset "utf-8"; html, keha {margin: 0px; padding: 0px; piiri: 0px; värv: # 000; taust: #fff; } html, keha, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: 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: hover {color: # 06f; } a: aktiivne {color: # 0cf; }