Ukukhwabanisa i-Notepad Yakha iWebhu Page kunye neCSS

01 ngo-10

Yakha i-CSS Style Sheet

Ngendlela efanayo senze iifayile zetekisi eyahlukileyo kwi-HTML, uya kudala ifayile yombhalo weCSS. Ukuba ufuna iimboniselo kule nkqubo nceda ubone isifundo sokuqala. Namanyathelo okudala ishidi lakho lesitayela seCSS kwi-Notepad:

1. Khetha Ifayile> Entsha kwi-Notepad ukufumana iwindi engenanto
2. Gcina ifayile njengeCSS ngokuchofoza iFayile
3. Jongela kwi-folder yami_ebsite kwi-hard drive yakho
4. Tshintsha "Gcina njengohlobo:" kwi "Zonke iiFayile"
5. Qamba igama lakho "iifayile.css" (shiya iicatshulwa) kwaye nqakraza Gcina

02 ngo 10

Xhumanisa i-CSS Style Sheet kwi-HTML yakho

Xa usufumene ishidi lewebhu kwiWebhsayithi yakho, kuya kufuneka udibanise nekhasi lewebhu ngokwalo. Ukwenza oku usebenzisa i-link yekhonkco. Beka ithegi yekhonkco elandelayo naphi apha ngaphakathi tags of your animal.htm document:

03 ngo 10

Hlela iManqa

Xa ubhala i-XHTML yeziphequluli ezahlukeneyo, enye into oyifunayo kukuba bonke babonakala benemida ehlukileyo kunye nemigaqo yokuba babonisa njani izinto. Indlela efanelekileyo yokuqinisekisa ukuba indawo yakho ibonakala efanayo kwiibhenqa ezininzi ukuba ungavumeli izinto ezinjengezentlambo ukuba zenzeke kwikhethri yokukhetha.

Ndikhetha ukuqala amaphepha am ekhoneni elingasentla elingasentla, kungabikho kwinqwelo elongezelelweyo okanye umgama ojikeleze umbhalo. Nangona ndiza kudibanisa iziqulatho, ndibeka iigxininiso kwi-zero ukuze ndiqalise nge-slate efanayo. Ukwenza oku, faka oku kuxwebhu lwakho lwezitayela.css:

html, umzimba {
umgama: 0px;
ukupakisha: 0px;
Umda: 0px;
sekhohlo: 0px;
phezulu: 0px;
}

04 we-10

Ukutshintsha Umxholo kwiPhepha

Ifonti yinto eyokuqala into ofuna ukutshintsha kwiphepha leWebhu. Impazamo engagqibekanga kwikhasi leWeb ingaba yingozi, kwaye empeleni ikhuphe i-Web browser, ngoko ke ukuba awuyi kuchazi ifayile, awuyi kubuya uyazi ukuba iphepha lakho liyakubonakala ngathi.

Ngokuqhelekileyo, unokutshintsha ifayile kumhlathi, okanye ngamanye amaxesha kuwo wonke umbhalo ngokwayo. Kule ndawo siza kuchaza ifayile kwi-header nakwinqanaba lomhlathi. Yongeza oku kuxwebhu lwakho lwezitayela.css:

p, li {
umgca: I-Arial, Helvetica, sans-serif;
}
h1 {
umgca: i-Arial, Helvetica, sans-serif;
}
h2 {
umgca: 1.5m Arial, Helvetica, sans-serif;
}
h3 {
umgca: 1.25m Arial, Helvetica, sans-serif;
}

Ndaqala nge-1em njengobungakanani bam esiseko samagatya kunye nezinto zohluhlu, kwaye ke ndisebenzisa ukuba kusethe ubungakanani beendaba zam. Andilindele ukusebenzisa umxholo ophezulu kunama-h4, kodwa ukuba uceba ukuba uya kufaka ukuyibiza.

05 we-10

Ukwenza Izixhumanisi Zakho Zithandekayo

Imibala engapheliyo yoqhagamshelwano iluhlaza okwesibhakabhaka kunye nemfusa engabonwanga kwaye ivakashele ngokulandelanayo. Nangona oku kusemgangathweni, kungenako ukulungelelanisa icebo lamaphepha akho, ngoko masiwuguqule. Kwifayile yakho yeefayile.css, faka oku kulandelayo:

: ikhonkco {
yentsapho-yamagama: Arial, Helvetica, sans-serif;
umbala: # FF9900;
Umbhalo-umhlobiso: gxininisa;
}
: wa tyelela {
Umbala: # FFCC66;
}
: hover {
imvelaphi: #FFFFCC;
ubungakanani befonti: isibindi;
}

Ndimise iindlela ezintathu zokudibanisa, i: link as default, a: tyelelwa xa ihanjelwe, nditshintsha umbala, kwaye: i-hover. Ngoku: i-hover ine-link ifumana umbala wesiqalo kwaye uye ngesibindi ukuze ugcizelele ukuba unxibelelwano oluqakrazayo.

06 ngo 10

Ukubetha iCandelo lokuHlola

Ekubeni sibeka uphawu lokuhamba (id = "nav") kuqala kwi-HTML, makhe siyiqale. Sifanele sibonise ukuba kufuneka ububanzi bunjani kwaye ufake umgama osezantsi kwicala lasekunene ukuze isicatshulwa esiyihloko singayi kulwa nayo. Ndibeka kwakhona umda malunga nawo.

Yongeza le CSS elandelayo kwixwebhu lakho lodidi.css:

#nav {
ububanzi: 225px;
umda osekunene: 15px;
Umda: umgangatho ophakathi # 000000;
}
#nav li {
uluhlu lwesalathisi: akukho;
}
.footer {
ubungakanani befonti: .75em;
kucace: zombini;
ububanzi: 100%;
ukulungelelanisa umbhalo: isikhungo;
}

Ipropati yecala loluhlu lubeka uludwe ngaphakathi kwinqanaba lokuhamba ukuze lingabi namabhola okanye amanamba, kunye neefoto zefofooter kwicandelo lobunikazi libe lincinci kwaye lijoliswe kwicandelo.

07 ngo 10

Ukubeka iCandelo eliPhambili

Ngokubeka icandelo lakho eliphambili ngokubeka ngokuqinisekileyo unokuqiniseka ukuba kuya kuhlala apho ufuna ukuba ihlale kwiwebhsayithi yakho. Ndenze i-800px yam ububanzi ukuba ihambelane nabagadi abaphezulu, kodwa ukuba unononophelo oluncinane, unokuba ufuna ukwenza loo mncinci.

Beka ezi zilandelayo kwixwebhu lakho lomgca.css:

#main {
ububanzi: 800px;
phezulu: 0px;
isikhundla: ngokupheleleyo;
sekhohlo: 250px;
}

08 ngo 10

Ukuthabatha imihlathi yakho

Ekubeni sele ndibekile umgca womgca ngenhla, ndandifuna ukunika umhlathi ngamnye "ukukhaba" okukodwa ukuze wenze ngcono. Ndenze oku ngokubeka umngcele phezulu obalaselisa umhlathi ngaphezu nje komfanekiso wedwa.

Beka ezi zilandelayo kwixwebhu lakho lomgca.css:

.tholi {
phezulu-umda: umxhasi oqinileyo # FFCC00;
}

Ndagqiba kwelokuba ndenze iklasi ebizwa ngokuthi "phezulu" kunokuba ichaze yonke imihlathi ngaleyo ndlela. Ngaloo ndlela, ukuba ndiyinqumle ukuba ndifuna ukuba nomhlathi ngaphandle komgca ophezulu ophuzi, ndiyakwazi ukushiya iklasi = "phezulu" kumhlathi wemihlathi kwaye ayiyi kuba nomda ophezulu.

09 we-10

Ukuthabatha iMifanekiso

Imifanekiso ifanele ibe nomda ojikeleze kubo, oku akusoloko ibonakala ngaphandle kokuba umfanekiso unxibelelwano, kodwa ndiyakuthanda ukuba neklasi ngaphakathi kwimiqulu yamatshini e-CSS evala umda ngokuzenzekelayo. Kule stylesheet, ndidale idilasi "noborder", kwaye ininzi imifanekiso ekhompyutheni inxalenye yale klasi.

Elinye inxalenye ekhethekileyo yale mifanekiso yindawo yabo kwiphepha. Ndandifuna ukuba babe yingxenye yomhlathi ababekhona ngaphandle kokusebenzisa amacwecwe ukulungelelanisa. Indlela elula yokwenza oku kukusebenzisa isakhiwo se-CSS.

Beka ezi zilandelayo kwixwebhu lakho lomgca.css:

#main img {
float: ekhohlo;
umda osekunene: 5px;
umgca wezantsi: 15px;
}
.noborder {
Umda: 0px nanye;
}

Njengoko uyakubona, kukho iindawo ezisemgangathweni ezisetyenziswe kwimifanekiso, ukuqinisekisa ukuba ayichithwanga kwisicatshulwa esiphezulu esiseziqendu.

10 kwi-10

Ngoku Khangela kwiCandelo lakho eligqityiweyo

Emva kokuba usugcine iCSS yakho ungaphinda ulayishe kwakhona iphepha leepets.htm kwisiphequluli sakho sewebhu. Ikhasi lakho lifanele libukeke lifana nalo eliboniswe kulo mfanekiso, kunye neefoto ezihambelanisiweyo kwaye ukuhamba kweendlela kufakwe ngokufanelekileyo kwicala lasekhohlo lephepha.

Landela la manqaku afanayo kuwo onke amaphepha akho angaphakathi kule sayithi. Ufuna ukuba nekhasi elilodwa kwiphepha ngalinye ekuhambeni kwakho.