Superrigardo pri Kaskadaj Stilaj Folioj Kun Specimena Stilo
Kiam vi kreas retejon de nulo, ĝi estas inteligenta por komenci kun la bazaj stiloj difinitaj. Ĝi estas kiel komencanta per pura tolo kaj freŝaj brosoj. Unu el la unuaj problemoj, kiujn alfrontas la retpaĝistoj, estas, ke retumiloj estas tute malsamaj. La defaŭlta tipara grandeco diferencas de platformo al platformo, la defaŭlta tipara familio estas malsama, iuj retumiloj difinas randojn kaj kompletigas la korpon etikedo dum aliaj ne faras, kaj tiel plu. Akiri ĉi tiujn nekonsekvencojn difinante la defaŭltajn stilojn por viaj retpaĝoj.
CSS kaj la Karaktero
Unuaj aferoj unue, starigu la karakteron-aro de viaj CSS-dokumentoj al utf-8 . Kvankam plej verŝajne la plej multaj paĝoj, kiujn vi desegnas, estas skribitaj en la angla, iuj povas esti lokitaj adaptitaj por malsamaj lingva kaj kultura kunteksto. Kiam ili estas, utf-8 simpligas la procezon. Agordi la karakteron agorditan en la ekstera stilo-folio ne havos precedencon super HTTP-kaplinio , sed en ĉiuj aliaj situacioj, ĝi faros.
Estas facile agordi la karakteron aro. Ĉar la unua linio de la CSS-dokumento skribas:
@charset "utf-8";De ĉi tiu maniero, se vi uzas internaciajn karakterojn en la enhavo propraĵo aŭ kiel klaso kaj ID-nomoj, la stilo-folio ankoraŭ funkcias ĝuste.
Stiligante la Paĝon-Korpo
La sekva afero defaŭlta stilo-folioj bezonas stilojn por nuligi randojn, kompletigojn kaj limojn. Ĉi tio certigas, ke ĉiuj foliumiloj lokas la enhavon en la sama loko, kaj ne ekzistas kaŝitaj spacoj inter la retumilo kaj la enhavo. Por plej multaj retpaĝoj, ĉi tio estas tro proksima al la rando por teksto, sed ĝi estas grava por komenci tien, tiel ke fono bildoj kaj aranĝaj dividoj estas vicigitaj ĝuste.
html, korpo {margin: 0px; kompletigo: 0px; limo: 0px; }Fiksu la defaŭltan antaŭan fonon aŭ tiparon al nigra kaj la defaŭlta fona koloro al blanka. Dum ĉi tio verŝajne ŝanĝos la plej multajn retpaĝajn dezajnojn, havante ĉi tiujn normajn kolorojn starigitajn en la korpo kaj HTML-etikedo , unue la paĝo pli facile legu kaj laboras.
html, korpo {koloro: # 000; fono: #fff; }Defaŭlta Font Stiloj
La tiparo kaj tipara familio estas io, kio neeviteble ŝanĝos, kiam la dezajno kroĉas, sed komenciĝos kun defaŭlta tipara grandeco de 1 em kaj defaŭlta tipara familio de Arial, Ĝenevo aŭ iu alia sana-serfonta fonto. La uzo de ems konservas la plej atingeblan paĝon, kaj sans-serif-fonto estas pli facila en la ekrano.
html, korpo, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Ekzistas aliaj lokoj, kie vi povus trovi tekston, sed p , th , td , li , dd , kaj dt estas bona komenco por difini la bazan tiparon. Inkluzivi HTML kaj korpon kaze, sed multaj foliumiloj anstataŭas la tipajn elektojn, se vi nur difinas viajn tiparojn por la HTML aŭ korpo.
Titoloj
HTML-titoloj estas gravaj por uzi por helpi vian ejon-strekon kaj lasu serĉilojn pli profunde en vian retejon. Sen stiloj, ili ĉiuj estas sufiĉe malbelaj, do agordi defaŭltajn stilojn sur ĉiuj ili kaj difini la tiparon kaj la tipajn grandecojn por ĉiu.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-grandeco: 1.5em; } h3 {font-grandeco: 1.2em; } h4 {font-grandeco: 1.0em; } h5 {font-grandeco: 0.9em; } h6 {font-grandeco: 0.8em; }Donu Ne Forgesu la Ligojn
Stiligi la ligajn kolorojn estas preskaŭ ĉiam kritika parto de la dezajno, sed se vi ne difinas ilin laŭ la defaŭlta stiloj, eble vi forgesos almenaŭ unu el la pseŭdoklasoj. Difini ilin per iom da malgranda variado sur blua kaj poste ŝanĝi ilin, kiam vi havas la koloron paleton por la difinita retejo.
Por agordi la ligilojn en ombroj de blua, aro:
- ligoj kiel blua
- vizitis ligojn kiel malhelajn bluajn
- ŝvebi ligojn kiel lumo
- aktivaj ligoj kiel eĉ pli palaj bluaj
kiel montriĝas en ĉi tiu ekzemplo:
a: ligilo {koloro: # 00f; } a: vizitis {koloron: # 009; } a: ŝvebu {koloro: # 06f; } a: aktiva {koloro: # 0cf; } Per la ligiloj kun sufiĉe senkulpa kolorskemo, ĝi certigas, ke mi ne forgesos iun ajn el la klasoj, kaj ankaŭ faras ilin iom malpli laŭta ol la defaŭlta blua, ruĝa kaj purpura.Plena Stilo Folio
Jen la plena stilo-folio:
@charset "utf-8"; html, korpo {margin: 0px; kompletigo: 0px; limo: 0px; koloro: # 000; fono: #fff; } html, korpo, 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-grandeco: 1.5em; } h3 {font-grandeco: 1.2em; } h4 {font-grandeco: 1.0em; } h5 {font-grandeco: 0.9em; } h6 {font-grandeco: 0.8em; } a: ligilo {koloro: # 00f; } a: vizitis {koloron: # 009; } a: ŝvebu {koloro: # 06f; } a: aktiva {koloro: # 0cf; }