E kiʻi i nā mea me kēia mau'ōlelo
Loaʻa i nā pūnaewele pūnaewele ka mea iʻikeʻia e like me "keʻano o keʻano." ʻO kēia nāʻano e kuhikuhi i ka nānā a me kaʻikeʻana o nā mea HTML ma ka neleʻana o nāʻikeʻano'ē aʻe. Eia kekahi laʻana, ma kahi o nā pūnaewele pūnaewele ka nānāʻana i nā hiʻohiʻona o nā lika liʻiliʻi he'ōniuli polū'ōniʻoniʻo me kahi laina. ʻO kēia keʻano o nā mea e pili ana i nā hiʻohiʻona keʻoleʻoe e haʻi aku iā lākou e hōʻike i kekahi ala'ē aʻe.
Hiki ke kōkua i nāʻano kaʻikaho hulili, akā i nā manawa he nui nā mea hoʻolale pūnaewele e makemake e wehe i kēia mauʻano i hiki iā lākou ke hoʻomaka hou me nāʻano i 100% i ka mana o. Hanaʻia kēia ma ka hoʻohanaʻana i ka mea i kapaʻia he "style styleheet."
ʻO ka styleheet master paha ka'eneke mua loa āu e kāhea ai i kāu mau palapala a pau. Hoʻohanaʻoe i kahi style style to clear out the settings browser that could cause problems in cross-browser Web design. I ka wā i wehe aiʻoe i keʻano me kahi style style, hoʻomaka kāu hana mai ka wahi like i nā mea nānā pūnaewele - e like me kahi kāwili maʻamau no ka pena.
Nā Palekana Paena
E hoʻomaka ke kāpena o kou haku ma ka paleʻana i nā palena, nā hoe a me nā palena ma kaʻaoʻao. Loaʻa i kekahi mea pūnaewele pūnaewele ke kino o ka palapala i 1 a 2 mau pika i hoʻokaheʻia mai nāʻaoʻao pane o ka polokalamu kele pūnaewele. A laila, hōʻoia lākou e like me kēia:
html, pilina o ke kino: 0px; ka pale: 0px; palena: 0px; }Makemakeʻoe e hana like i ke kaulike. Ponoʻoe e hoʻonohonoho i ka nui o ka momona i ka 100 pakeneka aiʻole 1em, no laila i hiki keʻikeʻia kāuʻaoʻao, akā e hoʻomau mau ana ka nui. E hōʻoia e hoʻokomo i ke kaula kiʻekiʻe.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Hōʻuluʻulu Pelekane
Kāleku poʻo poʻo kumu (headers) (H1, H2, H3, a me nā mea'ē aʻe) keʻano i keʻano wiwoʻole me nā kaha āpau a me ka paleʻana a puni lākou. Ma ka weheʻana i ke kaumaha, nā palena a me ka paleʻana, e hōʻoiaʻiʻoʻoe e mau nei kēia mau keu i ka nui (aiʻole ka liʻiliʻi) ma mua o ka kikokikona e pili ana iā lākou me ka loaʻaʻole o nāʻano'ē aʻe:
h1, h2, h3, h4, h5, h6ʻAina: 0; pale: 0; pule maʻamau: maʻamau; makua-family: Arial, Helvetica, sans-serif; }Hiki paha iāʻoe ke noʻonoʻo i ka hoʻonohonohoʻana i nā kaulike pono'ī, ka lihi-liʻiliʻi a me nā hoe i kāu mau poʻomanaʻo poʻokela, akā naʻe e piliʻiʻo ana i keʻano o ka pūnaewele āu e hoʻolālā nei a pono e haʻaleleʻia mai ka pepa maʻamau. Hiki iāʻoe ke hoʻohui i nāʻano hou no kēia mau pane e pono ai no kāu hoʻonohonoho pono'ī.
Hōʻike'Ōlelo Palekana
Ma waho o nā poʻomanaʻo, aia kekahi mau hua'ōlelo kikokikona e pono eʻike pono e holoi. ʻO kahi mea i hoʻopoina pinepineʻia e nā kānaka,ʻo ia nā mīkini lima o ka papa (TH a TD) a me nā huapalapala (SELECT, TEXTAREA, a me INPUT). Ināʻaʻoleʻoe e hoʻonoho i nā mea i like ka nui me kāuʻano a me ka māhele palaka, hiki iāʻoe ke kahaha nui i ka mea e hāʻawi ai nā mea nānā iā lākou.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {kaha: 0; pale: 0; pule maʻamau: maʻamau maʻamau maʻamau 1em / 1.25 Arial, Helvetica, sans-serif; }He mea maikaʻi nō hoʻi ke hāʻawiʻana i kāu mau hua'ōlelo (BLOCKQUOTE a me Q), acronyms, a me nāʻano pōkole i kahiʻano'ē aʻe, no laila e kū hou lākou i kahi mau mea hou aʻe:
kahi'āpana {palena: 1.25em; ke paleʻana: 1.25m} q {font-style: italic; } acronym, abbr hoʻomana: kōkua; palena palena: 1px dashed; }Nā Loulou a me nā Kiʻi
Hiki i nā loulou ke hoʻoholo a hoʻololi paha mai kēlā kikokikona uliuli i hōʻikeʻia. Makemake au e hoʻomau i kuʻu mau loulou i lalo, akā inā makemakeʻoe i kahi ala'ē aʻe e hiki iāʻoe ke hoʻonohonoho i kēia mau koho ma kahi kaʻawale. ʻAʻole au i komo i nāʻaʻahu i loko o ka pepa maʻamau, no ka mea, ma muli o ka hoʻolālā.
a, a: link, a: i kipa 'ia, a: ka hana, a: hover {kākākūkā-mea: hoʻohaʻahaʻa; }Me nā kiʻi, he mea nui e hoʻopau i nā palena. ʻOiai ka hapanui o nā polokalamu kele pūnaeweleʻaʻole e hōʻike i ka palena a puni kahi kiʻi kūpono, i ka manawa e pili ai ke kiʻi, hoʻololi ka mea huli i ka palena. E hoʻoponopono i kēia:
ʻaina palena:ʻaʻohe; }Papa
ʻOiaiʻaʻole hoʻohana houʻia nā papa no nā hoʻolālā hoʻonohonoho, hiki i kāu pūnaewele ke hoʻohana hou iā lākou no nāʻikepili pololei. He maikaʻi maikaʻi kēia i nā papa HTML. Uaʻike mākou i ka likeʻole o ka nui o ka helu o ka helu no kāu mau papa kelepona, akā aia kekahi mauʻano'ē aʻe e pono e hoʻonohoʻia e mālamaʻia kāu mau papaʻaina:
papa pāʻina: 0; pale: 0; palena:ʻaʻohe; }Nā pepa
E like me nāʻano'ē aʻe, ponoʻoe e hoʻopau i nā palena a me nā hoe e pili ana i kāu mauʻano. ʻO kekahi mea aʻu e makemake ai e hana hou, e kākau hou i ka inoa inoa e like me " inline " iʻole e hoʻonui i kahi wahi kahi āu e kau ai i ka tag ma ka code. E like me nā meaʻokoʻa'ē aʻe, kuhikuhi wau i kaʻike pilikino no ke koho, textarea a me ka hoʻokomoʻana i luna, no laila e like me ke koena o kaʻu kikokikona.
puka pālua: 0; pale: 0; hōʻike: inline; }He manaʻo maikaʻi hoʻi e hoʻololi i ka mea hōʻino no kāu mau lepili. Hiki i kēia poʻe keʻike i ka hanaʻana o ka lepili i ka wā a lākou e kaomi ai.
laikini: ka poʻomanaʻo: pointer; }Nā papahana kūikawā
No kēia māhele o ka style stylesheet, ponoʻoe e ho'ākāka i nā papa i kūpono iāʻoe. Eia kekahi mau papahana aʻu e hoʻohana pinepine ai. E hoʻomaopopoʻaʻole i hoʻokumuʻia i kekahiʻano, no laila hiki iāʻoe ke hāʻawi iā lākou i nā mea āu e makemake ai:
.clear [clear: both; } .floatLeft [float: hema; } .floatRight {kūlana: pololei; } .LaukaʻamauLaukau [kikokikona-pololei: hema; } .textLight {kikokikona-pololei: pololei; } .textCenter {kikokikona kaulike: kiko waena; } .textJustify {kikokikona-kaulike: hōʻoia; } .blockCenter [hōʻike: pahu; ma ka hema-hema: ke kaʻa; 'ākau-'ākau: ke kaʻa; } / * hoʻomanaʻo e kau i ka whale / / .bold {font-weight: bold; } .italic [font-style: italic; } .HEʻAUʻAU i ka mea hoʻonaninani; } .noloha [ka palena hema-hema: 0; pale-hema: 0; } laikini o ka inoa: 0; } .nopadding {pale: 0; } .nobullet [inoa inoa-ʻaʻohe; kiʻi kiʻi-ʻano-ʻaʻohe; }E noʻonoʻo, no ka kākauʻiaʻana o kēia mau papa ma mua o kekahi mauʻano'ē aʻe a he mau papa wale nō lākou, he hiki ke maʻalahi me nāʻano kiko'ī maʻamau iʻoi aʻe ma hope aku i ka wai . Ināʻikeʻoe ua hoʻonohoʻoe i kekahi papa maʻamau ma luna o kekahi mea aʻaʻole e hoʻokōʻia, ponoʻoe e nānā e hōʻoiaʻaʻoleʻaʻoheʻanoʻokoʻa'ē aʻe i kekahi o kāu style style o hope e pili ana i kēlā mehua.
Ka Luna Nui Stylesheet
/ * Nā kuʻia pae kiʻekiʻe * / html, ke kaha o ka mea: 0px; ka pale: 0px; palena: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6ʻAlani: 0; pale: 0; pule maʻamau: maʻamau; makua-family: Arial, Helvetica, sans-serif; } / * Nānā Kākau * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {kaha: 0; pale: 0; pule maʻamau: maʻamau maʻamau maʻamau 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {kaha: 1.25em; ke paleʻana: 1.25m} q {font-style: italic; } acronym, abbr hoʻomana: kōkua; palena palena: 1px dashed; } iti [font-size: .85em; } nui {font-size: 1.2em; } / * Links and Images * / a, a: link, a: i kipa 'ia, a: ka hana, a: hover {kākākūkā-mea e hoʻohui ai; } palena palena:ʻaʻohe; } / * Papaʻula / pālani keʻina: 0; pale: 0; palena:ʻaʻohe; } / * Forms * / form [kaha: 0; pale: 0; hōʻike: inline; } kapa inoa; } / * Nā papahana maʻamau * / .clear clear: both; } .floatLeft [float: hema; } .floatRight {kūlana: pololei; } .LaukaʻamauLaukau [kikokikona-pololei: hema; } .textLight {kikokikona-pololei: pololei; } .textCenter {kikokikona kaulike: kiko waena; } .textJustify {kikokikona-kaulike: hōʻoia; } .blockCenter [hōʻike: pahu; ma ka hema-hema: ke kaʻa; 'ākau-'ākau: ke kaʻa; } / * hoʻomanaʻo e kau i ka whale / / .bold {font-weight: bold; } .italic [font-style: italic; } .HEʻAUʻAU i ka mea hoʻonaninani; } .noloha [ka palena hema-hema: 0; pale-hema: 0; } laikini o ka inoa: 0; } .nopadding {pale: 0; } .nobullet [inoa inoa-ʻaʻohe; kiʻi kiʻi-ʻano-ʻaʻohe; }Ka'ōlelo kumu mua na Jennifer Krynin. Hoʻoponoponoʻia e Jeremy Girard ma ka lā 10/6/17