01 ta '10
Oħloq il-Folja Stil CSS
Bl-istess mod ħloqna fajl ta 'test separat għall-HTML, ser toħloq fajl tat-test għas-CSS. Jekk għandek bżonn viżwali għal dan il-proċess ara l-ewwel tutorja. Hawn huma l-passi biex toħloq il-karta tal-istil tas-CSS tiegħek fin-Notepad:
- Agħżel Fajl> Ġdid fl-Notepad biex tikseb tieqa vojta
- Ħlief il-fajl bħala CSS billi tikklikja File
- Mur fil-folder my_website fuq il-hard drive tiegħek
- Ibdel il- "Save As Type:" għal "All Files"
- Isem il-fajl tiegħek "styles.css" (ħalli barra l-kwotazzjonijiet) u kklikkja Save
02 ta '10
Irranka l-Karta tal-Istil tas-CSS mal-HTML tiegħek
Ladarba tkun ħadt folja tal-istil għall-websajt tiegħek, ikollok bżonn tassoċjaha mal-paġna tal-Web stess. Biex tagħmel dan, tuża t-tikketta tal-link. Poġġi t-tikketta tal-link li ġej fi kwalunkwe post ġewwa t-tabelli
tad-dokument pets.htm tiegħek:03 ta '10
Waħħal il-Marġini tal-Paġna
Meta tkun qed tikteb XHTML għal browsers differenti, ħaġa li titgħallem hija li dawn kollha jidhru li għandhom marġini u regoli differenti dwar kif juru l-affarijiet. L-aħjar mod biex ikun żgur li s-sit tiegħek iħares l-istess fil-biċċa l-kbira tal-browsers huwa li ma jħallux affarijiet bħall-marġini għall-inadempjenza għall-għażla tal-browser.
Nippreferi li tibda l-paġni tiegħi fil-kantuniera tax-xellug ta 'fuq, bl-ebda ikkuttunar jew marġini extra li jdawwar it-test. Anki jekk immur il-kontenut, nistabbilixxi l-marġini għal żero sabiex nibda bl-istess lavanja vojta. Biex tagħmel dan, żid dan li ġej fid-dokument tiegħek styles.css:
html, korp {
marġni: 0px;
ikkuttunar: 0px;
fruntiera: 0px;
xellug: 0px;
top: 0px;
}
04 ta '10
Nibdlu l-Font fuq il-Paġna
It-tipa ta 'spiss tkun l-ewwel ħaġa li tkun trid tibdel fuq paġna tal-Web. Il-font default fuq paġna tal-Web tista 'tkun ikrah, u fil-fatt hija l-web browser innifisha, hekk jekk ma tiddefinix il-font, int verament mhux se tkun taf x'inhi l-paġna tiegħek.
Tipikament, tista 'tibdel it-tipa fuq paragrafi, jew xi drabi fuq id-dokument kollu nnifsu. Għal dan is-sit ser niddefinixxu l-font fl-intestatura u l-livell tal-paragrafu. Żid dan li ġej fid-dokument styles.css tiegħek:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Bdejt b'1em bħala d-daqs bażi tiegħi għal paragrafi u oġġetti tal-lista, u mbagħad użajt dak biex niffissa d-daqs għall-aħbarijiet tiegħi. Ma nistennax li tuża ċima aktar profonda minn h4, imma jekk qed tippjana li tkun trid ukoll tpinġiha.
05 ta '10
Nagħmlu Links Tiegħek Aktar Interessanti
Il-kuluri awtomatiċi għall-links huma blu u vjola għal links mhux mistennija u żaru rispettivament. Filwaqt li dan huwa standard, jista 'ma jkunx jaqbel ma' l-iskema tal-kulur tal-paġni tiegħek, allura ħalli nbiddlu. Fil-fajl styles.css tiegħek, żid dan li ġej:
a: link {
font-family: Arial, Helvetica, sans-serif;
kulur: # FF9900;
dekorazzjoni tat-test: tissottolinja;
}
a: żaru {
kulur: # FFCC66;
}
a: hover {
isfond: #FFFFCC;
font-weight: grassa;
}
I waqqaf tliet stili ta 'rabta, il-link: in-nuqqas, a: żar għal meta kien miżjur, nibdel il-kulur, u a: imbagħad. Permezz ta ': imbagħad irid ikollok il-link tikseb kulur ta' l-isfond u mur bold biex tenfasizza li din hija link li għandha tkun għafast.
06 ta '10
Styling tat-Taqsima tan-Navigazzjoni
Peress li aħna npoġġu n-navigazzjoni (id = "nav") it-taqsima l-ewwel fl-HTML, ejja nagħmlu l-istil l-ewwel. Għandna nindikaw kemm għandha tkun wiesgħa u niżżel marġni usa 'fuq il-lemin sabiex it-test prinċipali ma jmurx kontra dan. Qiegħed ukoll nimxi madwarha.
Żid is-CSS li ġejja mad-dokument tiegħek styles.css:
#nav {
wisa ': 225px;
dritt tal-marġni: 15px;
fruntiera: solidu medju # 000000;
}
#nav li {
list-style: xejn;
}
.footer {
daqs tat-tipa: .75em;
ċar: it-tnejn;
wisa ': 100%;
text-align: center;
}
Il-proprjetà ta 'l-istil tal-lista tistabbilixxi l-lista fit-taqsima tan-navigazzjoni biex ma jkollhiex balal jew numri, u l-istili ta' l-awtur ikunu s-sezzjoni ta 'l-awtur iżgħar u ċċentrata fit-taqsima.
07 ta '10
Pożizzjonar tas-Sezzjoni Prinċipali
Permezz tat-tqegħid tat-taqsima prinċipali tiegħek b'posizzjonament assolut tista 'tkun ċert li se tibqa eżattament fejn trid li toqgħod fuq il-paġna tal-Web tiegħek. Għamilt mini 800px wiesgħa biex takkomoda monitors ikbar, imma jekk għandek monitor iżgħar, tista 'tkun tixtieq li tagħmel dak iddettaljat.
Poġġi dan li ġej fid-dokument styles.css tiegħek:
#main {
wisa ': 800px;
top: 0px;
pożizzjoni: assoluta;
xellug: 250px;
}
08 ta '10
Styling Il-Paragrafi Tiegħek
Peress li diġà stajt issettja l-font tal-paragrafu ta 'hawn fuq, jien ridt li tagħti lil kull paragrafu ftit "kick" żejjed biex tagħmilha aħjar. Għamilt dan billi poġġejt il-fruntiera fuq in-naħa ta 'fuq li tenfasizza l-paragrafu aktar milli sempliċement l-immaġni waħedha.
Poġġi dan li ġej fid-dokument styles.css tiegħek:
.topline {
top tal-fruntiera: solidu oħxon # FFCC00;
}
Iddeċidejt li nagħmilha bħala klassi msejħa "topline" aktar milli sempliċement tiddefinixxi l-paragrafi kollha b'dan il-mod. B'dan il-mod, jekk jiddeċiedi nixtieq li jkollok paragrafu mingħajr linja safranija, nista 'sempliċement inħalli barra l-klassi = "topline" fit-tikketta tal-paragrafu u mhux se jkollu l-ogħla fruntiera.
09 ta '10
Styling the Images
L-immaġni tipikament għandhom fruntiera madwarhom, dan mhux dejjem viżibbli sakemm l-immaġni ma tkunx ħolqa, imma jien nixtieq li jkolli klassi fi ħdan il-fuljett tas-CSS tiegħi li jixgħel il-fruntiera awtomatikament. Għal din l-istil, ħloqna l-klassi "noborder", u ħafna mill-immaġini fid-dokument huma parti minn din il-klassi.
Il-parti speċjali l-oħra ta 'dawn ix-xbihat hija l-post tagħhom fuq il-paġna. Xtrajt li dawn ikunu parti mill-paragrafu li kienu mingħajr l-użu ta 'tabelli biex jallinjawhom. L-eħfef mod kif isir dan huwa li tuża l-proprjetà CSS float.
Poġġi dan li ġej fid-dokument styles.css tiegħek:
#main img {
float: left;
dritt tal-marġni: 5px;
qiegħ tal-marġni: 15px;
}
.noborder {
fruntiera: 0px xejn;
}
Kif tistgħu taraw, hemm ukoll proprjetajiet ta 'marġini mpoġġija fuq l-istampi, biex jiġi żgurat li ma jiġux imtaffija kontra t-test flessibbli li jinsab ħdejn dawn fil-paragrafi.
10 ta '10
Issa Ħares lejn il-Paġna Completed tiegħek
Ladarba tkun salvat is-CSS tiegħek tista 'terġa' tagħlaq il-paġna pets.htm fil-web browser tiegħek. Il-paġna tiegħek għandha tidher simili għal dik murija f'din l-istampa, b'immaġnijiet allinjati u n-navigazzjoni mqiegħda sew fuq in-naħa tax-xellug tal-paġna.
Segwi dawn l-istess passi għall-paġni interni kollha tiegħek għal dan is-sit. Trid ikollok paġna waħda għal kull paġna fin-navigazzjoni tiegħek.