1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> Speak: Så det är faktiskt inte det bästa
utforma att blandas CSS med HTML.

3
00:00:04,840 --> 00:00:08,700
Snarare är det bäst att faktor ut din
CSS, lägga den någonstans centralt, och

4
00:00:08,700 --> 00:00:11,430
på något sätt tillämpa den på
taggar i din webbsida.

5
00:00:11,430 --> 00:00:15,290
För att uppnå detta kan vi faktiskt sluta
hjälp av Style-attributet och istället

6
00:00:15,290 --> 00:00:19,290
använda en stil tagg, som hör hemma i
chef för en webbsida vid sidan av, för

7
00:00:19,290 --> 00:00:20,700
exempel, din titel.

8
00:00:20,700 --> 00:00:24,400
>> Låt oss ge det ett försök och åter genomföra
en hemsida för John Harvard

9
00:00:24,400 --> 00:00:26,410
med hjälp av Style-taggen.

10
00:00:26,410 --> 00:00:28,930
Jag har redan fått oss började
här med tre divar för

11
00:00:28,930 --> 00:00:30,260
John Harvards hemsida.

12
00:00:30,260 --> 00:00:33,990
Men låt oss först nu gå upp till denna första
div och lägga till ett nytt attribut,

13
00:00:33,990 --> 00:00:38,680
nämligen ID, och ange att en unik
identifierare för denna div

14
00:00:38,680 --> 00:00:42,390
ska vara, till exempel, citat unquote
"Top", ett godtyckligt namn, men

15
00:00:42,390 --> 00:00:45,840
beskrivande i att denna div är
faktiskt högst upp på min sida.

16
00:00:45,840 --> 00:00:48,920
>> För nästa div, låt oss ge det en
annat ID citat unquote

17
00:00:48,920 --> 00:00:54,080
"Mitten" och låt oss ge det tredje div
ett ID för citat unquote "botten." Vi

18
00:00:54,080 --> 00:00:57,740
Nu har tre unika identifierare
till vilken vi kan tillämpa vissa CSS

19
00:00:57,740 --> 00:01:01,210
egenskaper, men först, låt oss återvända
till chefen för den här sidan.

20
00:01:01,210 --> 00:01:04,760
Precis ovanför titeln här, jag
gå vidare och definiera stil

21
00:01:04,760 --> 00:01:07,120
och stäng sedan stil.

22
00:01:07,120 --> 00:01:10,340
>> Inne i detta nu, kommer jag att definiera
några CSS-egenskaper, nämligen

23
00:01:10,340 --> 00:01:14,550
Samma som jag tidigare hade i Style
attribut, men här de ska vara

24
00:01:14,550 --> 00:01:16,320
centralt definierade.

25
00:01:16,320 --> 00:01:20,880
För att göra detta, kommer jag att ange pundet
symbolen följt av toppen, och därmed

26
00:01:20,880 --> 00:01:24,710
som anger att följande CSS
egenskaper bör gälla oavsett

27
00:01:24,710 --> 00:01:28,800
HTML-element har den unika
identifierare av toppen.

28
00:01:28,800 --> 00:01:32,240
Jag sedan kommer att ha några öppna och
slutna klamrar, och jag ska

29
00:01:32,240 --> 00:01:39,170
specificera, säg, skall teckenstorleken vara 36
bildpunkter, ska typsnitt vikt vara djärv.

30
00:01:39,170 --> 00:01:41,810
>> För att hålla rent, jag sätter varje
av dessa egenskaper nu på egen hand

31
00:01:41,810 --> 00:01:44,610
linje, men det är bara en
stilistisk konvention.

32
00:01:44,610 --> 00:01:47,830
Under detta, låt oss nu definiera en annan
väljare, så att säga.

33
00:01:47,830 --> 00:01:52,680
Detta för HTML-tagg som har
unik identifierare i mitten.

34
00:01:52,680 --> 00:01:57,540
Och här ska vi ange en teckenstorlek
av 24 bildpunkter, lägre än den som en annan

35
00:01:57,540 --> 00:02:01,520
väljare för botten, och inuti
av det, låt oss ange ett

36
00:02:01,520 --> 00:02:03,850
teckenstorlek på 12 pixlar.

37
00:02:03,850 --> 00:02:09,350
>> Låt oss nu spara, ändra behörighet
på, och ladda den här sidan i en webbläsare,

38
00:02:09,350 --> 00:02:14,230
chmod ett plus r css-1.html.

39
00:02:14,230 --> 00:02:22,260
Vi öppnar upp Chrome och besök
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Inte illa.

41
00:02:22,960 --> 00:02:26,930
Exakt som jag tänkt, men jag skulle vilja
ta saker ett steg längre nu och

42
00:02:26,930 --> 00:02:29,050
center John Harvards text.

43
00:02:29,050 --> 00:02:32,080
Nu för att göra det, kan jag linda
hela sidan i en div som jag

44
00:02:32,080 --> 00:02:33,800
gjorde ett tidigare exempel.

45
00:02:33,800 --> 00:02:37,820
Eller jag kan vara mer smart och inser att
alla dessa divs är inne i

46
00:02:37,820 --> 00:02:42,420
min sida kropp, så varför inte bara gälla
en eller flera CSS-egenskaper för kroppen

47
00:02:42,420 --> 00:02:43,850
tagga sig själv?

48
00:02:43,850 --> 00:02:45,460
>> För att göra detta, låt oss göra detta.

49
00:02:45,460 --> 00:02:47,650
Låt oss gå tillbaka till gedit här.

50
00:02:47,650 --> 00:02:52,460
Låt oss bläddra tillbaka upp till Style-taggen,
och låt oss ange en väljare bara

51
00:02:52,460 --> 00:02:54,520
använder den taggen namn, Body.

52
00:02:54,520 --> 00:03:00,580
Därunder, låt oss sätta våra klammerparenteser
följt av text-align center.

53
00:03:00,580 --> 00:03:05,580
Låt oss nu spara sidan och ladda om
det inne i den webbläsaren.

54
00:03:05,580 --> 00:03:08,090
Ladda om den i Chrome, och voila.

55
00:03:08,090 --> 00:03:11,000
Vi har nu John Harvards sida
centrerad som vi tänkt.

56
00:03:11,000 --> 00:03:12,619