Propriétés css et Douglas le Robot JavaScript - nuls

Les propriétés CSS sont ce qui change les caractéristiques des éléments. La belle couleur des yeux de Douglas le JavaScript Robot, la taille de son corps et de ses bras, la rondeur des coins de sa tête, et la position de ses différentes parties sont toutes déterminées par les valeurs des propriétés.

Pour commencer, ouvrez votre navigateur Web et connectez-vous au tableau de bord public. Ensuite, suivez ces étapes:

1. Trouvez le violon appelé Chapitre 6: Style du robot - Commencez et cliquez sur le titre pour l'ouvrir.

   Vous pouvez également accéder directement à l'application Robot.

   Vous voyez un écran avec du HTML dans le panneau HTML et du CSS dans le panneau CSS.

2. Cliquez sur Fork dans le menu supérieur pour faire une copie du violon dans votre propre compte JSFiddle.

Apportez quelques modifications à l'apparence de Douglas en modifiant les valeurs de certaines propriétés CSS différentes:

1. Trouvez la règle CSS pour l'élément p.

   C'est actuellement la deuxième règle dans le volet CSS.

2. Modifiez la valeur de la propriété font-size à 2. 5em.

   La règle complète devrait maintenant ressembler à ceci:

   p {font-size: 2. 5em;}
   

   Il existe plusieurs façons de spécifier les tailles de texte. Les moyens les plus couramment utilisés sont l'utilisation de pixels (px), de pourcentage (%) ou d'ems (em). Lorsque vous utilisez pour cent ou ems, la taille de police de l'élément sélectionné est définie en fonction de la taille de la police de l'élément parent. Par exemple 2. 5em est deux fois et demie la taille de la police du parent de l'élément sélectionné.

3. Cliquez sur le bouton Exécuter pour voir la modification dans le volet Résultats.

   

   Douglas avec un message audacieux.

4. Trouvez la règle CSS pour l'élément body.

5. Modifiez la valeur de l'élément body en faisant attention à l'utilisation de guillemets:

   "Comic Sans MS", cursive, sans-serif
   

   La règle CSS complète devrait maintenant ressembler à ceci: < body {font famille: "Comic Sans MS", cursive, sans-serif;}

   Cliquez sur le bouton Run pour voir les résultats.
   

6. Douglas a maintenant des lettres intéressantes sur sa chemise.

   Douglas, maintenant avec des lettres amusantes!

   

   Ensuite, changez la couleur des yeux de Douglas pour qu'elle corresponde à la couleur de vos yeux!

   Trouvez la règle CSS qui contient la couleur des yeux de Douglas.

7. Il ressemble à ceci:

   . eye {background-color: bleu; largeur: 20%; hauteur: 20%; border-radius: 50%;}

   Change la valeur de la propriété background-color en fonction de la couleur de vos yeux.
   

8. Par exemple, si vos yeux sont bruns, vous devriez les changer comme suit:

   couleur de fond: marron;

   Cliquez sur le bouton Exécuter pour voir les résultats.
   

9. La couleur des yeux de Douglas lorsque vous utilisez le mot brun ne semble pas très brune, et la couleur qui est utilisée lorsque vous essayez de rendre les yeux de Douglas verts n'est pas une couleur que les yeux de tous sont susceptibles d'être.Pour obtenir une couleur plus précise, vous pouvez utiliser un autre nom de couleur CSS ou créer votre propre couleur personnalisée en utilisant la notation hexadécimale.