1
00:00:00,350 --> 00:00:10,120
Dans cette leçon, nous allons couvrir deux nouvelles propriétés de fond que nous utilisons pour changer la couleur de fond ou l'image d'arrière-plan d'un élément et de la bordure.

2
00:00:10,260 --> 00:00:14,670
Donc, nous allons commencer avec les antécédents, comme vous pouvez le voir, j'ai un petit exemple ici.

3
00:00:14,670 --> 00:00:16,260
Voici donc son résultat final.

4
00:00:16,440 --> 00:00:19,890
Notez que nous avons un fond gris sur le corps.

5
00:00:20,010 --> 00:00:25,840
Venant d'ici et puis nous avons un fond bleu sur la div qui vient d'ici.

6
00:00:26,040 --> 00:00:29,490
Et puis nous avons également du texte blanc sur le paragraphe.

7
00:00:29,580 --> 00:00:35,040
Alors allons-y et essayez ceci en utilisant la page About Me avec laquelle nous avons travaillé.

8
00:00:35,220 --> 00:00:40,140
Et nous allons aller de l'avant et changer les hobbies h avant et lui donner une couleur de fond.

9
00:00:40,560 --> 00:00:42,460
Donnez-lui une couleur orange.

10
00:00:42,900 --> 00:00:47,840
Encore une fois, nous voulons choisir cet âge de quatre ans, donc nous le type de quatre ans.

11
00:00:48,540 --> 00:00:57,230
Et puis à l'intérieur des accolades vous allez dire de fond et nous allons faire un R G B et nous allons faire comme une couleur orangey.

12
00:00:57,260 --> 00:01:06,670
Donc, ils seront beaucoup de rouge un peu vert et le petit bleu et nous allons rafraîchir et nous obtenons cette belle couleur de corail.

13
00:01:06,780 --> 00:01:15,490
Alors, laissez-nous donner l'arrière-plan, nous allons donner au corps un fond qui est quelque chose que vous voyez souvent sur un site Web où l'arrière-plan entier est une nouvelle couleur.

14
00:01:15,780 --> 00:01:31,290
Alors faisons quelque chose comme un arrière-plan et disons simplement que pour être rose pour l'instant et puis nous allons l'arrière-plan entier est rose.

15
00:01:31,290 --> 00:01:36,870
C'est donc la propriété d'arrière-plan qui est utilisée pour changer la couleur de quelque chose.

16
00:01:37,680 --> 00:01:44,820
Mais nous pouvons également utiliser la propriété d'arrière-plan pour changer l'arrière-plan pour être une image qui montrent également voir assez souvent.

17
00:01:45,150 --> 00:01:55,760
Donc, la façon dont il fonctionne, nous spécifions encore arrière-plan, mais au lieu d'une couleur, nous vous disons Arel et puis entre parenthèses, nous lui donnons un u r l où l'image est située.

18
00:01:56,190 --> 00:02:04,920
Alors allons trouver du bois, trouvons une image comme celle-ci ici.

19
00:02:05,350 --> 00:02:06,980
Alors copions juste cette image.

20
00:02:07,200 --> 00:02:11,560
Vous jettez dedans nous allons définir cela comme arrière-plan.

21
00:02:12,390 --> 00:02:21,900
Donc, sur notre corps, je vais juste dire l'arrière-plan Earl et en ce que vous êtes Ellett, je viens de copier.

22
00:02:21,900 --> 00:02:23,770
Donc ceci fonctionnera avec n'importe quelle image.

23
00:02:24,050 --> 00:02:35,220
Et si nous rafraîchissons grand nous voyons que notre fond a été fixé, mais vous remarquerez une petite chose qui est que notre image n'est pas vraiment assez grand.

24
00:02:35,220 --> 00:02:41,760
Si nous revenons là-dessus, ce n'est pas près d'être assez grand pour couvrir tout notre corps ici.

25
00:02:41,850 --> 00:02:44,100
Donc, ce qui est arrivé, c'est qu'il est serré.

26
00:02:44,280 --> 00:02:48,900
Vous pouvez voir que vous savez qu'il est intitulé carrelage horizontalement et verticalement.

27
00:02:49,320 --> 00:02:53,870
Donc, si nous ne voulons pas cela et parfois vous faites, mais la plupart du temps, il ne semble pas très bon.

28
00:02:54,180 --> 00:03:03,220
Donc, si nous ne voulons pas qu'il y ait une autre propriété que nous pouvons fixer et que la répétition de fond.

29
00:03:04,380 --> 00:03:11,530
Et si nous avons mis cela pour ne pas répéter et sauver.

30
00:03:12,300 --> 00:03:15,720
Maintenant, nous avons mis l'arrière-plan de son corps et il ne se répète pas.

31
00:03:16,260 --> 00:03:21,190
Mais vous remarquerez également que ce n'est pas s'étendant pour couvrir le corps entier.

32
00:03:21,240 --> 00:03:38,230
Donc, si nous voulions que cela s'étende sur l'ensemble de l'écran ou sur tout le corps, il y a une autre propriété que nous pouvons définir, qui est la taille d'arrière-plan et nous pouvons définir cela pour couvrir.

33
00:03:39,240 --> 00:03:42,890
Donc, comme vous pouvez le voir maintenant, il prend tout le corps.

34
00:03:43,430 --> 00:04:01,680
Bien sûr, ce n'est pas la meilleure image pour cela parce que c'est un peu flou, c'est un peu pixélisé, mais quand vous faites une image de fond, vous voulez généralement vous assurer que vous avez quelque chose qui est soit grande et haute résolution ou quelque chose qui a une image plus petite que Peut être répétée à la différence de celle-ci.

35
00:04:01,740 --> 00:04:08,870
Ce n'est pas vous savez symétrique sur les deux axes donc si nous le répétons il est très clair qu'il ya des divisions et de carrelage qui se passe.

36
00:04:09,300 --> 00:04:09,600
D'ACCORD.

37
00:04:09,600 --> 00:04:16,210
C'est donc l'arrière-plan et l'utilisation de la couleur et de l'arrière-plan pour définir une image d'arrière-plan.

38
00:04:16,350 --> 00:04:19,460
La prochaine chose que je veux montrer est comment nous obtenons une frontière.

39
00:04:19,770 --> 00:04:33,960
Donc, je suis en fait va venir à ce parce que c'est un peu distrayant et nous allons revenir à l'arrière-plan que rose et allons-y et ajouter des frontières à toutes les h.

40
00:04:34,470 --> 00:04:38,560
Donc, une frontière et C S a trois parties différentes.

41
00:04:38,700 --> 00:04:43,630
Il ya le avec la couleur et le style.

42
00:04:45,090 --> 00:04:49,310
Commençons par donner une couleur de bordure à chacun.

43
00:04:49,320 --> 00:04:54,660
Il ressemble juste à cette couleur de frontière et cette frontière.

44
00:04:54,780 --> 00:05:03,110
Allons simplement avec le pourpre et si nous rafraîchissons nous ne voyons pas réellement n'importe quoi et c'est parce que actuellement notre frontière n'a pas de largeur.

45
00:05:03,150 --> 00:05:05,780
Donc la prochaine chose que nous devons faire est de le donner.

46
00:05:06,120 --> 00:05:10,020
Donc, la frontière avec elle va juste lui donner un nombre en pixels.

47
00:05:10,230 --> 00:05:20,270
Faisons cinq pixels cinq x rafraîchir et nous manquons encore une chose qui est le style.

48
00:05:21,300 --> 00:05:25,920
Donc, vous verrez que rien de tout cela ne fonctionne à moins que nous ayons les trois ensemble.

49
00:05:25,920 --> 00:05:29,060
Donc, le style de la frontière il ya quelques options différentes.

50
00:05:29,100 --> 00:05:30,810
Nous pouvons dire solides.

51
00:05:31,040 --> 00:05:33,160
J'ai pointillé une bordure pointillée.

52
00:05:33,390 --> 00:05:34,470
Il y en a d'autres.

53
00:05:34,470 --> 00:05:41,600
La plupart du temps ce que vous voyez est juste solide si solide bordure cinq pixels violet.

54
00:05:41,820 --> 00:05:46,490
Et nous obtenons une frontière autour de tous les H.

55
00:05:47,100 --> 00:05:50,230
Il y a de bons raccourcis et des taxes que nous pouvons utiliser.

56
00:05:50,250 --> 00:05:57,940
Donc parce que nous avons souvent mis tous les trois à la fois il ya la syntaxe équivalente qui est juste appelé frontière.

57
00:05:58,560 --> 00:06:08,040
Et nous le côlon droit de frontière nous lui donnons avec 5 pixels le style solide et la couleur pourpre.

58
00:06:08,040 --> 00:06:11,760
Donc je peux vraiment commenter ces sorties et vous verrez que rien ne change.

59
00:06:11,760 --> 00:06:13,350
C'est identique.

60
00:06:13,350 --> 00:06:15,410
Alors jouons la pièce un peu.

61
00:06:15,450 --> 00:06:32,690
Allons-y avec un Fash de 8 points de bord Fash qui est nous allons juste prendre notre R.G. B de là-bas et nous avons ce bel effet de bordure en pointillés.

62
00:06:32,760 --> 00:06:35,050
Donc, vous savez habituellement que je n'ai pas vu cela.

63
00:06:35,310 --> 00:06:40,380
Je n'ai pas vu cela depuis les sites Web dans les années 90 en utilisant tous les styles de temps différents.

64
00:06:40,380 --> 00:06:46,960
Habituellement, tout ce que vous voyez est un joli fin d'un ou deux pixels frontière solide.

65
00:06:47,530 --> 00:06:48,010
D'ACCORD.

66
00:06:48,120 --> 00:06:58,040
Donc, juste pour récapituler sur la frontière, nous pouvons définir les propriétés individuellement ou nous pouvons utiliser les raccourcis et la taxe et définir le avec le style et la couleur.