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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Het blijkt dat HTML is niet
de enige taal die je binnen kunt gebruiken

3
00:00:03,310 --> 00:00:03,895
van een webpagina.

4
00:00:03,895 --> 00:00:08,100
U kunt iets genaamd CSS gebruiken, of
Cascading Style Sheets, als goed.

5
00:00:08,100 --> 00:00:12,120
CSS kun je veel meer te specificeren
precies de esthetiek van een web

6
00:00:12,120 --> 00:00:16,930
pagina, inclusief opmaak en maten en
kleuren en lettertypen en nog veel meer.

7
00:00:16,930 --> 00:00:20,820
Bijvoorbeeld, laten we maken een webpagina
hier genoemd CSS0 dat een vertegenwoordigt

8
00:00:20,820 --> 00:00:22,740
startpagina voor, zeg, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Op deze pagina zullen we moeten John Harvard
Namen, waar doorheen zal

10
00:00:25,480 --> 00:00:28,500
een leuk bericht achter voor zijn bezoekers, onder
die zal een voettekst zijn, met

11
00:00:28,500 --> 00:00:30,590
zeggen, sommige copyright informatie.

12
00:00:30,590 --> 00:00:34,650
Om dit te doen, laten we drie divisies definiëren
voor de pagina met behulp van een tag

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

14
00:00:35,670 --> 00:00:43,880
Open beugel div, John Harvard, in de buurt
beugel div, een andere open beugel div,

15
00:00:43,880 --> 00:00:48,330
en nu gaan we iets opgeven
zoals, welkom op mijn homepage!

16
00:00:48,330 --> 00:00:50,420
En laten we sluiten deze div, als goed.

17
00:00:50,420 --> 00:00:53,700
>> En nu een derde en laatste
div, auteursrecht.

18
00:00:53,700 --> 00:00:58,250
Gewoon om fancy te zijn, laat ik nu gebruik maken van een HTML
entiteit, een symbool dat staat voor

19
00:00:58,250 --> 00:01:01,140
een personage dat je kon niet anders
typen op je toetsenbord.

20
00:01:01,140 --> 00:01:07,490
In het bijzonder, ga ik doen
ampersand, pond, 169, puntkomma.

21
00:01:07,490 --> 00:01:10,620
Blijkt dat is de numerieke code
voor het copyright symbool.

22
00:01:10,620 --> 00:01:14,260
Laten we dan opgeven John Harvard
hier onder.

23
00:01:14,260 --> 00:01:17,180
Laten we sluiten de div en sla het bestand op.

24
00:01:17,180 --> 00:01:18,910
>> Nu, wat is dit div-tag?

25
00:01:18,910 --> 00:01:21,970
De div-tag gewoon definieert een divisie
van de pagina, dat in wezen een

26
00:01:21,970 --> 00:01:23,310
rechthoekige gebied.

27
00:01:23,310 --> 00:01:26,850
Dus op dit moment in de tijd, ik heb drie
rechthoekige gebieden, bovenop

28
00:01:26,850 --> 00:01:27,620
andere.

29
00:01:27,620 --> 00:01:30,610
Dus nu, het effect bijna
al had ik drie alinea's.

30
00:01:30,610 --> 00:01:33,490
Maar we zullen niet zo veel te zien
witte ruimte tussen hen in.

31
00:01:33,490 --> 00:01:36,170
>> Laten we sla dit bestand, verander de
machtigingen en een kijkje nemen voor een

32
00:01:36,170 --> 00:01:37,990
moment in Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Laten we nu openstellen Chrome en bezoek
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Inderdaad, hier is een startpagina
voor John Harvard.

36
00:01:54,630 --> 00:01:59,370
Laten we nu stileren het een beetje meer
Juist met behulp van enkele CSS.

37
00:01:59,370 --> 00:02:03,510
>> Terug in gedit, laten we gaan in dit
eerste div-tag en voeg een stijl

38
00:02:03,510 --> 00:02:11,060
attribuut specificeert dat Ik wil graag een
lettergrootte van, zeg, 36 pixels, of px.

39
00:02:11,060 --> 00:02:15,650
En ik zou graag het gewicht van dit lettertype
vet in plaats van de standaard te zijn,

40
00:02:15,650 --> 00:02:16,980
wat normaal.

41
00:02:16,980 --> 00:02:21,170
Voor de tweede div, laten we opgeven
andere stijl attribuut dat een heeft

42
00:02:21,170 --> 00:02:25,550
lettergrootte van 24 pixels, dus
een beetje kleiner.

43
00:02:25,550 --> 00:02:28,410
Sluiten citaten na de puntkomma.

44
00:02:28,410 --> 00:02:33,255
>> Ten slotte, in dit derde div, laten we het doen
stijl is gelijk aan de grootte citaat, lettertype en

45
00:02:33,255 --> 00:02:35,340
laten we zeggen 12 pixels deze tijd.

46
00:02:35,340 --> 00:02:37,280
Sluiten citaat na de puntkomma.

47
00:02:37,280 --> 00:02:40,200
Merk op toen dat ik lijken te hebben
gespecificeerd een beetje stilering voor

48
00:02:40,200 --> 00:02:43,770
elk van deze drie divs met,
het blijkt, CSS.

49
00:02:43,770 --> 00:02:47,820
In feite is de syntaxis die u ziet in
tussen die dubbele aanhalingstekens is CSS,

50
00:02:47,820 --> 00:02:50,620
specifiek CSS-eigenschappen
met waarden.

51
00:02:50,620 --> 00:02:53,910
En voor die eerste tag, waar ik
twee van dergelijke eigenschappen, lettergrootte en

52
00:02:53,910 --> 00:02:57,290
tekengewicht, ik gewoon gescheiden
met een puntkomma.

53
00:02:57,290 --> 00:02:59,940
>> Nu, net omwille van de stijl van, ik
ook puntkomma's op

54
00:02:59,940 --> 00:03:00,880
het eind van elke regel.

55
00:03:00,880 --> 00:03:04,270
Maar ze zijn niet strikt noodzakelijk is,
vooral wanneer u slechts een

56
00:03:04,270 --> 00:03:05,580
eigenschap is gedefinieerd.

57
00:03:05,580 --> 00:03:08,370
Laten we nu het bestand opslaan en herladen
in Chrome, en zie wat

58
00:03:08,370 --> 00:03:11,000
het netto-effect is.

59
00:03:11,000 --> 00:03:13,470
Terug in Chrome hier,
laten we op Reload.

60
00:03:13,470 --> 00:03:15,800
>> Nu hebben we een iets interessanter
startpagina voor John

61
00:03:15,800 --> 00:03:19,000
Harvard, waarbij de eerste lijn met
zijn naam, dat is de binnenkant van dat

62
00:03:19,000 --> 00:03:23,470
eerste div, is 36 pixels hoog en ook
vetgedrukt, waarbij de tweede lijn,

63
00:03:23,470 --> 00:03:27,340
die in die tweede div, is 24
pixels hoog, maar niet vetgedrukt.

64
00:03:27,340 --> 00:03:31,500
En waarbij de derde regel in dat derde
div is 12 pixels hoog en ook

65
00:03:31,500 --> 00:03:32,610
niet vetgedrukt.

66
00:03:32,610 --> 00:03:35,380
Maar stel nu ik wil verschuiven
alle van deze tekst over

67
00:03:35,380 --> 00:03:36,650
zodanig dat het midden.

68
00:03:36,650 --> 00:03:40,480
>> Elk van de afzonderlijke ik kon uitlijnen
divs als gecentreerd.

69
00:03:40,480 --> 00:03:45,330
Maar makkelijker, kon ik wikkel die
drie divs binnenkant van een vierde div, een

70
00:03:45,330 --> 00:03:49,360
ouder div, om zo te zeggen, en geef
dat div en alle

71
00:03:49,360 --> 00:03:52,610
afstammelingen moet
tekst uitgelijnd centrum?

72
00:03:52,610 --> 00:03:54,120
Laten we eens een kijkje nemen.

73
00:03:54,120 --> 00:03:58,510
>> Binnenkant van gedit, laten we terug gaan naar mijn
lichaam en voeg een nieuwe div up top met

74
00:03:58,510 --> 00:04:04,460
div, is gelijk aan stijl citaat unquote
tekst richt centrum, in de buurt

75
00:04:04,460 --> 00:04:06,250
citeer na de puntkomma.

76
00:04:06,250 --> 00:04:10,280
En nu, laten we verder gaan en alle streepje
van die lijnen die we eerder getypt.

77
00:04:10,280 --> 00:04:15,040
En onder dat derde div, laten we
sluit deze nieuwe div.

78
00:04:15,040 --> 00:04:18,829
>> Met andere woorden, omdat deze drie
originele divs zijn nu kinderen, om zo te

79
00:04:18,829 --> 00:04:22,110
spreken van een nieuwe ouder div en ik heb
aangegeven dat ik zou willen uitlijnen van de

80
00:04:22,110 --> 00:04:26,140
tekst van die ouder div in het centrum
van de pagina, dat eigendom

81
00:04:26,140 --> 00:04:28,290
overgenomen door alle van die kinderen.

82
00:04:28,290 --> 00:04:32,370
Inderdaad, laten we het bestand opslaan en
een kijkje nemen in een browser.

83
00:04:32,370 --> 00:04:34,650
Laten we herladen in Chrome.

84
00:04:34,650 --> 00:04:37,540
En daar hebben we het, een nog mooiere
startpagina voor John Harvard.

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