1
00:00:00,350 --> 00:00:06,000
In questa lezione verranno illustrati due nuovi background delle proprietà che utilizziamo per modificare il colore di

2
00:00:06,000 --> 00:00:10,120
sfondo o l'immagine di sfondo di un elemento e di un bordo.

3
00:00:10,260 --> 00:00:14,670
Quindi inizieremo con lo sfondo, come puoi vedere ho un piccolo esempio qui.

4
00:00:14,670 --> 00:00:16,260
Quindi ecco il suo risultato finale.

5
00:00:16,440 --> 00:00:19,890
Si noti che abbiamo uno sfondo grigio sul corpo.

6
00:00:20,010 --> 00:00:25,840
Venendo da qui e poi abbiamo uno sfondo blu sul div che sta venendo da qui.

7
00:00:26,040 --> 00:00:29,490
E poi abbiamo anche il testo bianco sul paragrafo.

8
00:00:29,580 --> 00:00:35,040
Andiamo avanti e proviamo usando la pagina About Me con cui abbiamo lavorato.

9
00:00:35,220 --> 00:00:40,140
Andiamo avanti e cambia i miei hobby h avanti e dargli un colore di sfondo.

10
00:00:40,560 --> 00:00:42,460
Diamogli un colore arancione.

11
00:00:42,900 --> 00:00:47,840
Quindi, di nuovo, vogliamo selezionare questa età, quindi digitiamo quattro anni.

12
00:00:48,540 --> 00:00:54,990
E poi all'interno delle parentesi graffe dirai sfondo e faremo un R G B

13
00:00:54,990 --> 00:00:57,230
e diventeremo di colore arancione.

14
00:00:57,260 --> 00:01:04,560
Quindi saranno un sacco di rossi un po 'verdi e il piccolo blu e rinfresciamo e

15
00:01:04,560 --> 00:01:06,670
otteniamo questo bel colore corallo.

16
00:01:06,780 --> 00:01:11,760
qualcosa che vedi spesso su un sito Web in cui l'intero sfondo è un nuovo colore.

17
00:01:12,120 --> 00:01:15,490
Dopodiché facciamo lo sfondo diamo al corpo uno sfondo che è

18
00:01:15,780 --> 00:01:16,830
Quindi facciamo

19
00:01:19,430 --> 00:01:28,590
qualcosa come lo sfondo e diciamo che per essere rosa per ora e poi andiamo tutto

20
00:01:28,860 --> 00:01:31,290
lo sfondo è rosa.

21
00:01:31,290 --> 00:01:36,870
Quindi questa è la proprietà di sfondo utilizzata per cambiare il colore di qualcosa.

22
00:01:37,680 --> 00:01:43,650
Ma possiamo anche usare la proprietà background per cambiare lo sfondo per essere un'immagine che mostra anche

23
00:01:43,650 --> 00:01:44,820
vedere piuttosto spesso.

24
00:01:45,150 --> 00:01:52,680
sfondo, ma invece di un colore ti diciamo Arel e poi tra parentesi ti diamo un dove si trova l'immagine.

25
00:01:52,950 --> 00:01:55,760
Quindi, come funziona, continuiamo a specificare lo

26
00:01:56,190 --> 00:02:04,920
Quindi andiamo a cercare un po 'di venatura del legno troveremo un'immagine come questa qui.

27
00:02:05,350 --> 00:02:06,980
Quindi, copia questa immagine.

28
00:02:07,200 --> 00:02:11,560
Inseriscilo, lo imposteremo come sfondo.

29
00:02:12,390 --> 00:02:21,900
Quindi sul nostro corpo dirò semplicemente che tu Earl e che tu sei Ellett che ho appena copiato.

30
00:02:21,900 --> 00:02:23,770
Quindi questo funzionerà con qualsiasi immagine.

31
00:02:24,050 --> 00:02:32,460
E se ci rinnoviamo alla grande, vediamo che il nostro background è stato impostato, ma noterete una piccola cosa che è che

32
00:02:32,460 --> 00:02:35,220
la nostra immagine non è abbastanza grande.

33
00:02:35,220 --> 00:02:41,760
Se torniamo ad esso non è vicino ad essere abbastanza grande da coprire tutto il nostro corpo qui.

34
00:02:41,850 --> 00:02:44,100
Quindi, quello che è successo è che è stato rafforzato.

35
00:02:44,280 --> 00:02:48,900
Puoi vedere che sai che viene intitolato piastrellato orizzontalmente e verticalmente.

36
00:02:49,320 --> 00:02:53,870
Quindi se non lo vogliamo e qualche volta lo fai ma la maggior parte delle volte non sembra molto bello.

37
00:02:54,180 --> 00:03:03,220
Quindi se non vogliamo che ci sia un'altra proprietà che possiamo impostare e che è una ripetizione in background.

38
00:03:04,380 --> 00:03:11,530
E se lo impostiamo come non ripetere e salvo.

39
00:03:12,300 --> 00:03:15,720
Ora abbiamo impostato lo sfondo del suo corpo e non si ripete.

40
00:03:16,260 --> 00:03:21,190
Ma noterai anche che non si estende per coprire l'intero corpo.

41
00:03:21,240 --> 00:03:27,690
Quindi, se volessimo farlo allungare su tutto lo schermo o su tutto

42
00:03:27,720 --> 00:03:38,230
il corpo, c'è un'altra proprietà che possiamo impostare che è la dimensione dello sfondo e possiamo impostarla per coprire.

43
00:03:39,240 --> 00:03:42,890
Quindi come puoi vedere ora occupa tutto il corpo.

44
00:03:43,430 --> 00:03:48,600
Ovviamente non è la migliore immagine per questo perché è un po 'sfocata è un

45
00:03:48,630 --> 00:03:54,690
po' pixellata ma quando fai un'immagine di sfondo di solito vuoi assicurarti di avere qualcosa che sia grande

46
00:03:54,840 --> 00:04:00,840
e ad alta risoluzione o qualcosa che abbia un'immagine più piccola che può essere ripetuto senza problemi a

47
00:04:00,840 --> 00:04:01,680
differenza di questo.

48
00:04:01,740 --> 00:04:07,430
su entrambi gli assi, quindi se lo ripetiamo è molto chiaro che ci sono divisioni e rivestimenti.

49
00:04:07,470 --> 00:04:08,870
Non lo sai simmetrico

50
00:04:09,300 --> 00:04:09,600
OK.

51
00:04:09,600 --> 00:04:16,210
Questo è lo sfondo e utilizza il colore di sfondo e lo sfondo per impostare un'immagine di sfondo.

52
00:04:16,350 --> 00:04:19,460
La prossima cosa che voglio mostrare è come ottenere un confine.

53
00:04:19,770 --> 00:04:24,660
Quindi, in effetti, mi verrebbe fuori perché è un po 'di distrazione

54
00:04:25,320 --> 00:04:27,170
e torniamo allo sfondo come

55
00:04:30,400 --> 00:04:33,960
rosa e andiamo ad aggiungere bordi a tutti quelli.

56
00:04:34,470 --> 00:04:38,560
Quindi un confine e C S ha tre parti differenti.

57
00:04:38,700 --> 00:04:43,630
C'è il colore e lo stile.

58
00:04:45,090 --> 00:04:49,310
Quindi iniziamo dando un colore di bordo a ciascuno di essi.

59
00:04:49,320 --> 00:04:54,660
Sembra proprio questo colore del bordo e quel bordo.

60
00:04:54,780 --> 00:05:01,140
Andiamo con il viola e se aggiorniamo non vediamo nulla, perché attualmente il nostro

61
00:05:01,140 --> 00:05:03,110
bordo non ha larghezza.

62
00:05:03,150 --> 00:05:05,780
Quindi la prossima cosa che dobbiamo fare è darlo via.

63
00:05:06,120 --> 00:05:10,020
Quindi confinando con esso gli verrà dato un numero in pixel.

64
00:05:10,230 --> 00:05:20,270
Facciamo cinque pixel cinque x aggiorna e ci manca ancora una cosa che è lo stile.

65
00:05:21,300 --> 00:05:25,920
Quindi vedrai che nessuno di questi funziona se non li abbiamo tutti e tre impostati.

66
00:05:25,920 --> 00:05:29,060
Quindi lo stile del bordo ci sono alcune opzioni differenti.

67
00:05:29,100 --> 00:05:30,810
Possiamo dire solido.

68
00:05:31,040 --> 00:05:33,160
Ho tratteggiato un bordo tratteggiato.

69
00:05:33,390 --> 00:05:34,470
Ce ne sono alcuni altri.

70
00:05:34,470 --> 00:05:41,600
La maggior parte delle volte quello che vedi è solo un bordo solido così solido cinque pixel viola.

71
00:05:41,820 --> 00:05:46,490
E otteniamo un confine attorno a tutti quelli H.

72
00:05:47,100 --> 00:05:50,230
C'è una bella scorciatoia e tasse che possiamo usare.

73
00:05:50,250 --> 00:05:57,080
Quindi, poiché spesso impostiamo tutti e tre questi elementi contemporaneamente, esiste la sintassi equivalente che viene chiamata

74
00:05:57,090 --> 00:05:57,940
semplicemente border.

75
00:05:58,560 --> 00:06:08,040
E a destra due punti del bordo lo diamo con 5 pixel lo stile solido e il colore viola.

76
00:06:08,040 --> 00:06:11,760
Quindi posso commentarli e vedrai che non cambierà nulla.

77
00:06:11,760 --> 00:06:13,350
È identico.

78
00:06:13,350 --> 00:06:15,410
Quindi giochiamo un po '.

79
00:06:15,450 --> 00:06:30,110
Andiamo con un Forder da 8 pixel che è solo prendere il nostro R. G. B da quaggiù e abbiamo questo bel

80
00:06:30,120 --> 00:06:32,690
effetto di bordo tratteggiato.

81
00:06:32,760 --> 00:06:35,050
Quindi sai che di solito non l'ho visto.

82
00:06:35,310 --> 00:06:40,380
Non l'ho visto dai siti web negli anni '90, usando sempre stili diversi.

83
00:06:40,380 --> 00:06:46,960
Di solito tutto ciò che vedi è un bel bordo sottile di uno o due pixel.

84
00:06:47,530 --> 00:06:48,010
OK.

85
00:06:48,120 --> 00:06:54,230
Quindi, per ricapitolare il confine, possiamo impostare le proprietà singolarmente oppure possiamo usare le scorciatoie

86
00:06:54,240 --> 00:06:58,040
e le tasse e impostare lo stile e il colore.

87
00:06:58,110 --> 00:06:58,900
Tutto in una volta