Stíll Notepad Created Web Page með CSS

01 af 10

Búðu til CSS Style Sheet

Á sama hátt höfum við búið til sérstakan textaskrá fyrir HTML, þú verður að búa til textaskrá fyrir CSS. Ef þú þarft myndefni fyrir þetta ferli, vinsamlegast skoðaðu fyrstu kennslustundina. Hér eru leiðbeiningar um að búa til CSS stílblöðina þína í Notepad:

1. Veldu File> New í Notepad til að fá tóm glugga
2. Vista skrána sem CSS með því að smella á File
3. Farðu í my_website möppuna á harða diskinum þínum
4. Breyta "Save As Type:" til "All Files"
5. Gefðu upp skrána "styles.css" (slepptu tilvitnunum) og smelltu á Vista

02 af 10

Tengdu CSS Style Sheet við HTML þinn

Þegar þú hefur fengið stílblöð fyrir vefsvæðið þitt þarftu að tengja það við vefsíðuna sjálfan. Til að gera þetta notarðu hlekkmerkið. Settu eftirfarandi tengiliðmerki einhvers staðar innan merkin á pets.htm skjalinu þínu:

03 af 10

Festa Page Margmiðlar

Þegar þú skrifar XHTML fyrir mismunandi vafra, þá er það eitt sem þú munt læra að þeir virðast allir hafa mismunandi margar reglur og hvernig þær sýna hluti. Besta leiðin til að vera viss um að vefsvæðið þitt sé það sama í flestum vöfrum er að ekki leyfa hlutum eins og margar til að vanræksla í vali vafrans.

Ég vil frekar byrja síðurnar mínar í efra vinstra horninu, án aukapósts eða margmiðlunar í kringum textann. Jafnvel ef ég ætla að púða innihaldið stillir ég jaðarinn að núlli þannig að ég byrji með sömu auða ákveða. Til að gera þetta skaltu bæta við eftirfarandi við styles.css skjalið þitt:

html, líkami {
framlegð: 0px;
padding: 0px;
landamærin: 0px;
vinstri: 0px;
efst: 0px;
}

04 af 10

Breyting letrið á síðunni

Letriðið er oft það fyrsta sem þú vilt breyta á vefsíðu. Sjálfgefin leturgerð á vefsíðu getur verið ljótt og er í raun vafranum sjálfum, þannig að ef þú skilgreinir ekki letrið, þá veit þú ekki raunverulega hvaða síða þín mun líta út.

Venjulega myndi þú breyta leturgerðinni á málsgreinum, eða stundum á öllu skjalinu sjálfu. Fyrir þessa síðu munum við skilgreina letrið á hausnum og málsstiginu. Bættu eftirfarandi við í style.css skjalinu þínu:

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

Ég byrjaði með 1em sem grunnstærð fyrir málsgreinar og listatriði og notaði það síðan til að stilla stærð fyrir fyrirsagnir mínar. Ég býst ekki við að nota fyrirsögn dýpra en h4, en ef þú ætlar að þú viljir stilla það eins og heilbrigður.

05 af 10

Gerðu tenglar þínar áhugaverðar

Sjálfgefin litir fyrir tengla eru bláar og fjólubláir fyrir óskráð og heimsótt tenglar. Þó að þetta sé staðlað gæti það ekki passað litakerfið á síðum þínum, svo við skulum breyta því. Í stíl your.css skaltu bæta við eftirfarandi:

a: hlekkur {
leturgerð: Arial, Helvetica, sans-serif;
litur: # FF9900;
textaskreyting: undirstrika;
}
a: heimsótt {
litur: # FFCC66;
}
a: sveima {
bakgrunnur: #FFFFCC;
leturstærð: feitletrað
}

Ég setti upp þrjár hlekkastílar, a: tengilinn sem sjálfgefið, a: heimsótt þegar það hefur verið heimsótt, ég breytir litnum og: sveima. Með: sveifla sem ég hef tengilinn fá bakgrunnslit og fara feitletrað til að leggja áherslu á að það sé hlekkur sem á að smella á.

06 af 10

Stíll Navigation Section

Þar sem við setjum flakkann (id = "nav") fyrst í HTML, þá skulum við stilla það fyrst. Við þurfum að gefa til kynna hversu breitt það ætti að vera og settu breiðari framhlið hægra megin þannig að aðaltextinn muni ekki koma í veg fyrir það. Ég setti líka landamæri í kringum hana.

Bættu eftirfarandi CSS við style.css skjalið þitt:

#nav {
breidd: 225px;
framlegð-hægri: 15px;
landamæri: miðlungs fastur # 000000;
}
#nav li {
listastíll: ekkert;
}
.footer {
leturstærð: .75em;
hreinsa: bæði;
breidd: 100%;
text-align: miðstöð;
}

Listastíllinn setur upp listann inni í flakkarsvæðinu til að fá engar byssukúlur eða tölur, og .footer stíll höfundarréttarhlutans er minni og miðuð í hlutanum.

07 af 10

Staðsetning aðalhlutans

Með því að staðsetja aðalhlutann með algerri staðsetningu er hægt að vera viss um að það muni vera nákvæmlega þar sem þú vilt að það sé áfram á vefsíðunni þinni. Ég gerði mitt 800px breitt til móts við stærri skjái, en ef þú ert með minni skjá þá gætirðu viljað gera það smærri.

Settu eftirfarandi í style.css skjalið þitt:

#aðal {
breidd: 800px;
efst: 0px;
staða: alger;
vinstri: 250px;
}

08 af 10

Stíll kaflana þína

Þar sem ég hef nú þegar sett málsgreinina hér að ofan, vildi ég gefa hverjum lið smá aukaspyrnu til að gera það standa betur út. Ég gerði þetta með því að setja landamærin efst sem auðkenndi málsgreinina meira en bara myndina ein.

Settu eftirfarandi í style.css skjalið þitt:

.topp lína {
Landamæri efst: þykkt solid # FFCC00;
}

Ég ákvað að gera það sem bekk sem kallast "topline" frekar en að skilgreina alla málsgreinar á þann hátt. Á þennan hátt, ef ég ákveður að ég vili fá málsgrein án efstu gulu línu, get ég einfaldlega farið úr bekknum = "topline" í málsgreininni og það mun ekki hafa efstu landamæri.

09 af 10

Stíll myndirnar

Myndirnar hafa yfirleitt landamæri í kringum þau, þetta er ekki alltaf sýnilegt nema myndin sé tengill, en mér finnst gaman að hafa bekk í CSS stílblaðinu sem slökkva á landamærunum sjálfkrafa. Fyrir þetta stílblad bjó ég til "noborder" bekknum og flestar myndirnar í skjalinu eru hluti af þessum flokki.

Hin sérstaki hluti þessara mynda er staðsetning þeirra á síðunni. Ég vildi að þau væru hluti af málsgreininni sem þeir voru í án þess að nota töflur til að samræma þær. Einfaldasta leiðin til að gera þetta er að nota flotið CSS eignina.

Settu eftirfarandi í style.css skjalið þitt:

#main img {
fljóta: vinstri;
framlegð-hægri: 5px;
framlegð-botn: 15px;
}
.noborder {
landamærin: 0px none;
}

Eins og þú sérð eru einnig framlegðarmöguleikar settar á myndirnar til að ganga úr skugga um að þau séu ekki brotin upp gegn fljóta texta sem er við hliðina á þeim í málsgreinum.

10 af 10

Kíktu á lokið vefsíðu þinni

Þegar þú hefur vistað CSS þinn geturðu endurhlaðað pets.htm síðuna í vafranum þínum. Síðan þín ætti að líta út eins og sá sem er sýndur á þessari mynd, með myndum í takt og leiðsögnin sett rétt á vinstri hlið síðunnar.

Fylgdu þessum sömu skrefum fyrir alla innri síðurnar þínar fyrir þessa síðu. Þú vilt hafa eina síðu fyrir hverja síðu í flakki þínu.