Pregled kaskadnih stilskih listova sa uzorkom stil listom
Kada izgradite web lokaciju od ogrebotina, pametno je da počnete sa definisanim osnovnim stilovima. Kao da počinjemo čistim platnom i svežim četkama. Jedan od prvih problema sa kojima se susreću web dizajneri je da su svi pretraživači različiti. Podrazumevana veličina fonta se razlikuje od platforme do platforme, podrazumevana porodica fontova je različita, neki pregledači definišu margine i padding na oznaci tela, dok drugi ne rade, i tako dalje. Objasnite ove nedoslednosti definisanjem podrazumevanih stilova za svoje web stranice.
CSS i Set karaktera
Prvo prvo postavite skup znakova vaših CSS dokumenata na utf-8 . Iako je verovatno da je većina stranica koje dizajnirajte napisane na engleskom jeziku, neke mogu biti lokalizovane - prilagođene različitim jezičkim i kulturnim kontekstima. Kada su, utf-8 pojednostavljuje proces. Podešavanje skupa znakova u spoljašnjem stilu neće imati prioritet nad HTTP zaglavljenom , ali u svim drugim situacijama to će učiniti.
Lako podešavanje skupa znakova. Za prvu liniju CSS dokumenta upišite:
@charset "utf-8";Na ovaj način, ako koristite međunarodne znakove u svojstvu sadržaja ili kao imena klasa i ID- ova, stilski stil će i dalje funkcionirati ispravno.
Styling Body Page
Sledeća stvar koju je potreban standardni stil liste su stilovi do nula od margina, paddinga i granica. Ovo omogućava da svi pregledači stavljaju sadržaj na isto mesto, a između pregledača i sadržaja nema sakrivenih prostora. Za većinu web stranica to je previše blizu ivice teksta, ali važno je da se tamo započne tako da su pozadinske slike i podjele rasporeda ispravno postavljene.
html, body {margin: 0px; padding: 0px; granica: 0px; }Podesite podrazumevano prednje ili boje fonta u crno, a podrazumevana boja boje boje. Iako se ovo najverovatnije menja za većinu web stranica dizajna, imajući ove standardne boje postavljene na tijelo i HTML tag na početku čini stranicu lakšim za čitanje i rad s njima.
html, telo {color: # 000; pozadina: #fff; }Podrazumevani fontovi stilova
Veličina fonta i porodica fontova su nešto što će se neizbežno promijeniti kada se dizajn zatvori, ali počnite sa podrazumevanom veličinom fonta od 1 em i podrazumevanom fontom porodice Arial, Ženeva ili neki drugi sans-serif font. Upotreba ems-a zadržava stranicu što je moguće pristupačnija, a sans-serif font je čitljiviji na ekranu.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Možda postoje i druga mesta na kojima možete naći tekst, ali p , th , td , li , dd i dt su dobar početak za definisanje osnovnog fonta. Uključite HTML i tijelo za svaki slučaj, ali mnogi pregledači preteruju izbor fonta ako samo definišete svoje fontove za HTML ili tijelo.
Headlines
HTML zaglavlja su važne za korištenje kako bi pomogli pregledu sajta i omogućili da se pretraživači dublje nalaze na vašoj web lokaciji. Bez stilova, svi su prilično ružni, tako da podrazumevaju podrazumevane stilove na svim njima i definišu porodicu fontova i veličine fontova za svaku od njih.
h1, h2, h3, h4, h5, h6 {font-family: 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 zaboravi veze
Stajanje boja veze je skoro uvek kritičan dio dizajna, ali ako ih ne definišete u podrazumevanim stilovima, šanse su da ćete zaboraviti bar jednu od pseudo-klasa. Definišite ih sa malim varijacijama na plavoj i zatim ih mijenjati kada imate paletu boja za određenu lokaciju.
Da biste postavili veze u nijanse plave, podesite:
- veze kao plave
- posetio je veze kao tamno plave
- linkove lebde kao svetlo plave
- aktivne veze kao još blaže
kako je prikazano u ovom primeru:
a: link {color: # 00f; } a: posjetio {color: # 009; } a: hover {boja: # 06f; } a: aktivan {color: # 0cf; } Stajanjem veza sa jednostavno bezopasnim šeme boja osigurava da neću zaboraviti ni jednu od klasa, a takođe ih čini malo manje glasnim od default plave, crvene i ljubičaste.Full Style Sheet
Evo celog stila:
@charset "utf-8"; html, body {margin: 0px; padding: 0px; granica: 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 {font-family: 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: hover {boja: # 06f; } a: aktivan {color: # 0cf; }