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

2
00:00:00,290 --> 00:00:03,310
>> Spreker: Dit blyk dat HTML is nie
die enigste taal wat jy kan binne gebruik

3
00:00:03,310 --> 00:00:03,895
van 'n web bladsy.

4
00:00:03,895 --> 00:00:08,100
Jy kan iets genoem CSS gebruik, of
Cascading Style Sheets, as well.

5
00:00:08,100 --> 00:00:12,120
CSS kan jy baie meer om te spesifiseer
juis die estetika van 'n web

6
00:00:12,120 --> 00:00:16,930
bladsy, insluitende uitleg en groottes en
kleure en lettertipes en nog baie meer.

7
00:00:16,930 --> 00:00:20,820
Byvoorbeeld, laat ons 'n webblad
hier genoem CSS0 wat verteenwoordig 'n

8
00:00:20,820 --> 00:00:22,740
tuisblad vir, sê, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Op hierdie bladsy, sal ons moet John Harvard se
noem, onder wat sal wees

10
00:00:25,480 --> 00:00:28,500
'n mooi boodskap vir sy besoekers, onder
wat sal 'n footer, met

11
00:00:28,500 --> 00:00:30,590
sê, 'n paar inligting oor kopiereg.

12
00:00:30,590 --> 00:00:34,650
Om dit te doen, kom ons definieer drie afdelings
die bladsy gebruik van 'tag

13
00:00:34,650 --> 00:00:35,670
genoem DIV.

14
00:00:35,670 --> 00:00:43,880
Open bracket div, John Harvard, naby
bracket div, nog 'n oop bracket div,

15
00:00:43,880 --> 00:00:48,330
en nou gaan ons iets spesifiseer
soos, welkom op my tuisblad!

16
00:00:48,330 --> 00:00:50,420
En laat ons sluit hierdie div, as well.

17
00:00:50,420 --> 00:00:53,700
>> En nou 'n derde en finale
div, kopiereg.

18
00:00:53,700 --> 00:00:58,250
Net om te fancy wees, laat my nou gebruik om 'n HTML
entiteit, 'n simbool wat verteenwoordig

19
00:00:58,250 --> 00:01:01,140
'n karakter wat jy kan nie anders
tik op die sleutelbord.

20
00:01:01,140 --> 00:01:07,490
In die besonder, ek gaan om te doen
ampersand, pond, 169, kommapunt.

21
00:01:07,490 --> 00:01:10,620
Blyk dat die numeriese kode
vir die kopiereg simbool.

22
00:01:10,620 --> 00:01:14,260
Toe laat spesifiseer John Harvard
hier aan die onderkant.

23
00:01:14,260 --> 00:01:17,180
Kom ons maak die DIV en stoor die lêer.

24
00:01:17,180 --> 00:01:18,910
>> Nou, wat is hierdie div tag?

25
00:01:18,910 --> 00:01:21,970
Die div tag definieer eenvoudig 'n afdeling
van die bladsy, wat is in wese 'n

26
00:01:21,970 --> 00:01:23,310
reghoekige gebied.

27
00:01:23,310 --> 00:01:26,850
So op hierdie oomblik in die tyd, ek het drie
vierkantige gebiede, een op die top

28
00:01:26,850 --> 00:01:27,620
van die ander.

29
00:01:27,620 --> 00:01:30,610
So vir nou, die effek is amper so
al het ek drie paragrawe.

30
00:01:30,610 --> 00:01:33,490
Maar ons sal nie sien nie heeltemal so veel
wit ruimte tussen hulle.

31
00:01:33,490 --> 00:01:36,170
>> Kom ons red van hierdie lêer, verander sy
regte, en kyk vir '

32
00:01:36,170 --> 00:01:37,990
oomblik in Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Kom ons kyk nou oop Chrome en besoek
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Trouens, hier is 'n tuisblad
John Harvard.

36
00:01:54,630 --> 00:01:59,370
Kom ons kyk nou stileer dit 'n bietjie meer
juis met behulp van CSS.

37
00:01:59,370 --> 00:02:03,510
>> Terug in gedit, laat ons gaan in hierdie
eerste div tag en voeg 'n styl

38
00:02:03,510 --> 00:02:11,060
kenmerk spesifiseer dat ek wil graag 'n
lettergrootte van, sê, 36 pixels, of px.

39
00:02:11,060 --> 00:02:15,650
En ek wil graag die gewig van die skrif
aan te durf, eerder as die standaard wees,

40
00:02:15,650 --> 00:02:16,980
dit is normaal.

41
00:02:16,980 --> 00:02:21,170
Vir die tweede div, laat ons spesifiseer
'n ander styl kenmerk wat 'n

42
00:02:21,170 --> 00:02:25,550
lettergrootte van 24 pixels, so
'n bietjie kleiner.

43
00:02:25,550 --> 00:02:28,410
Close aanhalings na die kommapunt.

44
00:02:28,410 --> 00:02:33,255
>> Laastens, in die derde div, kom ons doen
styl gelyk quote, lettergrootte, en

45
00:02:33,255 --> 00:02:35,340
kom ons sê 12 pixels hierdie tyd.

46
00:02:35,340 --> 00:02:37,280
Sluit kwotasie na die kommapunt.

47
00:02:37,280 --> 00:02:40,200
Let dan dat dit lyk asof ek het
gespesifiseerde 'n bietjie van stilering vir

48
00:02:40,200 --> 00:02:43,770
elk van hierdie drie divs gebruik,
dit blyk, CSS.

49
00:02:43,770 --> 00:02:47,820
Trouens, die sintaksis wat jy sien in
tussen die dubbele aanhalingstekens is CSS,

50
00:02:47,820 --> 00:02:50,620
spesifiek CSS eienskappe
met waardes.

51
00:02:50,620 --> 00:02:53,910
En vir die eerste tag, waar ek moes
twee sulke eiendomme, lettergrootte en

52
00:02:53,910 --> 00:02:57,290
font gewig, het ek net geskei
hulle met 'n kommapunt.

53
00:02:57,290 --> 00:02:59,940
>> Nou, net ter wille van styl se, ek
ook ingesluit by kommapunte

54
00:02:59,940 --> 00:03:00,880
die einde van elke lyn.

55
00:03:00,880 --> 00:03:04,270
Maar hulle is nie streng nodig,
veral wanneer jy net een het

56
00:03:04,270 --> 00:03:05,580
eiendom omskryf.

57
00:03:05,580 --> 00:03:08,370
Kom ons nou die lêer stoor en herlaai
in Chrome, en kyk wat

58
00:03:08,370 --> 00:03:11,000
Die netto effek is.

59
00:03:11,000 --> 00:03:13,470
Terug in Chrome hier,
laat se kliek herlaai.

60
00:03:13,470 --> 00:03:15,800
>> Nou het ons 'n bietjie meer interessant
tuisblad vir John

61
00:03:15,800 --> 00:03:19,000
Harvard, waar die eerste lyn met
sy naam, wat is die binnekant van daardie

62
00:03:19,000 --> 00:03:23,470
eerste DIV, is 36 pixels hoog en ook
vetgedruk, waardeur die tweede lyn,

63
00:03:23,470 --> 00:03:27,340
wat in die tweede div, is 24
pixels hoog, maar nie vetgedruk.

64
00:03:27,340 --> 00:03:31,500
En waardeur die derde reël in die derde
div is 12 pixels hoog en ook

65
00:03:31,500 --> 00:03:32,610
nie vetgedruk.

66
00:03:32,610 --> 00:03:35,380
Maar veronderstel nou Ek wil graag om te skuif
al hierdie teks oor

67
00:03:35,380 --> 00:03:36,650
sodanig dat dit gesentreer.

68
00:03:36,650 --> 00:03:40,480
>> Ek elk van die individu kan bring
divs as wat gesentreer.

69
00:03:40,480 --> 00:03:45,330
Maar meer maklik, kon ek draai diegene
drie divs binnekant van 'n vierde div, 'n

70
00:03:45,330 --> 00:03:49,360
Ouer div, om so te praat nie, en spesifiseer
dat DIV en al sy

71
00:03:49,360 --> 00:03:52,610
nageslag moet wees
teks in lyn sentrum?

72
00:03:52,610 --> 00:03:54,120
Kom ons neem 'n blik.

73
00:03:54,120 --> 00:03:58,510
>> Binnekant van gedit, laat ons gaan terug na my
liggaam en voeg 'n nuwe div tot bo met

74
00:03:58,510 --> 00:04:04,460
div, styl gelyk kwotasie unquote
teks align sentrum, naby

75
00:04:04,460 --> 00:04:06,250
haal na die kommapunt.

76
00:04:06,250 --> 00:04:10,280
En nou, laat ons gaan voort en Keep alle
van die lyne wat ons voor getik.

77
00:04:10,280 --> 00:04:15,040
En onder die derde div, laat
sluit hierdie nuwe DIV.

78
00:04:15,040 --> 00:04:18,829
>> Met ander woorde, want hierdie drie
oorspronklike divs nou kinders, so te

79
00:04:18,829 --> 00:04:22,110
praat van 'n nuwe ouer div en ek het
bepaal dat ek wil graag aan te pas die

80
00:04:22,110 --> 00:04:26,140
teks van daardie ouer div in die sentrum
van die bladsy, sal daardie eiendom

81
00:04:26,140 --> 00:04:28,290
geërf deur al die kinders.

82
00:04:28,290 --> 00:04:32,370
Inderdaad, laat ons stoor die lêer en
neem 'n blik in 'n leser.

83
00:04:32,370 --> 00:04:34,650
Kom ons laai in Chrome.

84
00:04:34,650 --> 00:04:37,540
En daar het ons dit, 'n nog mooier
tuisblad vir John Harvard.

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