Kaskadni stilski list (CSS) Pregled s uzorkom

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 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 fonta i obitelj fontova nešto su koje će se neizbježno mijenjati nakon što se dizajni uhvate, ali počnu s zadanom veličinom slova 1em i zadanom obitelji fonta Arial, Ženeva ili nekog drugog fonta sans-serif. 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 biste mogli pronaći tekst, ali p , th , td , li , dd , i dt su dobar početak za definiranje osnovnog fonta. uključiti HTML i tijelo samo u slučaju, ali mnogi preglednici nadjačavaju odabir fontova ako definirate samo 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.

hl, 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; }

Nemojte zaboraviti 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:

• linkovi kao plava
• posjećene veze kao tamnoplava
• lebdjeti veze kao svijetlo plava
• aktivne veze kao i blijedo plavo

kao što je prikazano u ovom primjeru:

a: link {color: # 00f; }a: posjetio {color: # 009; }a: zadržite se {color: # 06f; }a: aktivno {color: # 0cf; }

Stiliranjem veza s prilično neškodljivom shemom boja osigurava se da ne zaboravite niti jednu od klasa i čini ih malo manje glasno 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; } hl, 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 {color: # 00f; } a: posjetio {color: # 009; } a: zadržite se {color: # 06f; } a: aktivno {color: # 0cf; }