Kada ti izradite web stranicu od nule, pametno je započeti s definiranim osnovnim stilovima. To je kao da započnete s čistim platnom i svježim četkama. Jedan od prvih problema s kojima se web dizajneri suočavaju je taj web preglednicima svi su različiti. Zadana veličina fonta razlikuje se od platforme do platforme, zadana obitelj fontova je različita, neki preglednici definiraju margine i popunjavanje oznake tijela, dok drugi to ne čine, i tako dalje. Zaobiđite ove nedosljednosti definiranjem zadanih stilova za vaše web stranice.
CSS i skup znakova
Prvo, prvo postavite skup znakova CSS dokumenata na utf-8. Iako je vjerojatno da je većina stranica koje dizajnirate napisana na engleskom jeziku, neke mogu biti lokalizirane - prilagođene različitim jezičnim i kulturnim kontekstima. Kad jesu, utf-8 pojednostavljuje postupak. Postavljanje skupa znakova u vanjska tablica stilova neće imati prednost nad HTTP zaglavlje, ali u svim ostalim situacijama hoće.
Lako je postaviti skup znakova. U prvi redak CSS dokumenta napišite:
@charset "utf-8";
Na ovaj način, ako u svojstvu sadržaja koristite međunarodne znakove ili kao imena klasa i ID-a, stil lista i dalje će raditi ispravno.
Stiliziranje tijela stranice
Sljedeća stvar koju zadani obrazac stilova treba su stilovi do poništavanje margina, popunjavanja i obruba. To osigurava da svi preglednici smještaju sadržaj na isto mjesto, a između preglednika i sadržaja nema skrivenih prostora. Za većinu web stranica ovo je preblizu rubu teksta, ali važno je započeti tamo kako bi se pozadinske slike i dijelovi rasporeda pravilno poredali.
html, tijelo {
marža: 0px;
popunjavanje: 0px;
obrub: 0px;
}
Postavite zadanu boju prednjeg plana ili fonta na crnu, a zadanu boju pozadine na bijelu. Iako će se to najvjerojatnije promijeniti za većinu dizajna web stranica, ako se ove standardne boje postave na tijelu i HTML oznaka u početku olakšava čitanje stranice i rad s njom.
html, tijelo {
boja: # 000;
pozadina: #fff;
}
Zadani stilovi fonta
Veličina fonta i porodica fontova nešto su što će se neizbježno promijeniti nakon što dizajn zahvati, ali započnite sa zadanom veličinom fonta 1 em i zadani obitelj fontova iz Ariala, Ženeve ili neke druge sans-serif font. Korištenje ems-a čini stranicu što dostupnijom, a sans-serif font je čitljiviji na zaslonu.
html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
Možda postoje druga mjesta na kojima ćete pronaći tekst, ali str, th, td, li, dd, i dt su dobar početak za definiranje osnovnog fonta. Uključi HTML i tijelo za svaki slučaj, ali mnogi preglednici poništavaju izbor fonta ako fontove definirate samo za HTML ili tijelo.
Naslovi
HTML naslovi su važni za korištenje kako bi pomogli web lokaciji da se ocrta i omogući tražilicama da uđu dublje u vašu stranicu. Bez stilova, svi su prilično ružni, pa postavite zadane stilove za sve i definirajte obitelj fontova i veličine fontova za svaki.
h1, h2, h3, h4, h5, h6 {
obitelj fontova: Arial, Helvetica, sans-serif;
}
h1 {veličina slova: 2em; }
h2 {veličina fonta: 1,5em; }
h3 {veličina fonta: 1,2em; }
h4 {veličina fonta: 1,0em; }
h5 {veličina fonta: 0,9em; }
h6 {veličina fonta: 0,8em; }
Ne zaboravite na poveznice
Stiliziranje boja veza gotovo je uvijek važan dio dizajna, ali ako ih ne definirate u zadanim stilovima, velika je vjerojatnost da ćete zaboraviti barem jednu od pseudo-klasa. Definirajte ih s malim varijacijama plave boje, a zatim ih promijenite nakon što definirate paletu boja za web mjesto.
Za postavljanje poveznice u nijansama plave boje, set:
- poveznice kao plava
- posjetili linkove kao tamnoplava
- veze iznad kao svijetloplava
- aktivne poveznice kao još bljeđa plava
Kao što je prikazano u ovom primjeru:
a: link {boja: # 00f; }
a: posjetio {color: # 009; }
a: hover {boja: # 06f; }
a: active {boja: # 0cf; }
Stiliziranjem veza s prilično bezazlenom shemom boja osigurava da nećete zaboraviti nijednu nastavu, a čini ih i malo manje glasnima od zadanih plave, crvene i ljubičaste boje.
Potpuni stil
Evo cijelog lista stilova:
@charset "utf-8";
html, tijelo {
marža: 0px;
popunjavanje: 0px;
obrub: 0px;
boja: # 000;
pozadina: #fff;
}
html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
obitelj fontova: Arial, Helvetica, sans-serif;
}
h1 {veličina slova: 2em; }
h2 {veličina fonta: 1,5em; }
h3 {veličina fonta: 1,2em; }
h4 {veličina fonta: 1,0em; }
h5 {veličina fonta: 0,9em; }
h6 {veličina fonta: 0,8em; }
a: link {boja: # 00f; }
a: posjetio {color: # 009; }
a: hover {boja: # 06f; }
a: active {boja: # 0cf; }