1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> SIARADWR: Mae'n troi allan nad yw HTML yn
yr unig iaith y gallwch ei ddefnyddio y tu mewn

3
00:00:03,310 --> 00:00:03,895
o dudalen we.

4
00:00:03,895 --> 00:00:08,100
Gallwch ddefnyddio rhywbeth o'r enw CSS, neu
Taflenni Arddull Rhaeadrol, yn ogystal.

5
00:00:08,100 --> 00:00:12,120
CSS yn eich galluogi i nodi llawer mwy
union estheteg o we

6
00:00:12,120 --> 00:00:16,930
tudalen, gan gynnwys cynllun a maint a
lliwiau a ffontiau a llawer mwy.

7
00:00:16,930 --> 00:00:20,820
Er enghraifft, gadewch i ni greu tudalen ar y we
a elwir yma CSS0 sy'n cynrychioli

8
00:00:20,820 --> 00:00:22,740
dudalen cartref am, dyweder, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Ar y dudalen hon, bydd yn rhaid John Harvard
enw, o dan a fydd yn

10
00:00:25,480 --> 00:00:28,500
neges neis ar gyfer ei ymwelwyr, o dan
a fydd yn troedyn, gyda

11
00:00:28,500 --> 00:00:30,590
dweud, rhywfaint o wybodaeth hawlfraint.

12
00:00:30,590 --> 00:00:34,650
I wneud hyn, gadewch i ni ddiffinio tair adran
ar gyfer y dudalen gan ddefnyddio tag

13
00:00:34,650 --> 00:00:35,670
a elwir yn div.

14
00:00:35,670 --> 00:00:43,880
Div braced Agored, John Harvard, yn agos
div braced, div braced agored arall,

15
00:00:43,880 --> 00:00:48,330
ac yn awr byddwn yn nodi rhywbeth
fel, croeso i fy nhudalen gartref!

16
00:00:48,330 --> 00:00:50,420
A gadewch i ni gau'r div hwn, yn ogystal.

17
00:00:50,420 --> 00:00:53,700
>> Ac yn awr trydydd a therfynol
div, hawlfraint.

18
00:00:53,700 --> 00:00:58,250
Dim ond i fod yn ffansi, gadewch i mi ddefnyddio bellach yn HTML
endid, symbol sy'n cynrychioli

19
00:00:58,250 --> 00:01:01,140
cymeriad nad ydych allai fel arall
deipio ar eich bysellfwrdd.

20
00:01:01,140 --> 00:01:07,490
Yn benodol, yr wyf i'n mynd i wneud
ampersand, punt, 169, hanner colon.

21
00:01:07,490 --> 00:01:10,620
Ymddangos bod yw'r cod rhifol
am y symbol hawlfraint.

22
00:01:10,620 --> 00:01:14,260
Yna gadewch i ni nodi John Harvard
yma yn y gwaelod.

23
00:01:14,260 --> 00:01:17,180
Gadewch i ni gau'r div ac arbed y ffeil.

24
00:01:17,180 --> 00:01:18,910
>> Nawr, beth yw hyn tag div?

25
00:01:18,910 --> 00:01:21,970
Mae'r tag div yn syml yn diffinio is-adran
y dudalen, sydd yn ei hanfod yn

26
00:01:21,970 --> 00:01:23,310
rhanbarth hirsgwar.

27
00:01:23,310 --> 00:01:26,850
Felly, ar hyn o bryd, mae gennyf dri
rhanbarthau hirsgwar, un ar ben

28
00:01:26,850 --> 00:01:27,620
y llall.

29
00:01:27,620 --> 00:01:30,610
Felly ar hyn o bryd, yr effaith yn bron fel
er Roedd gen i dri paragraffau.

30
00:01:30,610 --> 00:01:33,490
Ond ni fyddwn yn gweld yn eithaf cymaint
gofod gwyn mewn rhyngddynt.

31
00:01:33,490 --> 00:01:36,170
>> Gadewch i arbed y ffeil, newid ei
caniatâd, ac yn edrych ar gyfer

32
00:01:36,170 --> 00:01:37,990
hyn o bryd yn Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Gadewch i ni yn awr yn agor i fyny Chrome ac ymweld
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Yn wir, dyma tudalen gartref
ar gyfer John Harvard.

36
00:01:54,630 --> 00:01:59,370
Gadewch i ni yn awr stylize ei fod yn ychydig yn fwy
union ddefnyddio rhai CSS.

37
00:01:59,370 --> 00:02:03,510
>> Yn ôl yn gedit, gadewch i ni fynd i mewn i hyn
tag div cyntaf ac ychwanegu arddull

38
00:02:03,510 --> 00:02:11,060
priodoli nodi y byddwn i'n hoffi
maint ffont o, dyweder, 36 picsel, neu px.

39
00:02:11,060 --> 00:02:15,650
A hoffwn pwysau'r ffont hwn
i fod yn eofn yn hytrach na 'r ball,

40
00:02:15,650 --> 00:02:16,980
sydd yn arferol.

41
00:02:16,980 --> 00:02:21,170
Ar gyfer yr ail div, gadewch i ni nodi
priodoledd arddull arall sydd â

42
00:02:21,170 --> 00:02:25,550
maint ffont o 24 picsel, felly
ychydig yn llai.

43
00:02:25,550 --> 00:02:28,410
Dyfyniadau agos ar ôl y colon.

44
00:02:28,410 --> 00:02:33,255
>> Yn olaf, yn y trydydd div, gadewch i ni wneud
arddull hafal maint y dyfyniad, ffont, a

45
00:02:33,255 --> 00:02:35,340
gadewch i ni ddweud 12 picsel y tro hwn.

46
00:02:35,340 --> 00:02:37,280
Dyfyniad Close ar ôl y colon.

47
00:02:37,280 --> 00:02:40,200
Hysbysiad yna yr wyf yn ymddangos i gael
penodedig ychydig o stylization ar gyfer

48
00:02:40,200 --> 00:02:43,770
pob un o'r tri divs ddefnyddio,
mae'n troi allan, CSS.

49
00:02:43,770 --> 00:02:47,820
Yn wir, y gystrawen a welwch yn
rhwng dyfynodau dwbl hynny yw CSS,

50
00:02:47,820 --> 00:02:50,620
css eiddo penodol
gyda gwerthoedd.

51
00:02:50,620 --> 00:02:53,910
Ac ar gyfer y tag cyntaf, lle yr wyf wedi
dau eiddo o'r fath, maint y ffont a

52
00:02:53,910 --> 00:02:57,290
pwysau ffont, yr wyf yn gwahanu yn syml
iddynt gyda hanner colon.

53
00:02:57,290 --> 00:02:59,940
>> Yn awr, dim ond er mwyn arddull, rwy'n
hefyd yn cynnwys hanner colon yn

54
00:02:59,940 --> 00:03:00,880
ddiwedd pob llinell.

55
00:03:00,880 --> 00:03:04,270
Ond nid ydynt yn hollol angenrheidiol,
yn enwedig pan mai dim ond cael un chi

56
00:03:04,270 --> 00:03:05,580
diffinio eiddo.

57
00:03:05,580 --> 00:03:08,370
Gadewch i ni yn awr yn arbed y ffeil a ail-lwytho
yn Chrome, a gweld beth

58
00:03:08,370 --> 00:03:11,000
yr effaith net yw.

59
00:03:11,000 --> 00:03:13,470
Yn ôl yn Chrome yma,
gadewch i ni cliciwch Reload.

60
00:03:13,470 --> 00:03:15,800
>> Nawr mae gennym ychydig yn fwy diddorol
dudalen gartref am John

61
00:03:15,800 --> 00:03:19,000
Harvard, lle mae'r llinell gyntaf gyda
ei enw, sy'n tu mewn y

62
00:03:19,000 --> 00:03:23,470
div cyntaf, yw 36 picsel uchel, a hefyd
boldface, lle mae'r ail linell,

63
00:03:23,470 --> 00:03:27,340
sydd yn yr ail div, yw 24
picsel tal, ond nid boldface.

64
00:03:27,340 --> 00:03:31,500
A lle mae'r drydedd linell yn y trydydd
div yw 12 picsel uchel, a hefyd

65
00:03:31,500 --> 00:03:32,610
Nid boldface.

66
00:03:32,610 --> 00:03:35,380
Ond mae'n debyg nawr hoffwn i symud
yr holl destun hwn dros

67
00:03:35,380 --> 00:03:36,650
fel ei fod yn ei ganolog.

68
00:03:36,650 --> 00:03:40,480
>> Gallwn i alinio pob un o'r unigolyn
divs fel rhai ganolog.

69
00:03:40,480 --> 00:03:45,330
Ond yn fwy haws, gallwn lapio rhai
tri divs tu mewn pedwerydd div, a

70
00:03:45,330 --> 00:03:49,360
rhiant div, fel petai, a nodi
bod div a'i holl

71
00:03:49,360 --> 00:03:52,610
Dylai ddisgynyddion yn
testun canolfan cyd-fynd?

72
00:03:52,610 --> 00:03:54,120
Gadewch i gymryd golwg.

73
00:03:54,120 --> 00:03:58,510
>> Y tu mewn o gedit, gadewch i ni fynd yn ôl at fy
corff ac yn ychwanegu i fyny top div newydd gyda

74
00:03:58,510 --> 00:04:04,460
div, arddull hafal dyfyniad unquote
canolfan alinio testun, yn agos

75
00:04:04,460 --> 00:04:06,250
dyfynnu ar ôl y colon.

76
00:04:06,250 --> 00:04:10,280
Ac yn awr, gadewch i ni fynd yn ei flaen ac yn indent pob
y llinellau hynny wedi ei deipio gennym o'r blaen.

77
00:04:10,280 --> 00:04:15,040
Ac yn is na'r trydydd div, gadewch i ni
gau'r div newydd.

78
00:04:15,040 --> 00:04:18,829
>> Mewn geiriau eraill, oherwydd bod tri y rhai
divs gwreiddiol yn blant erbyn hyn, felly i

79
00:04:18,829 --> 00:04:22,110
siarad, rhiant div newydd ac rydw i wedi
nodi y byddwn i'n hoffi i alinio'r

80
00:04:22,110 --> 00:04:26,140
destun y rhiant hwnnw div yng nghanol y
y dudalen, bydd yr eiddo hwnnw yn

81
00:04:26,140 --> 00:04:28,290
a etifeddwyd gan bob un o'r plant hynny.

82
00:04:28,290 --> 00:04:32,370
Yn wir, gadewch i ni arbed y ffeil a
yn edrych mewn porwr.

83
00:04:32,370 --> 00:04:34,650
Gadewch i ni ail-lwytho yn Chrome.

84
00:04:34,650 --> 00:04:37,540
Ac mae gennym, hyd yn oed brafiach
dudalen gartref i John Harvard.

85
00:04:37,540 --> 00:04:39,872