1
00:00:00,330 --> 00:00:00,640
Er.

2
00:00:00,660 --> 00:00:01,610
Welkom terug.

3
00:00:01,920 --> 00:00:04,060
Dus deze les gaat erg snel zijn.

4
00:00:04,200 --> 00:00:16,480
We zijn net over twee labels van de DIV-tag en de spand tag en we kunnen echt niet praten over veel zo ver als wat ze doen en hoe we ze gebruiken totdat we te zien krijgen beoordelen waar we dingen kunnen stylen.

5
00:00:16,560 --> 00:00:22,410
Maar ik wil gewoon om ze nu te introduceren, want ik ga je laten zien wat er met behulp van divs en overspanningen.

6
00:00:22,410 --> 00:00:27,640
In de volgende paar video's en ik een geweldige baan niet echt heeft gedaan van het uit te leggen in de eerste versie van deze cursus.

7
00:00:27,690 --> 00:00:31,820
Dus ging ik terug en voegde dit op een na de feiten na de cursus werd gepubliceerd.

8
00:00:31,950 --> 00:00:38,800
Ik zag een paar vragen die ik heb gemerkt dat misschien kan ik opruimen als ik net deed een betere baan uit te leggen Dave's eerder.

9
00:00:39,000 --> 00:00:39,340
OK.

10
00:00:39,360 --> 00:00:42,030
Dus laten we beginnen te praten over divs en overspanningen.

11
00:00:42,060 --> 00:00:49,770
Het eerste wat ik zal zeggen is dat ze allebei zoals ik al zei zijn niet zo nuttig zijn totdat we eigenlijk aan styling-elementen.

12
00:00:49,770 --> 00:00:58,060
Maar wat ze doen is dat ze u toestaan ​​om inhoud van de groep bij elkaar dus een div volgens MT-NW is slechts een generieke container.

13
00:00:58,320 --> 00:01:09,210
Dus het is gewoon een is het een manier om te groeperen dingen als een voorbeeld Ik zeg niet dat dit een div recht hier, maar dit zou een div gewoon een kader rond enkele inhoud.

14
00:01:09,210 --> 00:01:20,380
Het lijkt erop dat sommige tekst hier een aantal foto's en wat meer tekst aan de groep die helemaal en geef het een grote border of geef het een achtergrond verontschuldig mij kun je dat doen met een div.

15
00:01:20,400 --> 00:01:25,780
Opnieuw hebben we niet gesproken over hoe je dat gewoon nog niet, maar het idee is dat je kunt gewoon groeperen dingen samen.

16
00:01:25,950 --> 00:01:29,660
Dus je zult het zien van me gebruiken divs veel in deze cursus gaan vooruit.

17
00:01:29,760 --> 00:01:32,450
Laat me u tonen een snel voorbeeld.

18
00:01:32,520 --> 00:01:41,750
Dus als ik wat tekst hier toe te voegen en dit is eigenlijk iets dat een van de studenten in deze cursus opgemerkt in het discussieforum.

19
00:01:41,790 --> 00:01:47,410
Ik wist niets van dat is leuk als je typt gewoon Lorem en tab te raken.

20
00:01:47,590 --> 00:01:53,170
Het zal ons Lorem Ipsum eigenlijk gewoon een stelletje voorbeeldtekst placeholder tekst geven.

21
00:01:53,280 --> 00:01:58,100
Dus ik ga om dit te gebruiken maken van twee van hen.

22
00:01:58,440 --> 00:02:06,890
En dan ook toe te voegen in een H1 en laten we zeggen dat dit H-1, het maakt eigenlijk niet uit of gewoon even wat daar.

23
00:02:07,020 --> 00:02:14,300
Maar laten we zeggen dat dit een paragraaf en ik wil de groep die twee dingen samen.

24
00:02:14,310 --> 00:02:22,150
De H-1 in de paragraaf laten we zeggen uiteindelijk weer kunnen we het nu niet doen, maar uiteindelijk wil ik een doos hebben ongeveer is een grens en oranje rand.

25
00:02:22,260 --> 00:02:24,230
Maar het hoeft niet onder deze.

26
00:02:24,270 --> 00:02:35,340
Wat ik wel kan doen is gewoon ze te groeperen in een div-tag zo d v en op te slaan.

27
00:02:35,460 --> 00:02:42,350
En als ik de pagina vernieuwen of eigenlijk open het in de eerste plaats het gaat niet helemaal anders uitzien.

28
00:02:42,430 --> 00:02:56,540
Het gaat niet om te kijken als om het even wat eigenlijk, omdat er geen styling voor ons om te zien alles wat er gebeurd is, is dat deze twee dingen zijn nu gegroepeerd in een container slechts een generieke doos een container om ze bij elkaar te houden dat we dan kunnen gaan stijl later.

29
00:02:56,580 --> 00:03:07,350
Dus als ik gaf dat afd een achtergrond als ik maakte het een gele achtergrond die gele achtergrond ruwweg zou gaan rond dit, maar het zou geen enkele van de tweede paragraaf.

30
00:03:07,350 --> 00:03:12,440
Zodat een div overspanning anderzijds ook een generieke container.

31
00:03:12,630 --> 00:03:14,840
Maar er is een belangrijk verschil.

32
00:03:14,910 --> 00:03:17,640
Dus laat ik beginnen met een voorbeeld.

33
00:03:17,910 --> 00:03:23,520
Laten we zeggen dat ik wilde een aantal van deze woorden hier te benadrukken.

34
00:03:23,670 --> 00:03:24,600
Ipsum deur.

35
00:03:24,660 --> 00:03:30,840
Ongeacht wat ik wil dit geel in plaats van zwart te maken, zodat de rest van de tekst is zwart.

36
00:03:30,930 --> 00:03:34,510
Maar ik wil dit als gele benadrukken en maken het lettertype groter of iets.

37
00:03:34,590 --> 00:03:36,090
Opnieuw weten we niet hoe dat toch te doen.

38
00:03:36,450 --> 00:03:57,120
Maar het idee is dat ik zou een label nodig om dit en als ik een div daar dat is een generieke container ups en ik spaar en verfrissen je zult zien dat het wordt geslagen op een nieuwe regel en dat is omdat een div is een blok level element.

39
00:03:57,120 --> 00:04:01,410
Dus dat betekent dat het duurt een eigen lijn, net als een paragraaf doet.

40
00:04:01,410 --> 00:04:06,960
Wanneer u een paragraaf toe te voegen in alles na die paragraaf wordt naar beneden geduwd om een ​​nieuwe lijn.

41
00:04:07,230 --> 00:04:10,470
Dus een div een block level generieke container.

42
00:04:10,470 --> 00:04:25,340
Als ik dit met een overspanning ter vervanging van deze is niet van plan om helemaal indrukwekkend, want hoe kan ik iets zie je echt een verandering hier zien, maar het zal gewoon uitzien als een gewone paragraaf, dus ik ga om te vernieuwen en er is een container .

43
00:04:25,340 --> 00:04:30,140
Nu is er een generieke overspanning rond deze content die niets doet.

44
00:04:30,540 --> 00:04:33,860
In tegenstelling tot een div al is het een inline-container.

45
00:04:33,870 --> 00:04:41,200
Dus overspanning is in principe het groeperen van de inhoud selecteren inhoud in lijn en een div is een andere manier van groeperen van content.

46
00:04:41,310 --> 00:04:42,930
Maar het is een block-level element.

47
00:04:43,200 --> 00:04:45,840
Dus ik weet dat dit een beetje theoretisch op dit punt.

48
00:04:45,970 --> 00:04:48,820
Het is een beetje moeilijk om het nut van te begrijpen.

49
00:04:48,990 --> 00:05:08,060
Maar al snel als we in C Ss zullen we in staat zijn om iets te zeggen als gaan zoeken die spanwijdte voegde ik in en maken het vijftien punts lettertype en geel of ga vinden dat div voegde ik in en geef het een oranje grens en wat we doen en dan komen we uit op een oranje kader rond deze content.

50
00:05:08,070 --> 00:05:11,020
generieke containers Oké grote divs overspanning's.