1
00:00:00,330 --> 00:00:00,640
Là.

2
00:00:00,660 --> 00:00:01,610
Ben tornato.

3
00:00:01,920 --> 00:00:04,060
Quindi questa lezione sarà molto veloce.

4
00:00:04,200 --> 00:00:10,680
Stiamo solo parlando di due tag, il tag DIV e il tag spand e non possiamo davvero parlare tanto di ciò

5
00:00:11,040 --> 00:00:16,480
che fanno e di come li usiamo fino a quando non vedremo valutare dove possiamo modellare le cose.

6
00:00:16,560 --> 00:00:22,410
Ma voglio solo presentarli ora perché sto per mostrarti le cose usando div e span.

7
00:00:22,410 --> 00:00:27,110
Nei prossimi video e non ho fatto un ottimo lavoro in realtà per spiegarlo nella prima bozza di

8
00:00:27,120 --> 00:00:27,640
questo corso.

9
00:00:27,690 --> 00:00:31,820
Così sono tornato e ho aggiunto questo in un dopo il fatto dopo la pubblicazione del Corso.

10
00:00:31,950 --> 00:00:37,890
Ho visto alcune domande che ho notato che forse avrei potuto chiarire se avessi fatto un lavoro migliore

11
00:00:37,920 --> 00:00:38,800
spiegando Dave prima.

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

13
00:00:39,360 --> 00:00:42,030
Quindi iniziamo a parlare di div e span.

14
00:00:42,060 --> 00:00:47,490
La prima cosa che dirò è che entrambi, come ho detto, non sono così utili

15
00:00:47,490 --> 00:00:49,770
finché non arriviamo agli elementi di stile.

16
00:00:49,770 --> 00:00:56,760
è che ti permettono di raggruppare il contenuto in modo tale che un div in base a MT-NW è solo un contenitore generico.

17
00:00:56,760 --> 00:00:58,060
Ma quello che fanno

18
00:00:58,320 --> 00:01:04,440
Quindi è solo un modo per raggruppare le cose come esempio. Non sto dicendo che questo è un div in questo

19
00:01:05,040 --> 00:01:09,210
caso, ma questo potrebbe essere un div solo un riquadro attorno ad alcuni contenuti.

20
00:01:09,210 --> 00:01:15,420
Sembra un po 'di testo qui alcune immagini e un po' di testo in più per raggrupparlo e

21
00:01:15,420 --> 00:01:20,380
dargli un grande bordo o dargli uno sfondo scusami, puoi farlo con un div.

22
00:01:20,400 --> 00:01:24,960
Ancora una volta non abbiamo ancora parlato di come lo fai, ma l'idea è che puoi semplicemente

23
00:01:24,960 --> 00:01:25,780
raggruppare le cose.

24
00:01:25,950 --> 00:01:29,660
Quindi mi vedrai usare molte div in questo corso andando avanti.

25
00:01:29,760 --> 00:01:32,450
Lasciatemi solo mostrarti un rapido esempio.

26
00:01:32,520 --> 00:01:40,290
Quindi se aggiungo del testo qui e questo è effettivamente qualcosa che uno degli studenti di questo corso ha indicato

27
00:01:40,290 --> 00:01:41,750
nel forum di discussione.

28
00:01:41,790 --> 00:01:47,410
Non sapevo che è bello se digiti Lorem e premi scheda.

29
00:01:47,590 --> 00:01:53,170
Ci fornirà Lorem Ipsum in pratica solo un gruppo di testo segnaposto di testo di esempio.

30
00:01:53,280 --> 00:01:58,100
Quindi userò questo per farne due.

31
00:01:58,440 --> 00:02:06,470
E poi aggiungo anche un H1 e diciamo che questo H-1 non ha importanza o semplicemente mette qualcosa

32
00:02:06,470 --> 00:02:06,890
lì.

33
00:02:07,020 --> 00:02:08,990
Ma diciamo che questo è un paragrafo

34
00:02:12,060 --> 00:02:14,300
e voglio raggruppare queste due cose insieme.

35
00:02:14,310 --> 00:02:19,560
L'H-1 nel paragrafo diciamo alla fine di nuovo che non possiamo farlo ora, ma alla fine voglio avere un

36
00:02:19,560 --> 00:02:22,150
riquadro attorno a un bordo e un bordo arancione.

37
00:02:22,260 --> 00:02:24,230
Ma non include questo.

38
00:02:24,270 --> 00:02:28,630
Quello che posso fare è raggrupparli insieme in un tag div

39
00:02:33,090 --> 00:02:35,340
in modo d v e salvare.

40
00:02:35,460 --> 00:02:41,700
aggiorno la pagina o effettivamente la apro, in primo luogo non avrà un aspetto diverso.

41
00:02:41,700 --> 00:02:42,350
E se

42
00:02:42,430 --> 00:02:48,180
Non assomiglierà a nulla in realtà perché non c'è stile per noi per vedere tutto quello che è

43
00:02:48,180 --> 00:02:53,580
successo è che queste due cose sono ora raggruppate in un contenitore solo una scatola generica per

44
00:02:53,580 --> 00:02:56,540
tenerle insieme che possiamo poi andare in stile più tardi.

45
00:02:56,580 --> 00:03:01,800
Quindi, se avessi dato a quel div uno sfondo se avessi fatto uno sfondo giallo, lo

46
00:03:01,800 --> 00:03:07,350
sfondo giallo sarebbe andato all'incirca attorno a questo, ma non avrebbe incluso alcuno del secondo paragrafo.

47
00:03:07,350 --> 00:03:12,440
Quindi questa è una divisione div, d'altra parte è anche un contenitore generico.

48
00:03:12,630 --> 00:03:14,840
Ma c'è una differenza fondamentale.

49
00:03:14,910 --> 00:03:17,640
Quindi vorrei iniziare con un esempio qui.

50
00:03:17,910 --> 00:03:23,520
Diciamo che volevo evidenziare alcune di queste parole proprio qui.

51
00:03:23,670 --> 00:03:24,600
Porta Ipsum.

52
00:03:24,660 --> 00:03:30,840
Qualunque cosa io voglia fare questo giallo piuttosto che nero, il resto del testo è nero.

53
00:03:30,930 --> 00:03:34,510
Ma voglio evidenziare questo come giallo e rendere il font più grande o qualcosa del genere.

54
00:03:34,590 --> 00:03:36,090
Ancora non sappiamo come farlo ancora.

55
00:03:36,450 --> 00:03:43,410
bisogno di un tag attorno a questo e se metto un div esattamente lì che è un container

56
00:03:45,390 --> 00:03:54,960
generico e io salvo e aggiorno vedrai che viene buttato su una nuova riga e questo perché un div è un blocco elemento di livello.

57
00:03:54,990 --> 00:03:57,120
Ma l'idea è che avrei

58
00:03:57,120 --> 00:04:01,410
Ciò significa che riprende la propria linea proprio come fa un paragrafo.

59
00:04:01,410 --> 00:04:06,960
Quando aggiungi un paragrafo in tutto dopo che quel paragrafo è stato spostato su una nuova riga.

60
00:04:07,230 --> 00:04:10,470
Quindi un div è un contenitore generico a livello di blocco.

61
00:04:10,470 --> 00:04:17,430
Se lo sostituisco con uno span questo non sarà per nulla impressionante perché come posso vedere qualcosa in realtà vedrai

62
00:04:17,430 --> 00:04:22,410
un cambiamento qui, ma sembrerà un normale paragrafo, quindi ho intenzione di aggiornare e

63
00:04:23,930 --> 00:04:25,340
c'è un contenitore .

64
00:04:25,340 --> 00:04:30,140
Ora c'è un intervallo generico attorno a questo contenuto che non sta facendo nulla.

65
00:04:30,540 --> 00:04:33,860
A differenza di un div è un contenitore in linea.

66
00:04:33,870 --> 00:04:40,680
Quindi lo span serve fondamentalmente per raggruppare il contenuto selezionando il contenuto in linea e un div è un altro modo per raggruppare

67
00:04:40,680 --> 00:04:41,200
il contenuto.

68
00:04:41,310 --> 00:04:42,930
Ma è un elemento a livello di blocco.

69
00:04:43,200 --> 00:04:45,840
Quindi so che questo è un po 'teorico a questo punto.

70
00:04:45,970 --> 00:04:48,820
È un po 'difficile da capire l'utilità di.

71
00:04:48,990 --> 00:04:55,290
come trovare l'intervallo che ho aggiunto e renderlo quindici punti carattere e giallo o andare a trovare quel

72
00:04:55,380 --> 00:05:03,830
div che ho aggiunto e dargli un bordo arancione e qualunque cosa fare e poi finiamo con un bordo arancione attorno a questo contenuto.

73
00:05:04,010 --> 00:05:08,060
Ma molto presto, quando entreremo in C Ss, potremo dire qualcosa

74
00:05:08,070 --> 00:05:11,020
Tutte le migliori divs usano contenitori generici.

75
00:05:11,190 --> 00:05:12,510
Uno è nero è in linea