Kreye yon notepad kreye paj entènèt ak CSS

01 nan 10

Kreye Fèy Style CSS la

Menm jan an tou nou kreye yon dosye tèks separe pou HTML a, ou pral kreye yon dosye tèks pou CSS la. Si ou bezwen vizyèl pou pwosesis sa a tanpri al gade leson patikilye an premye. Isit la yo se etap sa yo kreye fèy CSS style ou a nan notepad:

1. Chwazi File> New nan notepad yo ka resevwa yon fenèt vid
2. Sove dosye a kòm CSS pa klike File
3. Navige nan folder my_website sou kondwi difisil ou
4. Chanje "Save As Type:" nan "tout dosye"
5. Non dosye "styles.css" ou (kite quotes yo) epi klike sou Save

02 nan 10

Lyen CSS Style Fèy nan HTML ou

Yon fwa ou te gen yon fèy style pou sit entènèt ou a, ou pral bezwen asosye li nan paj wèb la tèt li. Pou fè sa ou itilize tag lyen an. Mete tag lyen sa a nenpòt kote nan Tags nan dokiman pets.htm ou a:

03 nan 10

Ranje marges yo Page

Lè ou ap ekri XHTML pou navigatè diferan, yon sèl bagay ou pral aprann se yo ke yo tout sanble yo gen diferan marges ak règ pou ki jan yo montre bagay sa yo. Fason ki pi bon yo dwe asire ke sit ou sanble menm bagay la tou nan pifò navigatè se pa pèmèt bagay sa yo tankou marges default nan chwa a navigatè.

Mwen ta pito kòmanse paj mwen an nan kwen anwo gòch, ki pa gen okenn padding siplemantè oswa maj ki antoure tèks la. Menm si mwen pral pad sa a, mwen mete marges yo zewo pou ke mwen kòmanse ak adwaz an menm vid. Pou fè sa, ajoute sa ki annapre yo nan stiles.css dokiman ou:

html, kò {
Marge: 0px;
padding: 0px;
fwontyè: 0px;
kite: 0px;
tèt: 0px;
}}

04 nan 10

Chanje Font sou paj la

Font la se souvan premye bagay ke ou pral vle chanje sou yon paj entènèt. Font la default sou yon paj entènèt ka lèd, epi li se aktyèlman moute navigatè entènèt la tèt li, kidonk si ou pa defini font la, ou reyèlman pa pral konnen ki sa paj ou pral sanble.

Tipikman, ou ta ka chanje font la sou paragraf, oswa pafwa sou tout dokiman an tèt li. Pou sit sa a nou pral defini font la nan nivo nan header ak paragraf. Ajoute sa ki annapre yo nan stiles.css dokiman ou:

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;
}}

Mwen te kòmanse ak 1em kòm gwosè baz mwen an pou paragraf ak atik lis, ak Lè sa a, itilize sa yo mete gwosè a pou tit mwen an. Mwen pa espere sèvi ak yon gran tit pi fon pase h4, men si ou fè plan ou pral vle style li kòm byen.

05 nan 10

Fè Lyen ou plis enteresan

Koulè yo default pou lyen yo se ble ak koulè wouj violèt pou lyen unvisited ak te vizite respektivman. Pandan ke sa a estanda, li pa ta ka anfòm konplo a koulè nan paj ou a, se konsa kite a chanje li. Nan dosye styles.css ou, ajoute sa ki annapre yo:

yon: lyen {
font-family: Arial, Helvetica, sans-serif;
koulè: # FF9900;
tèks-decoration: soulinye;
}}
yon: te vizite {
koulè: # FFCC66;
}}
yon: hover {
background: #FFFFCC;
font-pwa: fonse;
}}

Mwen mete kanpe twa estil lyen, a: lyen kòm default la, yon: te vizite pou lè li te te vizite, mwen chanje koulè a, ak yon: hover. Avèk yon: hover mwen gen lyen an jwenn yon koulè background epi ale fonse mete aksan sou li nan yon lyen yo dwe klike sou.

06 nan 10

Élégance seksyon an Navigasyon

Depi nou mete navigasyon (id = "nav") seksyon an premye nan HTML a, se pou yo style li an premye. Nou bezwen endike kouman li ta dwe epi mete yon maj pi laj sou bò dwat la pou ke tèks prensipal la pa pral frape kont li. Mwen menm mwen te mete yon fwontyè alantou li.

Add CSS ki annapre yo nan dokiman styles.css ou:

#nav {
lajè: 225px;
Marge-dwa: 15px;
fontyè: mwayen solid # 000000;
}}
#nav li {
lis-style: Pa gen;
}}
.footer {
font-size: .75em;
klè: tou de;
lajè: 100%;
tèks aliman: sant;
}}

Pwopriyete lis-style la kouche moute lis la andedan seksyon navigasyon an pa gen okenn bal oswa nimewo, ak estil yo .footè seksyon an copyright yo dwe pi piti ak santre nan seksyon an.

07 nan 10

Pozisyon Seksyon Main la

Pa pwezante seksyon prensipal ou a ak pwezante absoli ou kapab asire w ke li pral rete egzakteman ki kote ou vle li rete sou paj entènèt ou. Mwen te fè m '800px lajè pou akomode pi gwo monitè, men si ou gen yon ki monitè kè bebe ki pi piti, ou ta ka vle pou fè plus.

Mete bagay sa yo nan dokiman styles.css ou:

#main {
lajè: 800px;
tèt: 0px;
pozisyon: absoli;
kite: 250px;
}}

08 nan 10

Élaboration paragraf ou

Depi mwen te deja mete font nan paragraf pi wo a, mwen te vle bay chak paragraf yon ti kras siplemantè "choute" fè li kanpe deyò pi bon. Mwen te fè sa pa mete yon fwontyè sou tèt la ki make paragraf la plis pase jis imaj la pou kont li.

Mete bagay sa yo nan dokiman styles.css ou:

.topline {
fwontyè-tèt: epè solid # FFCC00;
}}

Mwen deside fè li kòm yon klas ki rele "topline" olye ke jis defini tout paragraf nan fason sa. Fason sa a, si mwen deside mwen vle gen yon paragraf san yon liy tèt jòn, mwen ka senpleman kite klas la = "topline" nan tag paragraf la epi li pa pral gen fwontyè anwo.

09 nan 10

Kreye imaj yo

Imaj tipikman gen yon fwontyè bò kote yo, sa a se pa toujou vizib sòf si imaj la se yon lyen, men mwen renmen gen yon klas nan style CSS mwen ki vire fwontyè a otomatikman. Pou sa a Stylesheet, mwen kreye klas la "noborder", ak pi fò nan imaj yo nan dokiman an se yon pati nan klas sa a.

Lòt pati espesyal nan imaj sa yo se kote yo nan paj la. Mwen te vle yo fè yon pati nan paragraf la yo te nan san yo pa itilize tab aliman yo. Fason ki pi senp pou fè sa se pou itilize flote CSS pwopriyete a.

Mete bagay sa yo nan dokiman styles.css ou:

#main img {
flote: agoch;
Marge-dwa: 5px;
Marge-anba: 15px;
}}
.noborder {
fwontyè: 0px okenn;
}}

Kòm ou ka wè, gen tou pwopriyete Marge mete sou imaj yo, asire w ke yo pa yo te kraze kont tè a flotan ki se bò kote yo nan paragraf yo.

10 nan 10

Koulye a, gade nan paj Konplete ou

Yon fwa ou te sove CSS ou, ou ka Reload paj la pets.htm nan navigatè entènèt ou an. Paj ou ta dwe gade menm jan ak yon sèl yo montre nan foto sa a, ak imaj aliyen ak navigasyon an mete kòrèkteman sou bò gòch paj la.

Swiv etap sa yo menm pou tout paj entèn ou pou sit sa a. Ou vle gen yon paj pou chak paj nan navigasyon ou.