Ko ti zgraditi spletno stran iz nič, pametno je začeti z definiranimi osnovnimi slogi. Kot da bi začeli s čistim platnom in svežimi čopiči. Ena prvih težav, s katero se srečujejo spletni oblikovalci, je ta spletni brskalniki so vsi različni. Privzeta velikost pisave se razlikuje od platforme do platforme, privzeta družina pisav je drugačna, nekateri brskalniki določajo robove in obloge na telesni oznaki, drugi pa ne itd. Te nedoslednosti odpravite tako, da določite privzete sloge za svoje spletne strani.
CSS in nabor znakov
Najprej najprej nastavite nabor znakov dokumentov CSS na utf-8. Čeprav je verjetno, da je večina strani, ki jih oblikujete, napisanih v angleščini, so nekatere lahko lokalizirane - prilagojene različnim jezikovnim in kulturnim kontekstom. Ko so, utf-8 poenostavi postopek. Nastavitev nabora znakov v zunanji slogovni list ne bo imel prednosti pred HTTP glavo, v vseh drugih situacijah pa bo.
Nabor znakov je enostavno nastaviti. V prvo vrstico dokumenta CSS napišite:
@charset "utf-8";
Na ta način, če uporabljate mednarodne znake v lastnosti vsebine ali kot imena razredov in ID, slog bo še vedno deloval pravilno.
Oblikovanje telesa strani
Naslednja stvar, ki jo privzeti slogovni list potrebuje, so slogi izbrišite robove, oblazinjenje in obrobe. Tako zagotovite, da vsi brskalniki postavijo vsebino na isto mesto 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, da se slike ozadja in delitve postavitve pravilno poravnajo.
html, body {
marža: 0px;
oblazinjenje: 0px;
obroba: 0px;
}
Privzeto barvo ospredja ali pisave nastavite na črno, privzeto barvo ozadja pa na belo. Čeprav se bo to najverjetneje spremenilo za večino oblik spletnih strani, če imajo te standardne barve na telesu in Oznaka HTML sprva olajša branje strani in delo z njo.
html, body {
barva: # 000;
ozadje: #fff;
}
Privzeti slogi pisave
Velikost pisave in družina pisav sta nekaj, kar se bo neizogibno spremenilo, ko se bo oblikovanje prijelo, vendar se bo začelo s privzeto velikostjo pisave 1 em in privzeto družina pisav Ariala, Ženeve ali kakšnega drugega pisava sans-serif. Z uporabo ems-a je stran čim bolj dostopna, pisava sans-serif pa je na zaslonu bolj čitljiva.
html, body, p, th, td, li, dd, dt {
pisava: 1em Arial, Helvetica, sans-serif;
}
Morda boste našli druga mesta, kjer boste našli besedilo, vendar str, th, td, li, dd, in dt so dober začetek za določanje osnovne pisave. Vključi HTML in telo za vsak slučaj, vendar mnogi brskalniki preglasijo izbira pisave če določite pisave samo za HTML ali telo.
Naslovi
Naslovi HTML so pomembni za pomoč pri orisu spletnega mesta in omogočajo, da se iskalniki poglobijo v spletno mesto. Brez slogov so vsi precej grdi, zato nastavite privzete sloge za vse in za vsakega določite družino pisav in velikosti pisav.
h1, h2, h3, h4, h5, h6 {
družina pisav: Arial, Helvetica, sans-serif;
}
h1 {velikost pisave: 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 na povezave
Oblikovanje barv povezav je skoraj vedno kritičen del zasnove, vendar če jih ne določite v privzetih slogih, boste verjetno pozabili vsaj enega od psevdo-razredov. Določite jih z nekaj majhnimi različicami modre in jih nato spremenite, ko določite barvno paleto za spletno mesto.
Če želite nastaviti povezave v modrih odtenkih, komplet:
- povezave kot modra
- obiskane povezave kot temno modra
- povezave lebdenja kot svetlo modra
- aktivne povezave kot še bolj bleda modra
Kot je prikazano v tem primeru:
a: link {color: # 00f; }
a: obiskan {color: # 009; }
a: hover {color: # 06f; }
a: aktivno {color: # 0cf; }
Z oblikovanjem povezav s precej neškodljivo barvno shemo zagotavlja, da ne boste pozabili nobenega od razredov, hkrati pa so nekoliko manj glasni kot privzeti modri, rdeči in vijolični.
Celoten slog
Tu je celoten slog:
@charset "utf-8";
html, body {
marža: 0px;
oblazinjenje: 0px;
obroba: 0px;
barva: # 000;
ozadje: #fff;
}
html, body, p, th, td, li, dd, dt {
pisava: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
družina pisav: Arial, Helvetica, sans-serif;
}
h1 {velikost pisave: 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: link {color: # 00f; }
a: obiskan {color: # 009; }
a: hover {color: # 06f; }
a: aktivno {color: # 0cf; }