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

2
00:00:00,290 --> 00:00:03,310
>> Tagapagsalita: Ito ay lumiliko out na HTML ay hindi
ang tanging wika na maaari mong gamitin sa loob

3
00:00:03,310 --> 00:00:03,895
ng isang web page.

4
00:00:03,895 --> 00:00:08,100
Maaari mong gamitin ang isang bagay na tinatawag na CSS, o
Cascading Style Sheet, pati na rin.

5
00:00:08,100 --> 00:00:12,120
Binibigyang-daan ka ng CSS sa iyo upang tukuyin marami pang iba
tumpak ang aesthetics ng isang web

6
00:00:12,120 --> 00:00:16,930
pahina, kabilang ang layout at mga laki at
mga kulay at mga font at marami pang iba.

7
00:00:16,930 --> 00:00:20,820
Halimbawa, lumikha ng isang web page ipaalam
dito tinatawag CSS0 na kumakatawan sa isang

8
00:00:20,820 --> 00:00:22,740
home page para sa, sabihin nating, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Sa pahinang ito, kakailanganin naming John Harvard ni
pangalanan, sa ilalim kung saan ay magiging

10
00:00:25,480 --> 00:00:28,500
gandang mensahe para sa kanyang mga bisita, sa ilalim
na kung saan ay magiging isang footer, na may

11
00:00:28,500 --> 00:00:30,590
sabihin, ang ilang mga impormasyon sa copyright.

12
00:00:30,590 --> 00:00:34,650
Upang gawin ito, tukuyin ang tatlong dibisyon ipaalam
para sa pahina gamit ang isang tag na

13
00:00:34,650 --> 00:00:35,670
na tinatawag na div.

14
00:00:35,670 --> 00:00:43,880
Buksan bracket div, John Harvard, malapit
bracket div, isa pang bukas bracket div,

15
00:00:43,880 --> 00:00:48,330
at ngayon makikita tukuyin kami ng isang bagay
tulad ng, maligayang pagdating sa aking home page!

16
00:00:48,330 --> 00:00:50,420
At isara ni ito div ipaalam, pati na rin.

17
00:00:50,420 --> 00:00:53,700
>> At ngayon, isang third at huling
div, copyright.

18
00:00:53,700 --> 00:00:58,250
Lamang na maging fancy, hayaan mo akong gumamit ngayon ng isang HTML
entity, isang simbolo na kumakatawan sa

19
00:00:58,250 --> 00:01:01,140
isang character na hindi mo magagawa kung hindi man
nagta-type sa iyong keyboard.

20
00:01:01,140 --> 00:01:07,490
Sa partikular, ako pagpunta sa gawin
ampersand, pound, 169, tuldok-kuwit.

21
00:01:07,490 --> 00:01:10,620
Ginagawang out na ang numeric code
para sa simbolo ng copyright.

22
00:01:10,620 --> 00:01:14,260
Pagkatapos sabihin tukuyin John Harvard
dito sa ibaba.

23
00:01:14,260 --> 00:01:17,180
Isara ng div at i-save ang file Hayaan.

24
00:01:17,180 --> 00:01:18,910
>> Ngayon, kung ano ito div tag na ito?

25
00:01:18,910 --> 00:01:21,970
Tinutukoy lamang ng div tag isang sangay
ng pahina, na kung saan ay mahalagang isang

26
00:01:21,970 --> 00:01:23,310
hugis-parihaba rehiyon.

27
00:01:23,310 --> 00:01:26,850
Kaya sa ito sandali sa oras, mayroon akong tatlong
hugis-parihaba rehiyon, isa sa tuktok

28
00:01:26,850 --> 00:01:27,620
sa iba pang mga.

29
00:01:27,620 --> 00:01:30,610
Kaya para sa ngayon, ang epekto ay halos kasing
bagaman Mayroon akong tatlong mga talata.

30
00:01:30,610 --> 00:01:33,490
Ngunit hindi namin makikita pa masyadong bilang magkano
puting espasyo sa pagitan ng mga ito.

31
00:01:33,490 --> 00:01:36,170
>> I-save ang file na ito Hayaan, baguhin nito
mga pahintulot, at kumuha ng isang hitsura para sa isang

32
00:01:36,170 --> 00:01:37,990
sandali sa Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Buksan up ang Chrome at pagbisita Sabihin ngayon
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Sa katunayan, narito ang isang home page
para sa John Harvard.

36
00:01:54,630 --> 00:01:59,370
Ngayon stylize ni ito ng kaunti pa sa Hayaan
tumpak gamit ang ilan sa CSS.

37
00:01:59,370 --> 00:02:03,510
>> Bumalik sa gedit, sabihin pumunta sa ito
unang div tag at magdagdag ng estilo

38
00:02:03,510 --> 00:02:11,060
ipatungkol ng pagtukoy na Gusto ko ng
laki ng font ng, sabihin nating, 36 pixels, o px.

39
00:02:11,060 --> 00:02:15,650
At gusto ko ang bigat ng font
upang maging bold sa halip na ang default na,

40
00:02:15,650 --> 00:02:16,980
na kung saan ay normal.

41
00:02:16,980 --> 00:02:21,170
Para sa ikalawang div, sabihin tukuyin
isa pang estilo katangiang iyon ay may isang

42
00:02:21,170 --> 00:02:25,550
laki ng 24 pixel font, kaya
Medyo mas maliit.

43
00:02:25,550 --> 00:02:28,410
Isara ang mga quote pagkatapos ng tuldok-kuwit.

44
00:02:28,410 --> 00:02:33,255
>> Panghuli, sa ganitong mga third div, ni gawin ipaalam
ay katumbas ng estilo laki quote, font, at

45
00:02:33,255 --> 00:02:35,340
hayaan sabihin ng 12 pixels oras na ito.

46
00:02:35,340 --> 00:02:37,280
Isara quote pagkatapos ng tuldok-kuwit.

47
00:02:37,280 --> 00:02:40,200
Pansinin pagkatapos na mukhang ako na magkaroon
tinukoy ng kaunting estilisasyon para sa

48
00:02:40,200 --> 00:02:43,770
bawat isa sa mga tatlong divs gamit,
ito ay lumiliko out, CSS.

49
00:02:43,770 --> 00:02:47,820
Sa katunayan, ang syntax na iyong nakikita sa
sa pagitan ng mga double quote ay CSS,

50
00:02:47,820 --> 00:02:50,620
partikular na mga katangian ng CSS
may halaga.

51
00:02:50,620 --> 00:02:53,910
At para sa na unang tag, na kung saan ako ay nagkaroon ng
dalawang naturang mga pag-aari, laki ng font at

52
00:02:53,910 --> 00:02:57,290
bigat ng font, pinaghiwalay ko lang
sa kanila na may semicolon.

53
00:02:57,290 --> 00:02:59,940
>> Ngayon, lamang para sa kapanan ng estilo, ang ko
Kasama rin semicolons sa

54
00:02:59,940 --> 00:03:00,880
sa dulo ng bawat linya.

55
00:03:00,880 --> 00:03:04,270
Ngunit ang mga ito ay hindi mahigpit na kinakailangan,
lalo na kapag mayroon ka lamang isang

56
00:03:04,270 --> 00:03:05,580
tinukoy ng ari-arian.

57
00:03:05,580 --> 00:03:08,370
Hayaan ang i-save ni ngayon ang file at i-reload
sa Chrome, at makita kung ano ang

58
00:03:08,370 --> 00:03:11,000
ang net na epekto ay.

59
00:03:11,000 --> 00:03:13,470
Bumalik sa Chrome dito,
mag-click I-reload ipaalam.

60
00:03:13,470 --> 00:03:15,800
>> Ngayon kami ay may isang bahagyang mas kawili-wiling
home page para sa John

61
00:03:15,800 --> 00:03:19,000
Harvard, kung saan ang unang linya na may
ang kanyang pangalan, na kung saan ay nasa loob ng na

62
00:03:19,000 --> 00:03:23,470
unang div, 36 pixel ang taas at din
boldface, kung saan ang pangalawang linya,

63
00:03:23,470 --> 00:03:27,340
na kung saan ay sa na pangalawang div, ay 24
pixel ang taas, ngunit hindi boldface.

64
00:03:27,340 --> 00:03:31,500
At kung saan ang ikatlong linya sa na ang mga third
div ay 12 pixel ang taas at din

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

66
00:03:32,610 --> 00:03:35,380
Ngunit ipagpalagay na ngayon Gusto kong shift
lahat ng ito sa paglipas ng teksto

67
00:03:35,380 --> 00:03:36,650
tulad na ito ay nakasentro.

68
00:03:36,650 --> 00:03:40,480
>> Kaya kong ihanay ang bawat isa sa mga indibidwal
divs bilang nakasentro.

69
00:03:40,480 --> 00:03:45,330
Ngunit nang mas madali, kaya kong balutin mga
tatlong divs sa loob ng 1/4 div, isang

70
00:03:45,330 --> 00:03:49,360
magulang div, kaya na magsalita, at tukuyin
na na div at lahat ng mga

71
00:03:49,360 --> 00:03:52,610
kaapu-apuhan ay dapat na
nakahanay teksto center?

72
00:03:52,610 --> 00:03:54,120
Hayaan ang kumuha ng isang hitsura.

73
00:03:54,120 --> 00:03:58,510
>> Sa loob ng gedit, sabihin bumalik sa aking
katawan at magdagdag ng bagong div up tuktok na may

74
00:03:58,510 --> 00:04:04,460
div, ay katumbas ng estilo quote magpanipi
Ihanay sa teksto center, malapit

75
00:04:04,460 --> 00:04:06,250
Quote pagkatapos ng tuldok-kuwit.

76
00:04:06,250 --> 00:04:10,280
At ngayon, sabihin sige at mag-urong lahat
ng mga linya na namin nai-type bago.

77
00:04:10,280 --> 00:04:15,040
At sa ibaba na ang mga third div, sabihin
isara ang bagong div.

78
00:04:15,040 --> 00:04:18,829
>> Sa ibang salita, dahil sa mga tatlong
orihinal divs na ngayon sa mga bata, kaya upang

79
00:04:18,829 --> 00:04:22,110
magsalita, ng isang bagong magulang div at na hindi ko na
tinukoy na nais kong ihanay ang

80
00:04:22,110 --> 00:04:26,140
teksto ng magulang na div sa sentro
ng pahina, ari-arian na magiging

81
00:04:26,140 --> 00:04:28,290
minana sa pamamagitan ng lahat ng mga bata.

82
00:04:28,290 --> 00:04:32,370
Sa katunayan, sabihin i-save ng mga file at
tingnan sa isang browser.

83
00:04:32,370 --> 00:04:34,650
Ni-reload sa Chrome Hayaan.

84
00:04:34,650 --> 00:04:37,540
At doon ay mayroon kaming ito, ang isang pantay na nicer
home page para sa John Harvard.

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