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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Det viser seg at HTML er ikke
det eneste språket du kan bruke inne

3
00:00:03,310 --> 00:00:03,895
av en web-side.

4
00:00:03,895 --> 00:00:08,100
Du kan bruke noe som kalles CSS, eller
Cascading Style Sheets, så vel.

5
00:00:08,100 --> 00:00:12,120
CSS lar deg spesifisere mye mer
nettopp estetikken i en web

6
00:00:12,120 --> 00:00:16,930
side, inkludert layout og størrelser og
farger og fonter og mye mer.

7
00:00:16,930 --> 00:00:20,820
For eksempel, la oss lage en web-side
her kalt css0 som representerer en

8
00:00:20,820 --> 00:00:22,740
hjemmesiden for, sier John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> På denne siden vil vi ha John Harvards
navn, under som vil være

10
00:00:25,480 --> 00:00:28,500
en hyggelig melding for sine besøkende, under
som vil være en bunntekst, med

11
00:00:28,500 --> 00:00:30,590
si, noen informasjon om opphavsrett.

12
00:00:30,590 --> 00:00:34,650
For å gjøre dette, la oss definere tre divisjoner
for siden å bruke en tag

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

14
00:00:35,670 --> 00:00:43,880
Åpen brakett div, John Harvard, nær
brakett div, annen åpen brakett div,

15
00:00:43,880 --> 00:00:48,330
og nå vil vi spesifisere noe
lignende, velkommen til min hjemmeside!

16
00:00:48,330 --> 00:00:50,420
Og la oss lukke denne div, så vel.

17
00:00:50,420 --> 00:00:53,700
>> Og nå er en tredje og siste
div, copyright.

18
00:00:53,700 --> 00:00:58,250
Bare for å være fancy, la meg bruke nå en HTML
enhet, et symbol som representerer

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

20
00:01:01,140 --> 00:01:07,490
Spesielt kommer jeg til å gjøre
-tegn, pund, 169, semikolon.

21
00:01:07,490 --> 00:01:10,620
Det viser seg at det er tallkode
for opphavsretten symbol.

22
00:01:10,620 --> 00:01:14,260
Så la oss spesifisere John Harvard
her nederst.

23
00:01:14,260 --> 00:01:17,180
La oss lukke div og lagre filen.

24
00:01:17,180 --> 00:01:18,910
>> Nå, hva er dette div tag?

25
00:01:18,910 --> 00:01:21,970
Div tag bare definerer en divisjon
av den siden som er i hovedsak en

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

27
00:01:23,310 --> 00:01:26,850
Så i dette øyeblikk i tid, har jeg tre
rektangulære regioner, en på toppen

28
00:01:26,850 --> 00:01:27,620
for det annet.

29
00:01:27,620 --> 00:01:30,610
Så for nå, er effekten nesten like
selv om jeg hadde tre avsnitt.

30
00:01:30,610 --> 00:01:33,490
Men vi vil ikke se ganske så mye
tomrom i mellom dem.

31
00:01:33,490 --> 00:01:36,170
>> La oss lagre denne filen, endre sin
tillatelser, og ta en titt for en

32
00:01:36,170 --> 00:01:37,990
øyeblikk 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
La oss nå åpne opp Chrome og besøk
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Faktisk, her er en hjemmeside
for John Harvard.

36
00:01:54,630 --> 00:01:59,370
La oss nå stilisere det litt mer
nettopp ved hjelp av noen CSS.

37
00:01:59,370 --> 00:02:03,510
>> Tilbake i gedit, la oss gå inn i dette
første div tag og legge til en stil

38
00:02:03,510 --> 00:02:11,060
attributt som angir at jeg vil gjerne ha en
skriftstørrelse på, si, 36 piksler, eller px.

39
00:02:11,060 --> 00:02:15,650
Og jeg vil gjerne vekten av denne fonten
å være dristig i stedet for standard

40
00:02:15,650 --> 00:02:16,980
som er vanlig.

41
00:02:16,980 --> 00:02:21,170
For det andre div, la oss spesifisere
en annen stil attributt som har en

42
00:02:21,170 --> 00:02:25,550
skriftstørrelse 24 piksler, så
litt mindre.

43
00:02:25,550 --> 00:02:28,410
Lukk sitater etter semikolon.

44
00:02:28,410 --> 00:02:33,255
>> Til slutt, i dette tredje div, la oss gjøre
stil lik sitat, skriftstørrelse og

45
00:02:33,255 --> 00:02:35,340
la oss si 12 piksler denne gangen.

46
00:02:35,340 --> 00:02:37,280
Lukk sitat etter semikolon.

47
00:02:37,280 --> 00:02:40,200
Legg merke til da at jeg synes å ha
spesifisert en bit av stilisering for

48
00:02:40,200 --> 00:02:43,770
hver av disse tre divs bruker,
det viser seg, CSS.

49
00:02:43,770 --> 00:02:47,820
Faktisk, syntaksen som du ser i
mellom de doble anførselstegn er CSS,

50
00:02:47,820 --> 00:02:50,620
spesielt CSS egenskaper
med verdier.

51
00:02:50,620 --> 00:02:53,910
Og for det første tag, der jeg hadde
to slike eiendommer, skriftstørrelse og

52
00:02:53,910 --> 00:02:57,290
font vekt, jeg rett og slett skilt
dem med et semikolon.

53
00:02:57,290 --> 00:02:59,940
>> Nå, bare for stilens skyld, jeg
også inkludert semikolon på

54
00:02:59,940 --> 00:03:00,880
slutten av hver linje.

55
00:03:00,880 --> 00:03:04,270
Men de er ikke strengt nødvendig,
spesielt når du bare har én

56
00:03:04,270 --> 00:03:05,580
Eiendommen definert.

57
00:03:05,580 --> 00:03:08,370
La oss nå lagre filen, og legg
i Chrome, og se hva

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

59
00:03:11,000 --> 00:03:13,470
Tilbake i Chrome her,
la oss klikke Reload.

60
00:03:13,470 --> 00:03:15,800
>> Nå har vi en litt mer interessant
hjemmesiden for John

61
00:03:15,800 --> 00:03:19,000
Harvard, der den første linjen med
hans navn, som er inne i det

62
00:03:19,000 --> 00:03:23,470
første div, er 36 piksler høy og også
fet skrift, der den andre linjen,

63
00:03:23,470 --> 00:03:27,340
som ligger i den andre div, er 24
piksler høyt, men ikke fet skrift.

64
00:03:27,340 --> 00:03:31,500
Og hvorved den tredje linjen i den tredje
div er 12 piksler høy og også

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

66
00:03:32,610 --> 00:03:35,380
Men sett nå vil jeg gjerne skifte
alt dette tekst over

67
00:03:35,380 --> 00:03:36,650
slik at det er sentrert.

68
00:03:36,650 --> 00:03:40,480
>> Jeg kunne justere hver av de enkelte
divs som blir sentrert.

69
00:03:40,480 --> 00:03:45,330
Men lettere, kunne jeg pakke inn de
tre divs innsiden av en fjerde div, et

70
00:03:45,330 --> 00:03:49,360
forelder div, så å si, og angi
at den div og alle dens

71
00:03:49,360 --> 00:03:52,610
etterkommere skal være
tekst justert sentrum?

72
00:03:52,610 --> 00:03:54,120
La oss ta en titt.

73
00:03:54,120 --> 00:03:58,510
>> Innsiden av gedit, la oss gå tilbake til min
kroppen og legge til en ny div opp toppen med

74
00:03:58,510 --> 00:04:04,460
div, tilsvarer quote unquote stil
Juster teksten sentrum, nær

75
00:04:04,460 --> 00:04:06,250
sitere etter semikolon.

76
00:04:06,250 --> 00:04:10,280
Og nå, la oss gå videre og innrykk alle
av de linjene som vi skrevet før.

77
00:04:10,280 --> 00:04:15,040
Og under det tredje div, la oss
lukke denne nye div.

78
00:04:15,040 --> 00:04:18,829
>> Med andre ord, fordi de tre
originale divs er nå barn, så å

79
00:04:18,829 --> 00:04:22,110
snakke, av en ny forelder div og jeg har
spesifisert at jeg har lyst til å justere

80
00:04:22,110 --> 00:04:26,140
Teksten til at foreldre div i sentrum
på siden, vil denne egenskapen være

81
00:04:26,140 --> 00:04:28,290
arvet av alle disse barna.

82
00:04:28,290 --> 00:04:32,370
Ja, la oss lagre filen og
ta en titt i en nettleser.

83
00:04:32,370 --> 00:04:34,650
La oss lesse i Chrome.

84
00:04:34,650 --> 00:04:37,540
Og der har vi det, en enda bedre
hjemmesiden for John Harvard.

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