Ịmepụta ihe ntanetịpụtara mepụtara Web Page na CSS

01 nke 10

Mepụta CSS Style Sheet

Otu ụzọ anyị si kee faịlụ ederede dị iche maka HTML, ị ga-emepụta faịlụ ederede maka CSS. Ọ bụrụ na ịchọrọ visual maka usoro a, biko hụ nkuzi mbụ. Nke a bụ nzọụkwụ iji mepụta akwụkwọ CSS gị na Notepad:

1. Họrọ Njikwa> Ọhụrụ na Notepad iji nweta windo efu
2. Zọpụta faịlụ dị ka CSS site na ịpị File
3. Gaa na folda my_website na draịvụ ike gị
4. Gbanwee "Chekwa dịka Ụdị:" gaa "faịlụ niile"
5. Kpọọ faịlụ gị "styles.css" (hapụ nkwụsịtụ) wee pịa Save

02 nke 10

Jikọta CSS ụdị Mpempe akwụkwọ gị na HTML

Ozugbo i nwetara akwụkwọ mpempe akwụkwọ maka ebe nrụọrụ weebụ gị, ọ ga-adị mkpa ka ị kpọtụrụ ya na Weebụ n'onwe ya. Iji mee nke a ị na-eji akara njikọ. Tinye ihe njikọ njikọ ebe a na ebe ọ bụla n'ime mkpado nke akwụkwọ pets.htm gị:

03 nke 10

Dụgharịa Ọnụ peeji nke

Mgbe ị na-ede XHTML maka ihe nchọgharị dị iche iche, otu ihe ị ga-amụta bụ na ha niile yiri ka ha nwere akụkụ dị iche iche na iwu maka otú ha si egosipụta ihe. Ụzọ kachasị mma iji jide n'aka na saịtị gị na-ele otu anya na ọtụtụ ihe nchọgharị bụ ka ị ghara ikwe ka ihe dị ka akụkụ aka ya na ndabara na nhọrọ nhọrọ.

Achọrọ m ịmalite peeji m n'akụkụ akaekpe aka ekpe, na-enweghị mpempe akwụkwọ ọzọ ma ọ bụ akụkụ gbara gburugburu ederede. Ọbụna ma ọ bụrụ na m ga-ehichapụ ihe ndị dị na ya, ana m edozi akụkụ aka ya ka ọ bụrụ ihe efu ka m wee malite site na otu oghere. Iji mee nke a, gbakwunye ihe na-esonụ gị n'ụdị styles.css:

html, ozu {
oke: 0px;
na-eme akwa: 0px;
ókè: 0px;
n'aka ekpe: 0px;
n'elu: 0px;
}

04 nke 10

Ịgbanwe Font na Page

Ụdị ahụ bụ ihe mbụ ị ga-achọ ịgbanwe na ibe weebụ. Ụdị ndabara na ibe weebụ nwere ike ịdị njọ, ma ọ bụ na ntanetị n'onwe ya, yabụ ọ bụrụ na ị kọwaghị ụdị, ị ga-amaghị ihe ihu gị ga-adị.

Dịka, ị ga-agbanwe font na paragraf, ma ọ bụ mgbe ụfọdụ na akwụkwọ ahụ n'onwe ya. Maka saịtị a, anyị ga-akọwa njikwa ahụ na nkụnye eji isi mee na paragraf. Tinye ihe na-esote gị n'ụdị styles.css:

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

Amalitere m na 1em dị ka isi ihe m maka paragraf ma depụta ihe, wee jiri nke ahụ mee ka nha maka ederede m. Anaghị m atụ anya iji isiokwu dị omimi karịa h4, ma ọ bụrụ na ị na-eme atụmatụ ị ga-achọ ịme ya.

05 nke 10

Ime Ka Njikọ Gị Dị Mmasị

Ụdị ndabara maka njikọ dị iche iche na-acha anụnụ anụnụ na odo odo maka ndị na-adịghị eleta ma na-eleta njikọ dịka. Ọ bụ ezie na nke a bụ ọkọlọtọ, ọ nwere ike ọ gaghị adaba na atụmatụ agba nke ibe gị, ya mere ka anyị gbanwee ya. Na n'ụdị style.css gị, tinye ihe ndị a:

a: njikọ {
eme-ezinụlọ: Arial, Helvetica, sans-serif;
agba: # FF9900;
ederede-mma: ndepụta;
}
a: gara {
agba: # FFCC66;
}
a: hover {
ndabere: #FFFFCC;
eme-arọ: obi ike;
}

Ejiri m ụzọ atọ jikọtara, nke a: jikọọ dịka ndabara, a: leta maka mgbe e letara ya, ana m agbanwe agba, na: hover. Site na: hover Enwere m njikọ ahụ iji nweta ụda ndabere ma gaa n'atụghị egwu iji mesie ike na ọ bụ njikọ ka a pịa.

06 nke 10

Ntughari ngalaba nke Igodo

Ebe ọ bụ na anyị na-ebu ụzọ igodo (id = "nav") na HTML, ka anyị buru ya ụzọ. Anyi kwesiri igosi uzo o kwesiri ibia ma tinye oke uzo di n'aka nri ka isi ihe ederede ghara ibido ya. M tinyekwara ókè gburugburu ya.

Tinye CSS na-esote gị n'ụdị style.css gị:

#nav {
obosara: 225px;
oke-nri: 15px;
ókèala: akwa siri ike # 000000;
}
#nav li {
ndepụta ndepụta: ọ dịghị;
}
.foote {
font-size: .75em;
doro anya: ma;
obosara: 100%;
ntinye ederede: etiti;
}

Akụkụ ndepụta ụdịdị ahụ na-esetịpụ ndepụta n'ime mpaghara igodo iji ghara inwe bọtịnụ ma ọ bụ nọmba, na mpaghara ụkwụ ụkwụ .footer ka akụkụ nwebisiinka dị ntakịrị ma tinyekwa ya n'ime mpaghara ahụ.

07 nke 10

Idebe isi ngalaba

Site n'itinye mpaghara gị isi na nkwụsị zuru oke ị nwere ike ijide n'aka na ọ ga-anọ kpọmkwem ebe ịchọrọ ka ọ nọrọ na ibe weebụ gị. M mere m 800px n'obosara na-eso ndị monitors ukwu, ma ọ bụrụ na ị nwere ntakịrị ileba anya, ị nwere ike ịchọ ime ka nke ahụ dị warara karị.

Tinye ihe ndị na-esonụ gị n'ụdị styles.css:

#main {
obosara: 800px;
n'elu: 0px;
ọnọdụ: zuru;
n'aka ekpe: 250px;
}

08 nke 10

Na-atụgharị Ihe Ndekọ Gị

Ebe ọ bụ na emetụlarị m paragraf ahụ n'elu, achọrọ m ịnye paragraf nke ọ bụla ka ọ bụrụ obere "ịgba" iji mee ka ọ dị mma. Emere m nke a site n'itinye ókè n'elu nke mere ka paragraf pụta ìhè karịa naanị onyinyo ahụ.

Tinye ihe ndị na-esonụ gị n'ụdị styles.css:

.topline {
elu-elu: ike siri ike # FFCC00;
}

Ekpebiri m ime ya dị ka klas a kpọrọ "topline" kama ịkọwapụta paragraf niile dị otú ahụ. N'ụzọ dị otú a, ọ bụrụ na m kpebie na m ga-enwe paragraf n'enweghị akara edo edo, enwere m ike ịhapụ klas = "topline" na mkpado paragraf ma ọ gaghị enwe oke ókè.

09 nke 10

Na-ese foto

Ihe oyiyi nwere ihe gbara ha gburugburu, nke a anaghị ahụ anya ọ gwụla ma onyinyo ahụ bụ njikọ, ma enwere m mmasị ịnwe klas n'ime CSS m na-agbanyeghị ókèala na-akpaghị aka. Maka ụdịdị a, m kere klas "noborder", ọtụtụ ihe oyiyi dị na akwụkwọ ahụ bụ akụkụ nke klas a.

Akụkụ pụrụ iche nke ihe oyiyi ndị a bụ ọnọdụ ha na ibe. Achọrọ m ka ha bụrụ akụkụ nke paragraf ha nọ na-enweghị tebụl iji dozie ha. Ụzọ kachasị mfe iji mee nke a bụ iji ụgbọ mmiri CSS ala.

Tinye ihe ndị na-esonụ gị n'ụdị styles.css:

#main img {
ise n'elu: aka ekpe;
oke-nri: 5px;
oke-ala: 15px;
}
.noborder {
ókè: 0px ọ dịghị;
}

Dịka ị pụrụ ịhụ, enwerekwa akụkụ ndị dị oke na ihe oyiyi ahụ, iji jide n'aka na a gaghị akụtu ha megide ihe odide ahụ dị n'elu nke dị n'akụkụ ha na paragraf.

10 nke 10

Ugbu a Lelee Anya Gị Page

Ozugbo i chebere CSS ị nwere ike ibudata ibe pets.htm na ihe nchọgharị weebụ gị. Akwụkwọ gị kwesịrị ile anya na nke ahụ e gosiri na foto a, na eserese ndị kwekọrọ na igodo na-etinye n'ụzọ ziri ezi n'akụkụ aka ekpe nke ibe.

Soro nzọụkwụ ndị a niile maka ibe gị niile maka saịtị a. Ịchọrọ inwe otu ibe maka ibe ọ bụla na igodo gị.