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

2
00:00:00,290 --> 00:00:03,310
>> Ettekandja: Selgub, et HTML ei ole
ainus keel, mida saab kasutada sees

3
00:00:03,310 --> 00:00:03,895
veebilehele.

4
00:00:03,895 --> 00:00:08,100
Võite kasutada midagi, mida nimetatakse CSS või
Kaskaadlaadistiku, samuti.

5
00:00:08,100 --> 00:00:12,120
CSS võimaldab määrata palju
täpselt esteetika web

6
00:00:12,120 --> 00:00:16,930
lehel, sealhulgas paigutust ja suurust ning
värve ja fonte ja palju muud.

7
00:00:16,930 --> 00:00:20,820
Näiteks oletame, luua veebilehe
siin nimetatakse CSS0 mis tähistab

8
00:00:20,820 --> 00:00:22,740
kodulehekülg, ütleme, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Sellel lehel on meil John Harvardi
Nimi, mille all on

10
00:00:25,480 --> 00:00:28,500
kena sõnum oma külastajatele all
mis on jalus, kus

11
00:00:28,500 --> 00:00:30,590
öelda, mõned autoriõiguste kohta.

12
00:00:30,590 --> 00:00:34,650
Et seda teha, olgem määratleda kolm osakonda
lehekülje kasutades tag

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

14
00:00:35,670 --> 00:00:43,880
Sulg div, John Harvard lähedal
sulg div, teine ​​sulg div,

15
00:00:43,880 --> 00:00:48,330
ja nüüd me midagi täpsustada
nagu, tere tulemast minu koduleheküljele!

16
00:00:48,330 --> 00:00:50,420
Ja olgem sulgege see div, samuti.

17
00:00:50,420 --> 00:00:53,700
>> Ja nüüd kolmas ja lõplik
div, autoriõigus.

18
00:00:53,700 --> 00:00:58,250
Lihtsalt olla väljamõeldud, las ma kasutan nüüd HTML
üksuse sümbol, mis tähistab

19
00:00:58,250 --> 00:01:01,140
märk, et sa ei saaks muidu
kirjuta klaviatuuril.

20
00:01:01,140 --> 00:01:07,490
Eelkõige ma teen
ampersand, nael, 169, semikoolon.

21
00:01:07,490 --> 00:01:10,620
Selgub, et on numbriline kood
jaoks autoriõiguse sümbol.

22
00:01:10,620 --> 00:01:14,260
Siis olgem täpsustada John Harvard
siin allosas.

23
00:01:14,260 --> 00:01:17,180
Paneme div ja salvestage fail.

24
00:01:17,180 --> 00:01:18,910
>> Nüüd, mis on see div tag?

25
00:01:18,910 --> 00:01:21,970
Div tag määratletakse vaid jaotus
lehe, mis on sisuliselt

26
00:01:21,970 --> 00:01:23,310
ristkülikukujuline piirkond.

27
00:01:23,310 --> 00:01:26,850
Nii praegusel ajal on mul kolm
ristkülikukujuline piirkondades, üks peal

28
00:01:26,850 --> 00:01:27,620
ning muud.

29
00:01:27,620 --> 00:01:30,610
Nii et nüüd, efekt on peaaegu sama
kuigi mul oli kolm lõiku.

30
00:01:30,610 --> 00:01:33,490
Aga me ei näe päris nii palju
Valge ruumi nende vahel.

31
00:01:33,490 --> 00:01:36,170
>> Hoiame seda faili muuta oma
õigusi, ning vaatleme jaoks

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

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

34
00:01:43,040 --> 00:01:52,440
Olgem nüüd avada Chrome ja külastus
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Tõepoolest, siin on kodulehekülg
John Harvard.

36
00:01:54,630 --> 00:01:59,370
Olgem nüüd Stilisoida see veidi rohkem
täpselt, kasutades mõned CSS.

37
00:01:59,370 --> 00:02:03,510
>> Tagasi gedit, lähme sinna
Esimene div tag ja lisada stiilis

38
00:02:03,510 --> 00:02:11,060
atribuut, täpsustades, et ma tahaks
fondi suurust, ütleme, 36 pikslit või px.

39
00:02:11,060 --> 00:02:15,650
Ja ma tahaks kaalu see font
olla julge ja mitte vaikimisi

40
00:02:15,650 --> 00:02:16,980
mis on normaalne.

41
00:02:16,980 --> 00:02:21,170
Teise div, olgem täpsustada
teises stiilis atribuut, mis on

42
00:02:21,170 --> 00:02:25,550
kirjasuurus 24 pikslit, nii
natuke väiksem.

43
00:02:25,550 --> 00:02:28,410
Sulge hinnapakkumisi pärast semikoolonit.

44
00:02:28,410 --> 00:02:33,255
>> Lõpuks, kolmanda div, teeme
style võrdub quote, suurus ning

45
00:02:33,255 --> 00:02:35,340
ütleme 12 px seekord.

46
00:02:35,340 --> 00:02:37,280
Sulge quote pärast semikoolonit.

47
00:02:37,280 --> 00:02:40,200
Pange tähele siis, et ma tundub, et on
täpsustatud natuke stilisatsioon eest

48
00:02:40,200 --> 00:02:43,770
Kõigi nende kolme divs kasutades,
Selgub, et CSS.

49
00:02:43,770 --> 00:02:47,820
Tegelikult süntaks, et näete
vahel need jutumärgid on CSS,

50
00:02:47,820 --> 00:02:50,620
spetsiaalselt CSS omadused
väärtustega.

51
00:02:50,620 --> 00:02:53,910
Ja et esimene silt, kus mul oli
kaks sellist kinnisvara, fondi suurus ja

52
00:02:53,910 --> 00:02:57,290
font kaalu, ma lihtsalt eraldada
need semikooloniga.

53
00:02:57,290 --> 00:02:59,940
>> Nüüd lihtsalt stiili pärast, ma
ka semikoolonit juures

54
00:02:59,940 --> 00:03:00,880
iga rea ​​lõpus.

55
00:03:00,880 --> 00:03:04,270
Aga nad ei ole tingimata vajalik,
eriti kui sul on ainult üks

56
00:03:04,270 --> 00:03:05,580
kinnisvara määratletud.

57
00:03:05,580 --> 00:03:08,370
Olgem nüüd salvestada fail ja laadige
Chrome, ja vaata, mida

58
00:03:08,370 --> 00:03:11,000
netomõju on.

59
00:03:11,000 --> 00:03:13,470
Tagasi Chrome siin
olgem nuppu Reload.

60
00:03:13,470 --> 00:03:15,800
>> Nüüd on meil veidi rohkem huvitav
kodulehekülg John

61
00:03:15,800 --> 00:03:19,000
Harvard, kusjuures esimese kooskõlas
oma nime, mis on sees, et

62
00:03:19,000 --> 00:03:23,470
Esimene div on 36 pikslit kõrge ja ka
Paksu kirja, kus teine ​​rida,

63
00:03:23,470 --> 00:03:27,340
mis on selles teises div, on 24
pikslit kõrge, kuid mitte rasvases kirjas.

64
00:03:27,340 --> 00:03:31,500
Ja kusjuures kolmas rida, et kolmas
div on 12 pikslit kõrge ja ka

65
00:03:31,500 --> 00:03:32,610
ei rasvases kirjas.

66
00:03:32,610 --> 00:03:35,380
Aga oletame nüüd ma tahaks minna
kõik selle teksti üle

67
00:03:35,380 --> 00:03:36,650
nii, et see on keskne.

68
00:03:36,650 --> 00:03:40,480
>> Ma võiks viia iga üksiku
DIVs olevaks keskel.

69
00:03:40,480 --> 00:03:45,330
Aga kergem, kas ma wrap neid
kolm divs sees neljanda div,

70
00:03:45,330 --> 00:03:49,360
vanem div niiöelda, ja täpsustada
et see div ja kõik selle

71
00:03:49,360 --> 00:03:52,610
järeltulijad peaksid olema
tekst joondatud keskus?

72
00:03:52,610 --> 00:03:54,120
Võtame vaata.

73
00:03:54,120 --> 00:03:58,510
>> Toas gedit, lähme tagasi oma
keha ja lisada uue div up top

74
00:03:58,510 --> 00:04:04,460
div, stiili võrdub quote lõppeb
Teksti joondus keskus lähedal

75
00:04:04,460 --> 00:04:06,250
tsiteerin pärast semikoolonit.

76
00:04:06,250 --> 00:04:10,280
Ja nüüd, lähme edasi ja taane kõik
need read, et me kirjutada enne.

77
00:04:10,280 --> 00:04:15,040
Ja alla selle kolmanda div, olgem
sulgege see uus div.

78
00:04:15,040 --> 00:04:18,829
>> Teisisõnu, sest need kolm
originaal divs on nüüd lapsed, nii et

79
00:04:18,829 --> 00:04:22,110
rääkima, uus vanem div ja ma olen
täpsustada, et ma tahaks, et viia

80
00:04:22,110 --> 00:04:26,140
tekst selle vanema div keskel
lehekülje, et vara on

81
00:04:26,140 --> 00:04:28,290
pärinud kõik need lapsed.

82
00:04:28,290 --> 00:04:32,370
Tõepoolest, oletame, salvestage fail ja
vaatleme brauserit.

83
00:04:32,370 --> 00:04:34,650
Oletame laadida Chrome.

84
00:04:34,650 --> 00:04:37,540
Ja et meil on see, isegi kenamaks
kodulehekülg John Harvard.

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