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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Det viser sig, at HTML er ikke
det eneste sprog du kan bruge inde

3
00:00:03,310 --> 00:00:03,895
af en webside.

4
00:00:03,895 --> 00:00:08,100
Du kan bruge noget, der hedder CSS, eller
Cascading Style Sheets, så godt.

5
00:00:08,100 --> 00:00:12,120
CSS giver dig mulighed for at specificere meget mere
netop æstetik af en web-

6
00:00:12,120 --> 00:00:16,930
side, herunder layout og størrelser, og
farver og skrifttyper og meget mere.

7
00:00:16,930 --> 00:00:20,820
For eksempel, lad os oprette en webside
her kaldet css0, der repræsenterer en

8
00:00:20,820 --> 00:00:22,740
startsiden for, siger, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> På denne side vil vi have John Harvards
navn, under hvilket vil være

10
00:00:25,480 --> 00:00:28,500
en dejlig besked til sine besøgende, under
som vil være en sidefod med

11
00:00:28,500 --> 00:00:30,590
sige, nogle oplysninger om ophavsret.

12
00:00:30,590 --> 00:00:34,650
For at gøre dette, lad os definere tre divisioner
til siden ved hjælp af et tag

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

14
00:00:35,670 --> 00:00:43,880
Åbneparentes div, John Harvard tæt
beslag div, en anden åbneparentes div,

15
00:00:43,880 --> 00:00:48,330
og nu vil vi angiver noget
ligesom, velkommen til min startside!

16
00:00:48,330 --> 00:00:50,420
Og lad os lukke denne div, så godt.

17
00:00:50,420 --> 00:00:53,700
>> Og nu er en tredje og sidste
div ophavsret.

18
00:00:53,700 --> 00:00:58,250
Bare for at være fancy, så lad mig bruge nu en HTML
enhed, et symbol, der repræsenterer

19
00:00:58,250 --> 00:01:01,140
et tegn, som du ellers ikke ville kunne
skriver på tastaturet.

20
00:01:01,140 --> 00:01:07,490
I særdeleshed vil jeg gøre
ampersand, pund, 169, semikolon.

21
00:01:07,490 --> 00:01:10,620
Slår ud det er den numeriske kode
for copyright-symbolet.

22
00:01:10,620 --> 00:01:14,260
Så lad os specificere John Harvard
her i bunden.

23
00:01:14,260 --> 00:01:17,180
Lad os lukke div og gemme filen.

24
00:01:17,180 --> 00:01:18,910
>> Nu, hvad er det div-tag?

25
00:01:18,910 --> 00:01:21,970
Div tag blot definerer en division
på den side, som er hovedsagelig en

26
00:01:21,970 --> 00:01:23,310
rektangulært område.

27
00:01:23,310 --> 00:01:26,850
Så på dette tidspunkt, jeg har tre
rektangulære områder, den ene oven

28
00:01:26,850 --> 00:01:27,620
på den anden.

29
00:01:27,620 --> 00:01:30,610
Så for nu, effekten er næsten lige så
selvom jeg havde tre stykker.

30
00:01:30,610 --> 00:01:33,490
Men vi vil ikke se helt så meget
hvid plads i mellem dem.

31
00:01:33,490 --> 00:01:36,170
>> Lad os gemme denne fil, ændre dens
tilladelser, og tag et kig for en

32
00:01:36,170 --> 00:01:37,990
øjeblik i Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Lad os nu åbne Chrome og besøg
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Faktisk, her er et hjem side
efter John Harvard.

36
00:01:54,630 --> 00:01:59,370
Lad os nu stilisere det lidt mere
præcist ved hjælp af nogle CSS.

37
00:01:59,370 --> 00:02:03,510
>> Tilbage i gedit, lad os gå ind i denne
første div tag og tilføje en stil

38
00:02:03,510 --> 00:02:11,060
attribut specificerer, at jeg gerne vil have en
skriftstørrelse på fx 36 pixels, eller px.

39
00:02:11,060 --> 00:02:15,650
Og jeg vil gerne vægt denne skrifttype
til at være modige snarere end standard

40
00:02:15,650 --> 00:02:16,980
hvilket er normalt.

41
00:02:16,980 --> 00:02:21,170
For det andet div, lad os præcisere
anden stil attribut, der har en

42
00:02:21,170 --> 00:02:25,550
skriftstørrelse 24 pixels, så
en lille smule mindre.

43
00:02:25,550 --> 00:02:28,410
Luk citater efter semikolon.

44
00:02:28,410 --> 00:02:33,255
>> Endelig i denne tredje div, så lad os gøre
stil er lig med citat, skriftstørrelse og

45
00:02:33,255 --> 00:02:35,340
lad os sige 12 pixels denne gang.

46
00:02:35,340 --> 00:02:37,280
Luk citat efter semikolon.

47
00:02:37,280 --> 00:02:40,200
Bemærk da, at jeg synes at have
specificeret en smule stilisering for

48
00:02:40,200 --> 00:02:43,770
hver af disse tre divs bruger,
det viser sig, CSS.

49
00:02:43,770 --> 00:02:47,820
Faktisk den syntaks, du ser i
mellem disse anførselstegn er CSS,

50
00:02:47,820 --> 00:02:50,620
specifikt CSS egenskaber
med værdier.

51
00:02:50,620 --> 00:02:53,910
Og for det første mærke, hvor jeg havde
to sådanne egenskaber, skriftstørrelse og

52
00:02:53,910 --> 00:02:57,290
font vægt, jeg simpelthen adskilt
dem med et semikolon.

53
00:02:57,290 --> 00:02:59,940
>> Nu, bare for stil skyld, jeg
også inkluderet semikoloner på

54
00:02:59,940 --> 00:03:00,880
enden af ​​hver linje.

55
00:03:00,880 --> 00:03:04,270
Men de er ikke strengt nødvendigt,
især når du kun har en

56
00:03:04,270 --> 00:03:05,580
ejendom defineret.

57
00:03:05,580 --> 00:03:08,370
Lad os nu gemme filen og genindlæse
i Chrome, og se, hvad

58
00:03:08,370 --> 00:03:11,000
nettovirkningen er.

59
00:03:11,000 --> 00:03:13,470
Tilbage i Chrome her,
lad os klikker Reload.

60
00:03:13,470 --> 00:03:15,800
>> Nu har vi en lidt mere interessant
hjem side for John

61
00:03:15,800 --> 00:03:19,000
Harvard, hvorved den første linje med
hans navn, som er inde i denne

62
00:03:19,000 --> 00:03:23,470
første div, er 36 pixels høj, og også
fed, hvorved den anden linje,

63
00:03:23,470 --> 00:03:27,340
der er i denne anden div er 24
pixels høj, men ikke fed skrift.

64
00:03:27,340 --> 00:03:31,500
Og hvor den tredje linje i det pågældende tredjeland
div er 12 pixels høj, og også

65
00:03:31,500 --> 00:03:32,610
ikke fed skrift.

66
00:03:32,610 --> 00:03:35,380
Men formoder nu vil jeg gerne flytte
alt dette tekst over

67
00:03:35,380 --> 00:03:36,650
sådan, at det er centreret.

68
00:03:36,650 --> 00:03:40,480
>> Jeg kunne tilpasse hver af de enkelte
divs som værende centreret.

69
00:03:40,480 --> 00:03:45,330
Men lettere, kunne jeg pakke dem
tre divs inde i en fjerde div, en

70
00:03:45,330 --> 00:03:49,360
forælder div, så at sige, og angiv
at denne div og alle dens

71
00:03:49,360 --> 00:03:52,610
efterkommere bør være
tekst justeret center?

72
00:03:52,610 --> 00:03:54,120
Lad os tage et kig.

73
00:03:54,120 --> 00:03:58,510
>> Inde i gedit, lad os gå tilbage til min
krop og tilføje en ny div up top med

74
00:03:58,510 --> 00:04:04,460
div, stil lig citat citat slut
tekst align centrum, tæt

75
00:04:04,460 --> 00:04:06,250
citere efter semikolon.

76
00:04:06,250 --> 00:04:10,280
Og nu, lad os gå videre og led alle
af disse linjer, som vi indtastet før.

77
00:04:10,280 --> 00:04:15,040
Og under det tredje div, lad os
Luk dette nye div.

78
00:04:15,040 --> 00:04:18,829
>> Med andre ord, for de tre
originale divs er nu børn, så at

79
00:04:18,829 --> 00:04:22,110
tale, af en ny forælder div og jeg har
angivet, at jeg gerne vil tilpasse

80
00:04:22,110 --> 00:04:26,140
Teksten i denne forælder div i midten
på siden, vil denne ejendom være

81
00:04:26,140 --> 00:04:28,290
arvet af alle disse børn.

82
00:04:28,290 --> 00:04:32,370
Faktisk, lad os gemme filen og
tage et kig i en browser.

83
00:04:32,370 --> 00:04:34,650
Lad os opdateres om Chrome.

84
00:04:34,650 --> 00:04:37,540
Og der har vi det, en endnu pænere
hjem side for John Harvard.

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