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

2
00:00:00,300 --> 00:00:04,840
>> SPEAKER: Dus het is eigenlijk niet de beste
ontwerpen om CSS vermengen met HTML.

3
00:00:04,840 --> 00:00:08,700
Integendeel, het is het beste om factor uit uw
CSS, zet het ergens centraal, en

4
00:00:08,700 --> 00:00:11,430
een of andere manier toe te passen op de
tags in uw webpagina.

5
00:00:11,430 --> 00:00:15,290
Om dit te bereiken, kunnen we eigenlijk stoppen
met behulp van het attribuut Style en in plaats daarvan

6
00:00:15,290 --> 00:00:19,290
gebruik maken van een Style-tag, die behoort bij de
hoofd van een webpagina naast, voor

7
00:00:19,290 --> 00:00:20,700
Bijvoorbeeld, je titel.

8
00:00:20,700 --> 00:00:24,400
>> Laten we dit eens te proberen en opnieuw te implementeren
een homepage voor John Harvard

9
00:00:24,400 --> 00:00:26,410
het gebruik van de Style-tag.

10
00:00:26,410 --> 00:00:28,930
Heb ik al leren ons begonnen
hier met drie divs voor

11
00:00:28,930 --> 00:00:30,260
John Harvard's homepage.

12
00:00:30,260 --> 00:00:33,990
Maar laten we eerst nu gaan tot deze eerste
div en voeg een nieuw attribuut,

13
00:00:33,990 --> 00:00:38,680
namelijk ID, en geef die een unieke
identifier voor deze specifieke div

14
00:00:38,680 --> 00:00:42,390
is, bijvoorbeeld, citaat unquote
"Top" een willekeurige naam, maar

15
00:00:42,390 --> 00:00:45,840
beschrijvend dat deze div is
inderdaad aan de bovenkant van mijn pagina.

16
00:00:45,840 --> 00:00:48,920
>> Voor de volgende div, laten we het een
verschillende ID citaat unquote

17
00:00:48,920 --> 00:00:54,080
"Midden" en laten we de derde div
een ID van citaat unquote "bottom." Wij

18
00:00:54,080 --> 00:00:57,740
hebben nu drie unieke identificatiecode
waaraan kunnen we een aantal CSS toepassen

19
00:00:57,740 --> 00:01:01,210
eigenschappen, maar laten we eerst eens terugkeer
aan het hoofd van deze pagina.

20
00:01:01,210 --> 00:01:04,760
Net boven de titel hier, ik zal
ga je gang en definiëren stijl

21
00:01:04,760 --> 00:01:07,120
en sluit stijl.

22
00:01:07,120 --> 00:01:10,340
>> Binnenkant van deze nu, ga ik definiëren
sommige CSS-eigenschappen, namelijk de

23
00:01:10,340 --> 00:01:14,550
dezelfde die ik eerder had in Stijl
attributen, maar hier zullen ze

24
00:01:14,550 --> 00:01:16,320
centraal gedefinieerd.

25
00:01:16,320 --> 00:01:20,880
Om dit te doen, ik ga naar het asiel te geven
symbool gevolgd door de top, waardoor

26
00:01:20,880 --> 00:01:24,710
bepaald dat de volgende CSS
eigenschappen moeten gelden voor wat

27
00:01:24,710 --> 00:01:28,800
HTML element heeft de unieke
identifier van de top.

28
00:01:28,800 --> 00:01:32,240
Ik ben vervolgens naar een aantal open te hebben en
gesloten accolades, en ik ga

29
00:01:32,240 --> 00:01:39,170
specificeren, zeg, zal lettergrootte zijn 36
pixels, zal gewicht lettertype vet.

30
00:01:39,170 --> 00:01:41,810
>> Om dingen schoon, ik zet elke
van deze eigenschappen nu op zijn eigen

31
00:01:41,810 --> 00:01:44,610
lijn, maar dat is slechts een
stilistische conventie.

32
00:01:44,610 --> 00:01:47,830
Onder deze, laten we nu een ander definiëren
selector, om zo te zeggen.

33
00:01:47,830 --> 00:01:52,680
Deze is voor de HTML-tag die heeft
unieke identificatie van het midden.

34
00:01:52,680 --> 00:01:57,540
En hier, laten we geef een lettergrootte
van 24 pixels, het andere gedeelte

35
00:01:57,540 --> 00:02:01,520
selector voor de bodem, en de binnenkant
van die, laten we geef een

36
00:02:01,520 --> 00:02:03,850
lettergrootte van 12 pixels.

37
00:02:03,850 --> 00:02:09,350
>> Laten we het nu redden, dat de machtigingen
op, en laad deze pagina in een browser,

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

39
00:02:14,230 --> 00:02:22,260
Laten we openen Chrome en bezoek
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Niet slecht.

41
00:02:22,960 --> 00:02:26,930
Precies zoals ik van plan, maar ik wil graag
dingen nu een stap verder en

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

43
00:02:29,050 --> 00:02:32,080
Nu om dit te doen, kon ik wikkel de
hele pagina in een div als ik

44
00:02:32,080 --> 00:02:33,800
deed een eerder voorbeeld.

45
00:02:33,800 --> 00:02:37,820
Of ik kan slimmer worden en beseffen dat
al deze divs zijn binnenin

46
00:02:37,820 --> 00:02:42,420
mijn pagina's lichaam, dus waarom niet gewoon van toepassing
een of meer CSS-eigenschappen voor het lichaam

47
00:02:42,420 --> 00:02:43,850
zelf taggen?

48
00:02:43,850 --> 00:02:45,460
>> Om dit te doen, laten we dit doen.

49
00:02:45,460 --> 00:02:47,650
Laten we teruggaan naar gedit gaan hier.

50
00:02:47,650 --> 00:02:52,460
Laten scroll terug naar de Style-tag,
en laten we geef een selector net

51
00:02:52,460 --> 00:02:54,520
gebruik van die tag naam, Body.

52
00:02:54,520 --> 00:03:00,580
Onder dat, laten we onze accolades
gevolgd door text-align center.

53
00:03:00,580 --> 00:03:05,580
Laten we nu de pagina opslaan en herladen
het binnen van die browser.

54
00:03:05,580 --> 00:03:08,090
Herladen in Chrome, en voila.

55
00:03:08,090 --> 00:03:11,000
We hebben nu pagina John Harvard
gecentreerd zoals de bedoeling.

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