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.
Donc, nous allons commencer avec les antécédents, comme vous pouvez le voir, j'ai un petit exemple ici.
Voici donc son résultat final.
Notez que nous avons un fond gris sur le corps.
Venant d'ici et puis nous avons un fond bleu sur la div qui vient d'ici.
Et puis nous avons également du texte blanc sur le paragraphe.
Alors allons-y et essayez ceci en utilisant la page About Me avec laquelle nous avons travaillé.
Et nous allons aller de l'avant et changer les hobbies h avant et lui donner une couleur de fond.
Donnez-lui une couleur orange.
Encore une fois, nous voulons choisir cet âge de quatre ans, donc nous le type de quatre ans.
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.
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.
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.
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.
C'est donc la propriété d'arrière-plan qui est utilisée pour changer la couleur de quelque chose.
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.
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.
Alors allons trouver du bois, trouvons une image comme celle-ci ici.
Alors copions juste cette image.
Vous jettez dedans nous allons définir cela comme arrière-plan.
Donc, sur notre corps, je vais juste dire l'arrière-plan Earl et en ce que vous êtes Ellett, je viens de copier.
Donc ceci fonctionnera avec n'importe quelle image.
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.
Si nous revenons là-dessus, ce n'est pas près d'être assez grand pour couvrir tout notre corps ici.
Donc, ce qui est arrivé, c'est qu'il est serré.
Vous pouvez voir que vous savez qu'il est intitulé carrelage horizontalement et verticalement.
Donc, si nous ne voulons pas cela et parfois vous faites, mais la plupart du temps, il ne semble pas très bon.
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.
Et si nous avons mis cela pour ne pas répéter et sauver.
Maintenant, nous avons mis l'arrière-plan de son corps et il ne se répète pas.
Mais vous remarquerez également que ce n'est pas s'étendant pour couvrir le corps entier.
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.
Donc, comme vous pouvez le voir maintenant, il prend tout le corps.
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.
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.
D'ACCORD.
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.
La prochaine chose que je veux montrer est comment nous obtenons une frontière.
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.
Donc, une frontière et C S a trois parties différentes.
Il ya le avec la couleur et le style.
Commençons par donner une couleur de bordure à chacun.
Il ressemble juste à cette couleur de frontière et cette frontière.
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.
Donc la prochaine chose que nous devons faire est de le donner.
Donc, la frontière avec elle va juste lui donner un nombre en pixels.
Faisons cinq pixels cinq x rafraîchir et nous manquons encore une chose qui est le style.
Donc, vous verrez que rien de tout cela ne fonctionne à moins que nous ayons les trois ensemble.
Donc, le style de la frontière il ya quelques options différentes.
Nous pouvons dire solides.
J'ai pointillé une bordure pointillée.
Il y en a d'autres.
La plupart du temps ce que vous voyez est juste solide si solide bordure cinq pixels violet.
Et nous obtenons une frontière autour de tous les H.
Il y a de bons raccourcis et des taxes que nous pouvons utiliser.
Donc parce que nous avons souvent mis tous les trois à la fois il ya la syntaxe équivalente qui est juste appelé frontière.
Et nous le côlon droit de frontière nous lui donnons avec 5 pixels le style solide et la couleur pourpre.
Donc je peux vraiment commenter ces sorties et vous verrez que rien ne change.
C'est identique.
Alors jouons la pièce un peu.
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.
Donc, vous savez habituellement que je n'ai pas vu cela.
Je n'ai pas vu cela depuis les sites Web dans les années 90 en utilisant tous les styles de temps différents.
Habituellement, tout ce que vous voyez est un joli fin d'un ou deux pixels frontière solide.
D'ACCORD.
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.