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

2
00:00:00,290 --> 00:00:03,310
>> Speak: Det visar sig att HTML är inte
det enda språk som du kan använda i

3
00:00:03,310 --> 00:00:03,895
på en webbsida.

4
00:00:03,895 --> 00:00:08,100
Du kan använda något som kallas CSS, eller
Cascading Style Sheets, liksom.

5
00:00:08,100 --> 00:00:12,120
CSS kan du ange mer
just estetik av en webbsida

6
00:00:12,120 --> 00:00:16,930
sida, inklusive layout och storlekar och
färger och typsnitt och mycket mer.

7
00:00:16,930 --> 00:00:20,820
Till exempel, låt oss skapa en webbsida
här kallat css0 som representerar en

8
00:00:20,820 --> 00:00:22,740
hemsidan för, säg, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> På denna sida kommer vi att ha John Harvards
namn, under vilket kommer att vara

10
00:00:25,480 --> 00:00:28,500
ett fint budskap till sina besökare, under
som kommer att vara en sidfot, med

11
00:00:28,500 --> 00:00:30,590
säga, en del copyrightinformation.

12
00:00:30,590 --> 00:00:34,650
För att göra detta, låt oss definiera tre divisioner
till sidan med en tagg

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

14
00:00:35,670 --> 00:00:43,880
Öppet fäste div, John Harvard, nära
fäste div, en annan öppen fäste div,

15
00:00:43,880 --> 00:00:48,330
och nu ska vi ange något
liknande, välkommen till min hemsida!

16
00:00:48,330 --> 00:00:50,420
Och låt oss avsluta denna div, liksom.

17
00:00:50,420 --> 00:00:53,700
>> Och nu en tredje och sista
div, upphovsrätt.

18
00:00:53,700 --> 00:00:58,250
Bara för att vara snygga, låt mig använda nu en HTML
enhet, en symbol som representerar

19
00:00:58,250 --> 00:01:01,140
ett tecken på att du inte kunde något annat
skriver på tangentbordet.

20
00:01:01,140 --> 00:01:07,490
Framför allt kommer jag att göra
et-tecken, pund, 169, semikolon.

21
00:01:07,490 --> 00:01:10,620
Det visade sig att det är den numeriska koden
för copyrightsymbol.

22
00:01:10,620 --> 00:01:14,260
Sedan ska specificera John Harvard
här nedtill.

23
00:01:14,260 --> 00:01:17,180
Låt oss stänga div och spara filen.

24
00:01:17,180 --> 00:01:18,910
>> Nu, vad är detta div-taggen?

25
00:01:18,910 --> 00:01:21,970
Div-taggen definierar helt enkelt en division
på sidan, som huvudsakligen är en

26
00:01:21,970 --> 00:01:23,310
rektangulära området.

27
00:01:23,310 --> 00:01:26,850
Så vid denna tidpunkt, jag har tre
rektangulära regioner, en ovanpå

28
00:01:26,850 --> 00:01:27,620
för det andra.

29
00:01:27,620 --> 00:01:30,610
Så för nu, är effekten nästan lika
om jag hade tre stycken.

30
00:01:30,610 --> 00:01:33,490
Men vi ser inte riktigt lika mycket
tomt utrymme mellan dem.

31
00:01:33,490 --> 00:01:36,170
>> Låt oss spara den här filen, ändra
behörigheter, och ta en titt för en

32
00:01:36,170 --> 00:01:37,990
ögonblick 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
Låt oss nu öppna Chrome och besök
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
I själva verket, här är en hemsida
för John Harvard.

36
00:01:54,630 --> 00:01:59,370
Låt oss nu stilisera det lite mer
exakt med hjälp av några CSS.

37
00:01:59,370 --> 00:02:03,510
>> Tillbaka i gedit, vi går in i detta
första div-taggen och lägga till en stil

38
00:02:03,510 --> 00:02:11,060
attribut som anger att jag vill ha en
teckenstorlek på, säg, 36 bildpunkter, eller px.

39
00:02:11,060 --> 00:02:15,650
Och jag skulle vilja vikten av detta teckensnitt
att vara djärv snarare än standard,

40
00:02:15,650 --> 00:02:16,980
vilket är normalt.

41
00:02:16,980 --> 00:02:21,170
För den andra div, låt oss ange
en annan stil attribut som har en

42
00:02:21,170 --> 00:02:25,550
teckenstorlek på 24 pixlar, så
lite mindre.

43
00:02:25,550 --> 00:02:28,410
Stäng citat efter semikolonet.

44
00:02:28,410 --> 00:02:33,255
>> Slutligen, i denna tredje div, låt oss göra
stil är lika citat, teckenstorlek, och

45
00:02:33,255 --> 00:02:35,340
låt oss säga 12 bildpunkter den här gången.

46
00:02:35,340 --> 00:02:37,280
Stäng citat efter semikolon.

47
00:02:37,280 --> 00:02:40,200
Observera då att jag verkar ha
specificerat lite av stilisering för

48
00:02:40,200 --> 00:02:43,770
var och en av dessa tre divs använder,
visar det sig, CSS.

49
00:02:43,770 --> 00:02:47,820
I själva verket, den syntax som du ser i
mellan dessa dubbla citationstecken är CSS,

50
00:02:47,820 --> 00:02:50,620
specifikt CSS-egenskaper
med värden.

51
00:02:50,620 --> 00:02:53,910
Och för det första taggen, där jag hade
två sådana egenskaper, teckenstorlek och

52
00:02:53,910 --> 00:02:57,290
typsnitt vikt, jag bara separerade
dem med ett semikolon.

53
00:02:57,290 --> 00:02:59,940
>> Nu, bara för stilens skull, jag
också ingår semikolon på

54
00:02:59,940 --> 00:03:00,880
i slutet av varje linje.

55
00:03:00,880 --> 00:03:04,270
Men de är inte absolut nödvändigt,
speciellt när du bara har en

56
00:03:04,270 --> 00:03:05,580
egendom definieras.

57
00:03:05,580 --> 00:03:08,370
Låt oss nu spara filen och ladda om
i Chrome, och se vad

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

59
00:03:11,000 --> 00:03:13,470
Tillbaka i Chrome här,
låt oss klicka på Uppdatera.

60
00:03:13,470 --> 00:03:15,800
>> Nu har vi en något mer intressant
hemsidan för John

61
00:03:15,800 --> 00:03:19,000
Harvard, varigenom den första raden med
hans namn, som är inne i det

62
00:03:19,000 --> 00:03:23,470
första div, är 36 pixlar hög och även
fetstil, varvid den andra raden,

63
00:03:23,470 --> 00:03:27,340
som är i den andra div, är 24
pixlar hög, men inte fet.

64
00:03:27,340 --> 00:03:31,500
Och varigenom den tredje raden i den tredje
div är 12 pixlar hög och även

65
00:03:31,500 --> 00:03:32,610
inte fet stil.

66
00:03:32,610 --> 00:03:35,380
Men anta nu jag skulle vilja flytta
all denna text över

67
00:03:35,380 --> 00:03:36,650
sådan att den är centrerad.

68
00:03:36,650 --> 00:03:40,480
>> Jag skulle kunna rikta in var och en av de enskilda
DIV som är centrerad.

69
00:03:40,480 --> 00:03:45,330
Men lättare, skulle jag slå in dem
tre divar insidan av en fjärde div, en

70
00:03:45,330 --> 00:03:49,360
ordnade div, så att säga, och ange
att denna div och alla dess

71
00:03:49,360 --> 00:03:52,610
ättlingar bör vara
text linje centrum?

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

73
00:03:54,120 --> 00:03:58,510
>> Inne i gedit, låt oss gå tillbaka till min
kropp och lägga till en ny div upp topp med

74
00:03:58,510 --> 00:04:04,460
div, lika stil citat unquote
text align center, nära

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

76
00:04:06,250 --> 00:04:10,280
Och nu, låt oss gå vidare och strecksatsen alla
av de linjer som vi skrivit tidigare.

77
00:04:10,280 --> 00:04:15,040
Och under det tredje div, låt oss
stänga denna nya div.

78
00:04:15,040 --> 00:04:18,829
>> Med andra ord, eftersom de tre
ursprungliga divar är nu barn, så att

79
00:04:18,829 --> 00:04:22,110
tala, för en ny förälder div och jag har
anges att jag skulle vilja rikta in

80
00:04:22,110 --> 00:04:26,140
Texten i den föräldern div i mitten
på sidan, kommer denna egenskap att vara

81
00:04:26,140 --> 00:04:28,290
ärvs av alla dessa barn.

82
00:04:28,290 --> 00:04:32,370
Ja, låt oss spara filen och
ta en titt i en webbläsare.

83
00:04:32,370 --> 00:04:34,650
Låt oss ladda om i Chrome.

84
00:04:34,650 --> 00:04:37,540
Och där har vi det, en ännu trevligare
hemsidan för John Harvard.

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