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

2
00:00:00,300 --> 00:00:04,840
>> SPEAKER: Så det er faktisk ikke den bedste
designe at blande CSS med HTML.

3
00:00:04,840 --> 00:00:08,700
Tværtimod, det er bedst at faktor ud af din
CSS, sætte det et sted centralt, og

4
00:00:08,700 --> 00:00:11,430
en eller anden måde anvende det til
tags i din webside.

5
00:00:11,430 --> 00:00:15,290
For at opnå dette, kan vi faktisk stoppe
bruge Style attribut og i stedet

6
00:00:15,290 --> 00:00:19,290
bruge en stil tag, der hører til i
leder af en webside sammen, for

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

8
00:00:20,700 --> 00:00:24,400
>> Lad os give det en chance og re-implementere
et hjem side for John Harvard

9
00:00:24,400 --> 00:00:26,410
bruge Style tag.

10
00:00:26,410 --> 00:00:28,930
Jeg har allerede fået os i gang
her med tre divs til

11
00:00:28,930 --> 00:00:30,260
John Harvard hjemmeside.

12
00:00:30,260 --> 00:00:33,990
Men lad os først nu gå op til denne første
div og tilføje en ny attribut,

13
00:00:33,990 --> 00:00:38,680
nemlig id, og angive, at en unik
identifikator for denne særlige div

14
00:00:38,680 --> 00:00:42,390
skal være, for eksempel, citat citat slut
"Top", et vilkårligt navn, men

15
00:00:42,390 --> 00:00:45,840
beskrivende i, at denne div er
faktisk øverst på min side.

16
00:00:45,840 --> 00:00:48,920
>> For den næste div, så lad os give det en
forskellig ID citat citat slut

17
00:00:48,920 --> 00:00:54,080
"Midten", og lad os give den tredje div
et id på citat citat slut "bottom". Vi

18
00:00:54,080 --> 00:00:57,740
nu har tre entydig identifikator
som vi kan anvende nogle CSS

19
00:00:57,740 --> 00:01:01,210
egenskaber, men først, lad os vende tilbage
til lederen af ​​denne side.

20
00:01:01,210 --> 00:01:04,760
Lige over titlen her, vil jeg
gå videre og definere stil

21
00:01:04,760 --> 00:01:07,120
og luk derefter stil.

22
00:01:07,120 --> 00:01:10,340
>> Inde i dette nu, vil jeg definere
nogle CSS egenskaber, nemlig

23
00:01:10,340 --> 00:01:14,550
samme dem jeg tidligere havde i Style
attributter, men her vil de være

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

25
00:01:16,320 --> 00:01:20,880
At gøre det, vil jeg specificere pund
symbol efterfulgt af top, hvorved

26
00:01:20,880 --> 00:01:24,710
præciserer, at følgende CSS
egenskaber bør gælde uanset

27
00:01:24,710 --> 00:01:28,800
HTML-element har den unikke
identifikator af toppen.

28
00:01:28,800 --> 00:01:32,240
Jeg derefter gå til at have nogle åbne og
lukkede krøllede parenteser, og jeg har tænkt mig at

29
00:01:32,240 --> 00:01:39,170
specificere, siger, skal skriftstørrelsen være 36
pixels skal skrifttype vægt være modige.

30
00:01:39,170 --> 00:01:41,810
>> For at holde tingene rene, jeg sætter hver
af disse ejendomme nu på egen hånd

31
00:01:41,810 --> 00:01:44,610
linje, men det er bare en
stilistisk konvention.

32
00:01:44,610 --> 00:01:47,830
Under dette, lad os nu definere en anden
selector, så at sige.

33
00:01:47,830 --> 00:01:52,680
Denne ene til HTML-tag, der har
unik identifikation af midten.

34
00:01:52,680 --> 00:01:57,540
Og her, lad os angive en skriftstørrelse
24 pixels, under den anden

35
00:01:57,540 --> 00:02:01,520
omskifter for bunden, og inde
af det, lad os angive en

36
00:02:01,520 --> 00:02:03,850
skriftstørrelse 12 pixels.

37
00:02:03,850 --> 00:02:09,350
>> Lad os nu gemme, ændre tilladelserne
på, og indlæse denne side i en browser,

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

39
00:02:14,230 --> 00:02:22,260
Lad os åbne op Chrome og besøge
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Ikke dårligt.

41
00:02:22,960 --> 00:02:26,930
Præcis som jeg havde tænkt mig, men jeg vil gerne
tage tingene et skridt videre nu, og

42
00:02:26,930 --> 00:02:29,050
center John Harvard tekst.

43
00:02:29,050 --> 00:02:32,080
Nu for at gøre det, kunne jeg ombryde
hel side i en div, som jeg

44
00:02:32,080 --> 00:02:33,800
gjorde et tidligere eksempel.

45
00:02:33,800 --> 00:02:37,820
Eller jeg kan være mere klog og indse, at
alle disse divs er inde i

46
00:02:37,820 --> 00:02:42,420
min side krop, så hvorfor ikke bare anvende
én eller flere CSS egenskaber til kroppen

47
00:02:42,420 --> 00:02:43,850
tagge sig selv?

48
00:02:43,850 --> 00:02:45,460
>> For at gøre det, så lad os gøre det.

49
00:02:45,460 --> 00:02:47,650
Lad os gå tilbage til gedit her.

50
00:02:47,650 --> 00:02:52,460
Lad os rulle tilbage op til Style tag,
og lad os angive en selector bare

51
00:02:52,460 --> 00:02:54,520
ved hjælp af denne tag navn, Body.

52
00:02:54,520 --> 00:03:00,580
Nedenfor dette, lad os sætte vores krøllede parenteser
efterfulgt af tekst-align center.

53
00:03:00,580 --> 00:03:05,580
Lad os nu gemme siden og genindlæse
det inde i denne browser.

54
00:03:05,580 --> 00:03:08,090
Reload i Chrome, og voila.

55
00:03:08,090 --> 00:03:11,000
Vi har nu John Harvard side
centreret som vi bestemt.

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