Tudalen Web Styling a Notepad Created with CSS

01 o 10

Creu Dalen Arddull CSS

Yr un modd y gwnaethom greu ffeil destun ar wahân ar gyfer yr HTML, byddwch yn creu ffeil destun ar gyfer y CSS. Os oes angen gweledigaethau arnoch ar gyfer y broses hon, gweler y tiwtorial cyntaf. Dyma'r camau i greu eich dalen arddull CSS yn Notepad:

1. Dewiswch Ffeil> Newydd yn Notepad i gael ffenestr wag
2. Cadwch y ffeil fel CSS trwy glicio ar Ffeil
3. Ewch i'r plygell my_website ar eich disg galed
4. Newid y "Save As Type:" i "Pob Ffeil"
5. Enwch eich ffeil "styles.css" (gadewch y dyfyniadau) a chliciwch Save

02 o 10

Cysylltwch Dalen Arddull CSS i'ch HTML

Unwaith y bydd gennych ddalen arddull ar gyfer eich gwefan, bydd angen i chi ei gysylltu â'r dudalen We ei hun. I wneud hyn, rydych chi'n defnyddio'r tag cyswllt. Rhowch y ddolen gyswllt ganlynol yn unrhyw le o fewn tagiau eich dogfen pets.htm:

03 o 10

Gosodwch y Margins Tudalen

Pan fyddwch chi'n ysgrifennu XHTML ar gyfer gwahanol borwyr, un peth y byddwch chi'n ei ddysgu yw bod pob un ohonyn nhw'n ymddangos fel bod gwahanol ymylon a rheolau ar gyfer sut y maent yn arddangos pethau. Y ffordd orau o wneud yn siŵr bod eich gwefan yn edrych yr un fath yn y rhan fwyaf o borwyr yw peidio â chaniatáu i bethau fel ymylon fod yn ddiofyn i ddewis y porwr.

Mae'n well gen i ddechrau fy nhudalennau yn y gornel chwith uchaf, heb unrhyw dillad neu ymyl ychwanegol o gwmpas y testun. Hyd yn oed os ydw i'n mynd i osod y cynnwys, rwy'n gosod yr ymylon i sero er mwyn i mi ddechrau gyda'r un llechen gwag. I wneud hyn, ychwanegwch y canlynol i'ch dogfen styles.css:

html, corff {
ymyl: 0px;
padio: 0px;
ffin: 0px;
chwith: 0px;
top: 0px;
}

04 o 10

Newid y Ffont ar y Tudalen

Y ffont yn aml yw'r peth cyntaf y byddwch am ei newid ar dudalen We. Gall y ffont diofyn ar dudalen We fod yn hyll, ac mewn gwirionedd yw'r porwr gwe ei hun, felly os nad ydych chi'n diffinio'r ffont, ni fyddwch yn gwybod beth fydd eich tudalen yn wir.

Fel rheol, byddech chi'n newid y ffont ar baragraffau, neu weithiau ar y ddogfen gyfan ei hun. Ar gyfer y wefan hon, byddwn yn diffinio'r ffont ar y pennawd a lefel y paragraff. Ychwanegwch y canlynol i'ch dogfen styles.css:

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

Dechreuais gyda 1em fel fy maint sylfaenol ar gyfer paragraffau a rhestru eitemau, ac yna'n defnyddio hynny i osod maint fy mhenawdau. Nid wyf yn disgwyl defnyddio pennawd dyfnach na h4, ond os ydych chi'n bwriadu y byddwch chi am ei arddull hefyd.

05 o 10

Gwneud Eich Dolenni Mwy Diddorol

Mae'r lliwiau diofyn ar gyfer dolenni yn laswellt a phorffor ar gyfer dolenni a ragwelwyd ac a ymwelwyd â nhw yn ôl eu trefn. Er bod hyn yn safonol, efallai na fydd yn cyd-fynd â chynllun lliw eich tudalennau, felly gadewch i ni ei newid. Yn eich ffeil styles.css, ychwanegwch y canlynol:

a: dolen {
ffont-deulu: Arial, Helvetica, sans-serif;
lliw: # FF9900;
testun-addurno: tanlinellwch;
}
a: ymwelwyd {
lliw: # FFCC66;
}
a: hover {
cefndir: #FFFFCC;
ffont-bwysau: trwm;
}

Rwyf wedi sefydlu tair arddull ddolen, sef: cyswllt fel y rhagosodwyd, a: ymwelwyd â hwy ar gyfer pryd yr ymwelwyd â hi, yr wyf yn newid y lliw, a: hover. Gyda: hofran, mae gennyf lliw cefndirol ac yn mynd yn drwm i bwysleisio ei fod yn gyswllt i'w glicio.

06 o 10

Styling the Navigation Section

Gan ein bod yn gosod yr adran llywio (id = "nav") yn gyntaf yn y HTML, gadewch i ni ei steilio'n gyntaf. Mae angen inni nodi pa mor eang y dylai fod a rhoi ymyl ehangach ar yr ochr dde fel na fydd y prif destun yn cyffroi yn ei erbyn. Rwyf hefyd yn rhoi ffin o'i gwmpas.

Ychwanegu'r CSS canlynol i'ch dogfen styles.css:

#nav {
lled: 225px;
ymyl-dde: 15px;
ffin: solet canolig # 000000;
}
#nav li {
rhestr-arddull: dim;
}
.footer {
font-size: .75em;
clir: y ddau;
lled: 100%;
testun-alinio: canolfan;
}

Mae'r eiddo ar ffurf rhestr yn gosod y rhestr y tu mewn i'r adran lywio i gael dim bwledi na rhifau, ac mae'r arddull .footer yn nodi bod yr adran hawlfraint yn llai ac yn ganolog yn yr adran.

07 o 10

Lleoliad y Prif Adran

Drwy osod eich prif adran gyda lleoliad absoliwt, gallwch fod yn siŵr y bydd yn aros yn union lle rydych am iddi aros ar eich tudalen We. Fe wnes i fwynhau 800px o led i gynnal mwy o fonitro, ond os oes gennych fonitro llai, efallai y byddwch am wneud hynny yn gulach.

Rhowch y canlynol yn eich dogfen styles.css:

#main {
lled: 800px;
top: 0px;
sefyllfa: absoliwt;
chwith: 250px;
}

08 o 10

Stylio'ch Paragraffau

Gan fy mod eisoes wedi gosod ffont y paragraff uchod, roeddwn am roi ychydig o "gic" ychwanegol i bob paragraff i'w gwneud yn well allan. Gwnais hyn trwy osod ffin ar y brig a amlygodd y paragraff yn fwy na'r delwedd yn unig.

Rhowch y canlynol yn eich dogfen styles.css:

.topline {
border-top: solet trwchus # FFCC00;
}

Penderfynais ei wneud fel dosbarth o'r enw "topline" yn hytrach na dim ond diffinio pob paragraff yn y modd hwnnw. Fel hyn, os byddaf yn penderfynu fy mod am gael paragraff heb linell melyn uchaf, gallaf syml i adael y dosbarth = "uchafbwynt" yn y tag paragraff ac ni fydd ganddo'r ffin uchaf.

09 o 10

Styling the Images

Fel arfer mae gan ddelweddau ffin o'u cwmpas, nid yw hyn bob amser yn weladwy oni bai fod y ddelwedd yn ddolen, ond hoffwn gael dosbarth o fewn fy nhalen arddull CSS sy'n troi oddi ar y ffin yn awtomatig. Ar gyfer y daflen arddull hon, creais y dosbarth "nobord", ac mae'r rhan fwyaf o'r delweddau yn y ddogfen yn rhan o'r dosbarth hwn.

Y rhan arbennig arall o'r delweddau hyn yw eu lleoliad ar y dudalen. Roeddwn am iddyn nhw fod yn rhan o'r paragraff yr oeddent ynddo heb ddefnyddio tablau i'w halinio. Y ffordd symlaf o wneud hyn yw defnyddio'r eiddo CSS arnofio.

Rhowch y canlynol yn eich dogfen styles.css:

#main img {
arnofio: chwith;
ymyl-dde: 5px;
ymyl-waelod: 15px;
}
.noborder {
ffin: 0px dim;
}

Fel y gwelwch, mae yna hefyd nodweddion ymylol sydd wedi'u gosod ar y delweddau, i wneud yn siŵr nad ydynt yn cael eu torri yn erbyn y testun sydd wedi'i ffloedio sydd yn eu plith yn y paragraffau.

10 o 10

Nawr Edrychwch ar Eich Tudalen Gyflawn

Unwaith y byddwch wedi arbed eich CSS gallwch ail-lwytho'r dudalen pets.htm yn eich porwr Gwe. Dylai eich tudalen edrych yn debyg i'r un a ddangosir yn y llun hwn, gyda delweddau wedi'u halinio a'r llywio a osodir yn gywir ar ochr chwith y dudalen.

Dilynwch yr un camau hyn ar gyfer eich holl dudalennau mewnol ar gyfer y wefan hon. Rydych chi eisiau cael un dudalen ar gyfer pob tudalen yn eich llywio.