Pregled kaskadnih stilskih listova s uzorkom stila
Kada izradite web stranicu od nule, pametno je početi s definiranim osnovnim stilovima. To je kao počevši od čistog platna i svježih četkica. Jedan od prvih problema s kojima se suočavaju web dizajneri jest da su web preglednici različiti. Zadana veličina fonta razlikuje se od platforme do platforme, a zadana je obitelj fonta drugačija, neki preglednici definiraju margine i padding na oznaku tijela dok drugi ne, i tako dalje. Proučite ove nedosljednosti definiranjem zadanih stilova za vaše web stranice.
CSS i skup znakova
Prvo, postavite skup znakova vaših CSS dokumenata na utf-8 . Iako je vjerojatno da je većina stranica koje dizajnirate napisana na engleskom, neki mogu biti lokalizirani - prilagođeni različitim jezičnim i kulturnim kontekstima. Kad budu, utf-8 pojednostavljuje proces. Postavljanje skupa znakova u vanjskom listu stilova neće imati prednost nad HTTP zaglavljem , ali u svim ostalim situacijama to će.
Lako je postaviti skup znakova. Za prvu liniju CSS dokumenta napišite:
@charset "utf-8";Na taj način, ako upotrebljavate međunarodne znakove u svojstvu sadržaja ili kao nazive klase i ID-ja, stilski će se obrazac i dalje ispravno raditi.
Stiliranje tijela stranice
Slijedeća stvar za zadani stilski list potrebama su stilovi za nulte margine, padding i granice. Time se osigurava da svi preglednici stavljaju sadržaj na isto mjesto, a između preglednika i sadržaja nema skrivenih razmaka. Za većinu web stranica to je previše blizu rubu teksta, no važno je da se počnete tamo tako da su pozadinske slike i odjeljke izgleda ispravno poravnati.
html, tijelo {margina: 0px; padding: 0px; granica: 0px; }Postavite zadani prednji ili boja fonta u crnu i zadanu boju pozadine u bijelo. Iako će se to najvjerojatnije mijenjati za većinu dizajna web stranica, s tim standardnim bojama postavljenim na tijelu i HTML oznakom na početku olakšava čitanje i rad s njima.
html, tijelo {boja: # 000; pozadina: #fff; }Zadani stilovi fonta
Veličina slova i obitelj fonta su nešto što će se neizbježno mijenjati nakon što dizajn ostvari, ali započeti s zadanom veličinom fonta od 1 em i zadanom obitelji fonta Arial, Ženeva ili nekog drugog sans-serif fonta. Korištenje ems zadržava stranicu što je moguće pristupačnije, a font sans-serif je čitljiviji na zaslonu.
html, tijelo, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Može postojati i druga mjesta gdje možete pronaći tekst, ali p , th , td , li , dd i dt su dobar početak za definiranje osnovnog fonta. Uključite HTML i tijelo samo u slučaju, ali mnogi preglednici nadjačavaju odabir fontova ako samo definirate svoje fontove za HTML ili tijelo.
naslovi
HTML naslovi važni su za upotrebu kako bi vam pomogli u pregledu vaših stranica i pustili tražilice da se dublje u vaše web mjesto. Bez stilova, svi su prilično ružni, stoga postavite zadane stilove na sve te definirajte obitelj fontova i veličine fonta za svaku od njih.
h1, h2, h3, h4, h5, h6 {font-obitelj: 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; }Ne zaboravite veze
Oblikovanje boja veze gotovo je uvijek kritičan dio dizajna, ali ako ih ne definirate u zadanim stilovima, vjerojatno ćete zaboraviti najmanje jednu pseudo-klasu. Definirajte ih malim promjenama na plavoj boji i zatim ih promijenite nakon što dobijete paletu boja za određenu web stranicu.
Da biste postavili veze u nijansama plave, postavite:
- veze kao plavo
- posjetili veze kao tamnoplava
- lebdjeti veze kao svijetlo plava
- aktivne veze kao još blijedo plavo
kao što je prikazano u ovom primjeru:
a: link {color: # 00f; } a: posjetio {color: # 009; } a: zadržite pokazivač miša {color: # 06f; } a: aktivno {color: # 0cf; } Stiliranjem veza s prilično neškodljivom shemom boja osigurava da neću zaboraviti niti jednu od razreda, a također ih učinim nešto manje glasnom od zadane plave, crvene i ljubičaste.Cijeli stilski list
Evo cjelokupnog stila:
@charset "utf-8"; html, tijelo {margina: 0px; padding: 0px; granica: 0px; boja: # 000; pozadina: #fff; } html, tijelo, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-obitelj: 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 {boja: # 00f; } a: posjetio {color: # 009; } a: zadržite pokazivač miša {color: # 06f; } a: aktivno {color: # 0cf; }