01 de 10
Krei la CSS-Stilon-Folion
La saman manieron ni kreis apartan teksta dosieron por la HTML, vi kreos tekston por la CSS. Se vi bezonas vidaĵojn por ĉi tiu procezo bonvolu vidi la unuan lernilon. Jen la paŝoj por krei vian CSS-stilon en Notepad:
- Elektu dosieron> Nova en Notepad por akiri malplenan fenestron
- Konservu la dosieron kiel CSS per klako de dosiero
- Iru al la dosierujo de mia retejo en via disko
- Ŝanĝi la "Konservi kiel Tipo:" al "Ĉiuj dosieroj"
- Nomu vian dosieron "styles.css" (forigu la citaĵojn) kaj alklaku Konservi
02 de 10
Ligu la CSS-Stilon-Folion al Via HTML
Unufoje vi havas stilon por via retejo, vi devos asocii ĝin al la TTT-paĝo mem. Por fari ĉi tion vi uzas la ligilon. Metu la sekvan etikedon interne de la
03 de 10
Fiksi la paĝon Margins
Kiam vi skribas XHTML por diversaj retumiloj, unu afero vi lernos estas, ke ĉiuj ŝajnas havi malsamajn randojn kaj regulojn pri kiel ili montras aferojn. La plej bona maniero por certigi, ke via retejo aspektas samaj en la plej multaj retumiloj, ne permesos, kiel la randoj, defaŭlte al la elekto de la retumilo.
Mi preferas komenci miajn paĝojn en la supra maldekstra angulo, sen ekstra kompletigo aŭ rando ĉirkaŭanta la tekston. Eĉ se mi alklakos la enhavojn, mi starigas la randojn al nulo por ke mi komenciĝu per la sama blanka skribtabulo. Por fari tion, aldonu la jenan al via stiloj.css-dokumento:
html, korpo {
rando: 0px;
kompletigo: 0px;
limo: 0px;
maldekstra: 0px;
supro: 0px;
}
04 de 10
Ŝanĝi la tiparon sur la paĝo
La tiparo estas ofte la unua afero, kiun vi volas ŝanĝi en Retpaĝo. La defaŭlta tiparo en TTT-paĝo povas esti malbela, kaj fakte estas la TTT-retumilo, do se vi ne difinas la tiparon, vi vere ne scios, kiel aspektos via paĝo.
Tipe, vi ŝanĝus la tiparon en alineoj, aŭ foje en la tuta dokumento mem. Por ĉi tiu retejo ni difinos la tiparon ĉe la kaplinio kaj alinea nivelo. Aldonu la jenan al via stiloj.css-dokumento:
p, li {
tiparo: 1em Arial, Helvetica, sans-serif;
}
h1 {
tiparo: 2em Arial, Helvetica, sans-serif;
}
h2 {
tiparo: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
tiparo: 1.25em Arial, Helvetica, sans-serif;
}
Mi komencis kun 1em kiel mia baza grandeco por alineoj kaj listaj eroj, kaj tiam uzis tion por agordi la grandecon por miaj titoloj. Mi ne esperas uzi titolon pli profunda ol h4, sed se vi planas, vi volas stiligi ĝin ankaŭ.
05 de 10
Farante Viajn Ligojn Pli Interesa
La defaŭlta koloroj por ligiloj estas bluaj kaj purpuraj por nevideblaj kaj vizititaj ligoj respektive. Dum ĉi tio estas normo, ĝi eble ne taŭgas la kolorkemon de viaj paĝoj, do ni ŝanĝu ĝin. En via stiloj.css-dosiero, aldonu la jenajn:
a: ligilo {
tiparo-familio: Arial, Helvetica, sans-serif;
koloro: # FF9900;
teksto-dekoracio: subskriba;
}
a: vizitita {
koloro: # FFCC66;
}
a: ŝvebi {
fono: #FFFFCC;
tiparo-pezo: aŭdaca;
}
Mi starigis tri ligilojn, la: ligilon kiel la defaŭltan, a: vizitita por kiam ĝi estas vizitata, mi ŝanĝas la koloron, kaj: ŝvebi. Kun: ŝvebado mi havas la ligilon akiri fonkoloron kaj iru aŭdaca por emfazi, ke ĝi estas ligilo alklakita.
06 de 10
Stiligante la Sekcion de Navigado
Pro tio, ke ni unue sekvas la sekcion de navigado (id = "nav") en la HTML, ni unue stiligu ĝin. Ni devas indiki kiom larĝe ĝi devas esti kaj meti pli larĝan randon dekstre por ke la ĉefa teksto ne kontraŭstaros ĝin. Mi ankaŭ metas limon ĉirkaŭ ĝi.
Aldonu la jenan CSS al via stiloj.css-dokumento:
#nav {
larĝa: 225px;
rando-dekstra: 15px;
limo: meza solida # 000000;
}
#nav li {
listo-stilo: neniu;
}
.footer {
tiparo-grandeco: .75em;
klara: ambaŭ;
larĝa: 100%;
teksto-alineo: centro;
}
La listo-stila propraĵo starigas la liston ene de la sekcio de navigado por havi neniujn kuglojn aŭ nombrojn, kaj la .footer-stiloj la aŭtorrajta sekcio estas pli malgranda kaj centrita ene de la sekcio.
07 de 10
Pozicio de la Ĉefa Sekcio
Per posicionado de via ĉefa sekcio kun absoluta pozicio, vi povas certiĝi, ke ĝi restos precize, kie vi volas, ke ĝi restu sur via retejo. Mi faris mian 800px larĝe pli multe pli bone kontentigi pli grandajn monitorojn, sed se vi havas pli malgrandan monitoron, vi eble volas fari tiun pli mallarĝan.
Loku la jenan en via stiloj.css-dokumento:
#main {
larĝa: 800px;
supro: 0px;
pozicio: absoluta;
maldekstra: 250px;
}
08 de 10
Stiligante viajn alineojn
Pro tio ke mi jam starigis la alinean fonton supre, mi volis doni al ĉiu alineo iom ekstra "piedbaton" por ke ĝi fariĝu pli bona. Mi faris ĉi tion metante limon sur la supro, kiu emfazis la alineon pli ol nur la bildon sole.
Loku la jenan en via stiloj.css-dokumento:
.topline {
limo-supro: dika solida #FFCC00;
}
Mi decidis fari ĝin kiel klaso nomata "topline" prefere ol nur difini ĉiujn alineojn de tiu maniero. De ĉi tiu maniero, se mi decidas, ke mi volas havi alineon sen supro flava linio, mi simple povas forlasi la klason = "topline" en la alinea etikedo kaj ĝi ne havos la supran limon.
09 de 10
Stiligante la Bildojn
Bildoj kutime havas limon ĉirkaŭ ili, ĉi tio ne ĉiam videblas, se la bildo estas ligo, sed mi ŝatas havi klason ene de mia CSS-stilfolio, kiu malŝaltas aŭtomate la limon. Por ĉi tiu stilfolio, mi kreis la "nobordon" klason, kaj la plej multaj bildoj en la dokumento estas parto de ĉi tiu klaso.
La alia speciala parto de ĉi tiuj bildoj estas ilia loko sur la paĝo. Mi volis, ke ili estu parto de la alineo, kiun ili eniris sen uzi tabulojn por aligi ilin. La plej simpla maniero fari ĉi tion estas la uzo de la flosata CSS-posedaĵo.
Loku la jenan en via stiloj.css-dokumento:
#main img {
flosas: maldekstre;
rando-dekstra: 5px;
rando-fundo: 15px;
}
.nobordo {
limo: 0px nenio;
}
Kiel vi povas vidi, ankaŭ ekzistas randoj de proprietoj bazitaj sur la bildoj, por certigi, ke ili ne estas frakasitaj kontraŭ la flosita teksto, kiu estas apud ili en la alineoj.
10 el 10
Nun Rigardu Vian Kompletitan Paĝon
Unufoje vi savis vian CSS, vi povas reŝargi la paĝon de pets.htm en via retumilo. Via paĝo aspektas simila al tiu, kiu montras en ĉi tiu bildo, kun bildoj vicigitaj kaj la navigado metita ĝuste sur la maldekstra flanko de la paĝo.
Sekvu ĉi tiujn samajn paŝojn por ĉiuj viaj internaj paĝoj por ĉi tiu retejo. Vi volas havi unu paĝon por ĉiu paĝo en via navigado.