>> SIARADWR: Mae'n troi allan nad yw HTML yn yr unig iaith y gallwch ei ddefnyddio y tu mewn
o dudalen we.
Gallwch ddefnyddio rhywbeth o'r enw CSS, neu Taflenni Arddull Rhaeadrol, yn ogystal.
CSS yn eich galluogi i nodi llawer mwy union estheteg o we
tudalen, gan gynnwys cynllun a maint a lliwiau a ffontiau a llawer mwy.
Er enghraifft, gadewch i ni greu tudalen ar y we a elwir yma CSS0 sy'n cynrychioli
dudalen cartref am, dyweder, John Harvard.
>> Ar y dudalen hon, bydd yn rhaid John Harvard enw, o dan a fydd yn
neges neis ar gyfer ei ymwelwyr, o dan a fydd yn troedyn, gyda
dweud, rhywfaint o wybodaeth hawlfraint.
I wneud hyn, gadewch i ni ddiffinio tair adran ar gyfer y dudalen gan ddefnyddio tag
a elwir yn div.
Div braced Agored, John Harvard, yn agos div braced, div braced agored arall,
ac yn awr byddwn yn nodi rhywbeth fel, croeso i fy nhudalen gartref!
A gadewch i ni gau'r div hwn, yn ogystal.
>> Ac yn awr trydydd a therfynol div, hawlfraint.
Dim ond i fod yn ffansi, gadewch i mi ddefnyddio bellach yn HTML endid, symbol sy'n cynrychioli
cymeriad nad ydych allai fel arall deipio ar eich bysellfwrdd.
Yn benodol, yr wyf i'n mynd i wneud ampersand, punt, 169, hanner colon.
Ymddangos bod yw'r cod rhifol am y symbol hawlfraint.
Yna gadewch i ni nodi John Harvard yma yn y gwaelod.
Gadewch i ni gau'r div ac arbed y ffeil.
>> Nawr, beth yw hyn tag div?
Mae'r tag div yn syml yn diffinio is-adran y dudalen, sydd yn ei hanfod yn
rhanbarth hirsgwar.
Felly, ar hyn o bryd, mae gennyf dri rhanbarthau hirsgwar, un ar ben
y llall.
Felly ar hyn o bryd, yr effaith yn bron fel er Roedd gen i dri paragraffau.
Ond ni fyddwn yn gweld yn eithaf cymaint gofod gwyn mewn rhyngddynt.
>> Gadewch i arbed y ffeil, newid ei caniatâd, ac yn edrych ar gyfer
hyn o bryd yn Chrome.
Chmod a + r CSS0.html.
Gadewch i ni yn awr yn agor i fyny Chrome ac ymweld http://localhost.CSS0.html.
Yn wir, dyma tudalen gartref ar gyfer John Harvard.
Gadewch i ni yn awr stylize ei fod yn ychydig yn fwy union ddefnyddio rhai CSS.
>> Yn ôl yn gedit, gadewch i ni fynd i mewn i hyn tag div cyntaf ac ychwanegu arddull
priodoli nodi y byddwn i'n hoffi maint ffont o, dyweder, 36 picsel, neu px.
A hoffwn pwysau'r ffont hwn i fod yn eofn yn hytrach na 'r ball,
sydd yn arferol.
Ar gyfer yr ail div, gadewch i ni nodi priodoledd arddull arall sydd â
maint ffont o 24 picsel, felly ychydig yn llai.
Dyfyniadau agos ar ôl y colon.
>> Yn olaf, yn y trydydd div, gadewch i ni wneud arddull hafal maint y dyfyniad, ffont, a
gadewch i ni ddweud 12 picsel y tro hwn.
Dyfyniad Close ar ôl y colon.
Hysbysiad yna yr wyf yn ymddangos i gael penodedig ychydig o stylization ar gyfer
pob un o'r tri divs ddefnyddio, mae'n troi allan, CSS.
Yn wir, y gystrawen a welwch yn rhwng dyfynodau dwbl hynny yw CSS,
css eiddo penodol gyda gwerthoedd.
Ac ar gyfer y tag cyntaf, lle yr wyf wedi dau eiddo o'r fath, maint y ffont a
pwysau ffont, yr wyf yn gwahanu yn syml iddynt gyda hanner colon.
>> Yn awr, dim ond er mwyn arddull, rwy'n hefyd yn cynnwys hanner colon yn
ddiwedd pob llinell.
Ond nid ydynt yn hollol angenrheidiol, yn enwedig pan mai dim ond cael un chi
diffinio eiddo.
Gadewch i ni yn awr yn arbed y ffeil a ail-lwytho yn Chrome, a gweld beth
yr effaith net yw.
Yn ôl yn Chrome yma, gadewch i ni cliciwch Reload.
>> Nawr mae gennym ychydig yn fwy diddorol dudalen gartref am John
Harvard, lle mae'r llinell gyntaf gyda ei enw, sy'n tu mewn y
div cyntaf, yw 36 picsel uchel, a hefyd boldface, lle mae'r ail linell,
sydd yn yr ail div, yw 24 picsel tal, ond nid boldface.
A lle mae'r drydedd linell yn y trydydd div yw 12 picsel uchel, a hefyd
Nid boldface.
Ond mae'n debyg nawr hoffwn i symud yr holl destun hwn dros
fel ei fod yn ei ganolog.
>> Gallwn i alinio pob un o'r unigolyn divs fel rhai ganolog.
Ond yn fwy haws, gallwn lapio rhai tri divs tu mewn pedwerydd div, a
rhiant div, fel petai, a nodi bod div a'i holl
Dylai ddisgynyddion yn testun canolfan cyd-fynd?
Gadewch i gymryd golwg.
>> Y tu mewn o gedit, gadewch i ni fynd yn ôl at fy corff ac yn ychwanegu i fyny top div newydd gyda
div, arddull hafal dyfyniad unquote canolfan alinio testun, yn agos
dyfynnu ar ôl y colon.
Ac yn awr, gadewch i ni fynd yn ei flaen ac yn indent pob y llinellau hynny wedi ei deipio gennym o'r blaen.
Ac yn is na'r trydydd div, gadewch i ni gau'r div newydd.
>> Mewn geiriau eraill, oherwydd bod tri y rhai divs gwreiddiol yn blant erbyn hyn, felly i
siarad, rhiant div newydd ac rydw i wedi nodi y byddwn i'n hoffi i alinio'r
destun y rhiant hwnnw div yng nghanol y y dudalen, bydd yr eiddo hwnnw yn
a etifeddwyd gan bob un o'r plant hynny.
Yn wir, gadewch i ni arbed y ffeil a yn edrych mewn porwr.
Gadewch i ni ail-lwytho yn Chrome.
Ac mae gennym, hyd yn oed brafiach dudalen gartref i John Harvard.