Pregled kaskadnih slogov s slogom vzorčnega vzorca
Ko gradite spletno stran iz nič, je pametno začeti z določenimi osnovnimi slogi. To je kot začetek s čisto platno in svežimi krtačkami. Ena od prvih težav, s katerimi se soočajo spletni oblikovalci, je, da so različni spletni brskalniki . Privzeta velikost pisave je različna od platforme do platforme, privzeta družina pisav je drugačna, nekateri brskalniki določajo robove in oblazinjenje na oznaki telesa, drugi pa ne, in tako naprej. Preberite te nedoslednosti, tako da določite privzete sloge za svoje spletne strani.
CSS in niz znakov
Najprej najprej nastavite nabor znakov vaših CSS dokumentov na utf-8 . Medtem ko je verjetno, da je večina strani, ki jih oblikujete, napisane v angleščini, so lahko nekateri lokalni - prilagojeni za različne jezikovne in kulturne okoliščine. Ko so, utf-8 poenostavlja proces. Nastavitev nabora znakov v zunanjem slognem listu ne bo imela prednost pred glavi HTTP , temveč v vseh drugih situacijah.
Nastavitev znakov je preprosta. Za prvo vrstico dokumenta CSS pišite:
@ charset "utf-8";Na ta način, če uporabljate mednarodne znake v lasti vsebine ali imen razreda in ID-ja, bo slogovni list še vedno pravilno deloval.
Styling Page Body
Naslednja stvar, ki jo potrebuje privzeta slogovna lista, je, da so sloge na ničle izven robov, oblazinjenja in meja. To zagotavlja, da vsi brskalniki vsebujejo vsebino na istem mestu in med brskalnikom in vsebino ni skritih presledkov. Za večino spletnih strani je to preblizu roba za besedilo, vendar je pomembno, da začnete tam, tako da so slike ozadja in postavitve delitve pravilno poravnane.
html, body {margin: 0px; padding: 0px; border: 0px; }Nastavi privzeto ospredje ali barvo pisave v črno barvo in privzeta barva ozadja je bela. Čeprav se bo to najverjetneje spremenilo pri večini modelov spletnih strani, imajo te standardne barve na telo in oznaka HTML najprej olajša branje in delo z njim.
html, telo {color: # 000; ozadje: #fff; }Privzeti slogi pisave
Velikost pisave in družina pisav so nekaj, kar se bo neizogibno spremenilo, ko se bo zasnova začela, vendar začeti s privzeto velikostjo pisave 1 em in privzeto družino pisav Arial, Ženeva ali kakšno drugo pisavo sans-serif. Uporaba ems ohranja stran čim bolj dostopna, sans-serif pa je na zaslonu bolj berljiva.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Obstajajo lahko tudi drugi kraji, kjer boste morda našli besedilo, p , th , td , li , dd in dt pa so dober začetek za določanje osnovne pisave. Vključite HTML in telo za vsak slučaj, vendar številni brskalniki preglasijo izbire fontov, če samo določite svoje pisave za HTML ali telo.
Naslovi
Naslovi HTML so pomembni za uporabo, če želite pomagati vaši spletni strani in omogočiti, da se iskalniki poglobijo v vaše spletno mesto. Brez slogov so vse precej grdi, zato jih nastavite na vse, in določite družino pisav in velikost pisave za vsakega.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {velikost fonta: 2em; } h2 {velikost pisave: 1.5em; } h3 {velikost pisave: 1.2em; } h4 {velikost pisave: 1.0em; } h5 {velikost pisave: 0.9em; } h6 {velikost pisave: 0.8em; }Ne pozabite povezav
Styling barve povezav je skoraj vedno kritičen del zasnove, če pa jih ne določite v privzetih slogih, je verjetno, da boste pozabili vsaj enega od psevdoklonov. Določite jih z nekaj majhnimi različicami modro in jih nato spremenite, ko imate barvno paleto za določeno spletno mesto.
Če želite nastaviti povezave v modrih odtenkih, nastavite:
- povezave kot modre
- obiskane povezave so temno modre barve
- povezave lebdijo kot svetlo modre barve
- aktivne povezave so še bledo modre
kot je prikazano v tem primeru:
a: link {color: # 00f; } a: obiskali {color: # 009; } a: hover {barva: # 06f; } a: aktivna {barva: # 0cf; } Styling povezav s precej neškodljivimi barvnimi shemami zagotavlja, da ne bom pozabil nobenega razreda in jih naredim nekoliko manj glasen od privzetega modrega, rdečega in vijoličnega.Celoten slogovni list
Tu je celoten slogovni list:
@ charset "utf-8"; html, body {margin: 0px; padding: 0px; border: 0px; barva: # 000; ozadje: #fff; } html, telo, 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 {velikost fonta: 2em; } h2 {velikost pisave: 1.5em; } h3 {velikost pisave: 1.2em; } h4 {velikost pisave: 1.0em; } h5 {velikost pisave: 0.9em; } h6 {velikost pisave: 0.8em; } a: povezava {barva: # 00f; } a: obiskali {color: # 009; } a: hover {barva: # 06f; } a: aktivna {barva: # 0cf; }