Kāwele i kahi Notepad Waiho Pūnaewele Pūnaewele me CSS

01 o ka 10

E hana i ka pepa kiʻi CSS

Ma keʻano like mākou i hana ai i kahi waihona kikokikona no ka HTML, e hanaʻoe i kahi kikokikona no ka CSS. Inā makemakeʻoe i nā kiʻi no kēia kaʻina hana e nānā i ke kumu aʻo mua. Eia nāʻanuʻu e hana i kā kāʻei style CSS i ka Notepad:

1. Kōkua Kōnae> New i ka Notepad no ka loaʻaʻana o ka puka makani nele
2. E mālama i ka file e like me CSS ma ke kaomiʻana i ka File
3. E hoʻololi i ka waihona waihona my_website ma kāu'ōpili pa'ū
4. E hoʻololi i ka "Save as Type:" i "All Files"
5. Kākau i kāu pūnaewele "styles.css" (haʻalele i nā hua'ōlelo) a kaomi i Save

02 o 10

E kākaʻoi i ka pepa CSS Pepa i kāu HTML

Inā loaʻa kāu pepa lole no kāu pūnaewele pūnaewele, ponoʻoe e hoʻohui me ia i kahi pūnaewele pūnaewele iho. No kāu hanaʻana, hoʻohanaʻoe i ka leka uila. E kau i ka loulou leka ma lalo o nā o kāu pets.htm palapala:

03 o 10

Hoʻopaʻa i nā'Apau LoaʻAoʻao

Inā e kākau anaʻoe i XHTML no nā meaʻokoʻa'ē aʻe, hoʻokahi mea e aʻoʻia aiʻoe heʻano likeʻole nā ​​palena āpau a me nā lula no ka hōʻikeʻana i nā mea. ʻO ke ala maikaʻi loa e hōʻoia i keʻano like o kāu pūnaewele i ka nui o nā polokalamu kele pūnaewele iʻole eʻae i nā mea e like me nā palena wāwae e hikiʻole i ka koho polokalamu kelepona.

Makemake au e hoʻomaka i koʻu mauʻaoʻao ma kaʻaoʻao'ākau hema, me kaʻaeʻole i nā pale a me nā palena e hoʻopuni ai i ka kikokikona. ʻOiai inā e hele wau e hoʻopaʻa i nā mea, ua hoʻonoho wau i nā palena iʻole e hoʻomaka wau me ka pā kau laka. No ka hanaʻana i kēia, e hoʻohui i kēia i kāuʻaoʻao style.css:

html, kino '
Mahele: 0px;
ka pale: 0px;
palena: 0px;
ka hema: 0px;
luna: 0px;
}

04 o 10

Ka Hoʻololiʻana i nā'Amole ma kaʻAoʻao

ʻO ka momona ka mea mua e makemakeʻoe e hoʻololi ma kahi pūnaewele pūnaewele. ʻO ka laulua paʻakikī ma kahi pūnaewele pūnaewele hiki ke lilo i meaʻino, aʻo ia ka pūnaewele pūnaewele pūnaewele, no laila ināʻaʻoleʻoe e wehewehe i ka momotuhi,ʻaʻoleʻoe eʻike i keʻano o kāuʻaoʻao.

ʻO ka mea maʻamau, e hoʻololiʻoe i ka polina ma nā palakule, aiʻole ma kekahi manawa ma ka palapala a pau. No kēia pūnaewele mākou e wehewehe i ka momona ma ka pane a me ka pāʻani papa. Hoʻohui i kēia i kāuʻaoʻao style.css:

p, li {
ke kumuhana: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
ke kumuhana: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
ke kumuhana: 1.25em Arial, Helvetica, sans-serif;
}

Ua hoʻomaka wau me 1em i koʻu waihona kumu no nā palakule a me nā mea helu, a laila hoʻohanaʻia ia e hoʻonohonoho i ka nui no koʻu mau poʻo. ʻAʻole wau e manaʻo e hoʻohana i kahi poʻo i hohonu ma mua o ka h4, akā ināʻoe e hoʻolālā e makemake pahaʻoe e hana i ia.

05 o 10

Hoʻomaopopo i kou Lāhui iʻoi aku ka hoihoi

ʻO nā leka uila no nā loulou he uliuli a he poni hoʻi no nā loulou iʻikeʻoleʻia aʻikeʻia. ʻOiaiʻo kēia keʻano kūpono,ʻaʻole paha e kūpono i ka'ōnaeho kala o kou mauʻaoʻao, e hoʻololi paha ia. I kāu pūnaewele styles.ss, e hoʻohui i kēia mau mea:

a: link {
makua-family: Arial, Helvetica, sans-serif;
ʻike: # FF9900;
nā meaʻoluʻolu-i kākauʻia: lalo iho;
}
a: i kipa '
ʻike: # FFCC66;
}
a: hover {
ʻike mua: #FFFFCC;
ke kaulike-kaumaha: koa;
}

Hoʻolālā wau i nāʻano loulouʻekolu,ʻo: a ma muli o ka paʻamau, a: i kipaʻia no ka wā i kipaʻia ai, hoʻololi au i ke kala, a me: hover. Me ka: hover Ua loaʻa iaʻu ka loulou e loaʻa i kahi lae āpau a hele me ka wiwoʻole e hoʻokūkino i kahi loulou e kiliʻia.

06 o 10

Hoʻopiʻi i ka Wāhi Huli

Mai kahi mākou i hoʻokahe mua ai i ka hoʻokele (id = "nav") i ka HTML, e kāpae mua. Pono mākou e kuhikuhi i ka whānui o ka pono a kau i ka palena ākea ma kaʻaoʻao'ākau no ka meaʻaʻole e'ōkuhi ke kumu nui e kū'ē iā ia. Ua hana au i ka palena a puni.

Hoʻohui i ka CSS hou i kāuʻaoʻao style.ss:

#nav {
ke kihi: 225px;
'ākau-'ākau: 15px;
ka palena: kahi liʻiliʻi paʻa # 000000;
}
#nav li {
papa inoa-ʻaʻohe;
}
Hoʻokipa {
font-size: .75em;
wehewehe: nā meaʻelua;
whānui: 100%;
hoʻolālā-kiko: kikowaena;
}

Hiki i ka papa inoa o ka papa inoa ke hoʻonohonoho i ka papa inoa i loko o kaʻaoʻao hoʻokeleʻaʻole e loaʻa i nā pūkālā a iʻole nā ​​helu, a me nāʻaoʻao o ka wāwae e kāʻili ke kuleana kope a liʻiliʻi i loko o ka māhele.

07 o 10

Ka hoʻonohonohoʻana i kaʻaoʻao nui

Ma ka hoʻonohonohoʻana i kāu mahele nui me ka hoʻonohonoho paʻa loa hiki iāʻoe ke maopopo e noho paʻa kahi i makemake aiʻoe e noho ma kāuʻaoʻao pūnaewele. Ua hana wau i koʻu 800px ākea e hele i nā mākaʻi nui, akā inā he'ōkuene liʻiliʻi pahaʻoe, hiki paha iāʻoe ke hana i kahiʻoi aku.

E kau i kēia ma kāuʻaoʻao style.css:

#main [
whānui: 800px;
luna: 0px;
wahi: kūʻokoʻa;
waiho hema: 250px;
}

08 o 10

Hoʻoponopono i kāu mau'Ōlelo

Ma hope o koʻu hoʻonohoʻana i ka polina palaka ma luna nei, makemake wau e hāʻawi i kēlā me kēia māhele i ka mea hou "kī" no ka hoʻoikaikaʻana. Ua hana wau i kēia ma ke kauʻana i kahi palena ma luna e hoʻonui ana i ka paukū ma mua o ka kiʻi wale nō.

E kau i kēia ma kāuʻaoʻao style.css:

.topline {
palena palena: ka paʻa paʻa # FFCC00;
}

Ua hoʻoholo au e hana ia me he papa i kapaʻia "topline"ʻaʻole i ka weheweheʻana i nā paukū wale nō i kēlāʻano. Ma kēiaʻano, inā e hoʻoholo wau e makemake wau e loaʻa kahi palakule me ka laina melemeleʻoi aku, hiki iaʻu ke haʻalele i ka papa = "topline" i ka helu pāʻali aʻaʻole ia e loaʻa ka palena kiʻekiʻe.

09 o 10

Hoʻokala i nā kiʻi

Loaʻa i nā kiʻi i kahi palena a puni lākou,ʻaʻole hiki keʻike mauʻia kēia kiʻi inā he loulou kēia kiʻi, akā makemake wau e loaʻa kahi papa i loko o koʻu style styles CSS e hoʻohuli i ka palena palenaʻole. No kēia styleheet, ua hana wau i ka papa "noborder", aʻo ka hapa nui o nā kiʻi i loko o kēia puke he māhele o kēia papa.

ʻO kahi hapa nui o kēia mau kiʻi ko lākou wahi ma kaʻaoʻao. Ua makemake wau iā lākou e lilo i māhele o ka pakuhi i loko o ka papa me ka hoʻohanaʻole i nā papa e hoʻohālike iā lākou. ʻO ke ala maʻalahi loa e hana i kēia,ʻo ia ke hoʻohanaʻana i ka waiwai CSS float.

E kau i kēia ma kāuʻaoʻao style.css:

#main img {
ka lana: haʻalele;
'ākau-'ākau: 5px;
mika-lalo: 15px;
}
.noborder {
palena: 0px no;
}

E like me kāu eʻike ai, aia kekahi mau'āpana'āina i hoʻonohonohoʻia ma nā kiʻi, iʻole eʻokiʻia e kū'ē i ka hua lewa e pili kokoke ana iā lākou ma nā māhele.

10 o 10

E nānā i kāu hoʻopihaʻana

Ke hoʻopakeleʻoe i kāu CSS i hiki iāʻoe ke hoʻouka hou i kaʻaoʻao pets.htm ma kāu pūnaewele pūnaewele. Pono kāuʻaoʻao e like me ka mea i hōʻikeʻia ma kēia kiʻi, me nā kiʻi i hoʻokaʻawaleʻia a me ka hoʻoholo hoʻonohoʻia ma kaʻaoʻao hema o kaʻaoʻao.

E hahai i kēia mauʻanuʻu hoʻokahi no kāu mauʻaoʻao pūnaewele no kēia pūnaewele. Makemakeʻoe e loaʻa hoʻokahiʻaoʻao no kēlā me kēiaʻaoʻao o kāu hoʻokele.