Redimensionnement des éléments avec CSS et Douglas le Robot JavaScript - mannequins

Chaque élément d'un document HTML est un rectangle. Même si un élément ressemble à un cercle (comme les yeux de Douglas), il est en fait traité comme un rectangle entourant le cercle. Parce que tout est un rectangle, vous pouvez modifier la taille des éléments avec CSS en ajustant leur largeur et leur hauteur.

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

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.
Cliquez sur Fork dans le menu supérieur pour faire une copie du violon dans votre propre compte JSFiddle.

Lorsque vous mesurez la largeur et la hauteur des objets dans le monde réel, vous utilisez des unités de mesure telles que les pouces, les centimètres ou les mètres. Lorsque vous mesurez des choses dans le monde CSS, vous avez plusieurs unités de mesure différentes. Ceux-ci incluent px (pixels) et% (percent):

Pixels: Le pixel est le plus petit point pouvant être affiché dans votre navigateur Web. Lorsque vous spécifiez des largeurs et des hauteurs à l'aide de pixels, vous indiquez au navigateur exactement le nombre de pixels que doit contenir un élément. Le problème avec l'utilisation des pixels pour les mesures est qu'il affiche toujours les choses de la même taille - même si la fenêtre du navigateur de l'utilisateur est très grande ou très petite.
Pourcentage: Lorsque vous spécifiez des largeurs et hauteurs avec pourcentage, vous indiquez au navigateur de faire en sorte que l'élément ait un certain pourcentage de la taille du parent de l'élément.

Vous avez spécifié toutes les mesures de Douglas en utilisant le pourcentage. Ceci est bénéfique car cela signifie que peu importe si vous regardez Douglas sur un téléphone mobile ou sur le Jumbotron à Times Square, sa taille s'adaptera à l'écran. Pour voir la magie du dimensionnement relatif en action, faites glisser les bordures du volet dans JSFiddle pour agrandir ou réduire le volet Résultat. Remarquez comment Douglas change de taille avec la taille de la fenêtre.

Vous avez peut-être entendu le terme responsive design . La conception adaptative vise à créer un contenu Web souple et répondant à la taille de l'écran de l'utilisateur. La façon dont vous avez spécifié la taille de Douglas est un exemple de conception réactive.

Apportez quelques modifications à certaines parties de Douglas:

Trouvez la règle CSS pour la classe des yeux.
Changez la largeur à 30% et la hauteur à 30%.

Vous remarquerez que les yeux de Douglas s'agrandissent. Mais ils ne sont plus centrés sur son visage, comme montré ici!

Les grands yeux de Douglas sont décentrés.
Trouvez la règle CSS pour la classe arm.
```
. arm {background-color: #cacaca; position: absolue; en haut: 35%; largeur: 5%; hauteur: 40%;}
```
Le. La règle CSS arm contrôle la couleur et la taille des deux bras.

Le. règle de bras contrôle également la distance des bras du haut de la fenêtre.
Changez la largeur des bras à 3% puis cliquez sur Exécuter pour donner des bras maigres à Douglas.
Trouvez la règle CSS pour le bras gauche de Douglas.
Ajoutez des propriétés pour que la largeur soit supérieure à la hauteur.

Par exemple:
```
#leftarm {position: absolute; gauche: 70%; largeur: 27%; height: 5%;}
```
Cliquez sur run pour voir la modification. Douglas pointe maintenant l'écran, comme vous pouvez le voir ici.

Douglas montre du doigt!

Lors de la dernière étape, vous avez ajouté une largeur et une hauteur à une règle avec un sélecteur d'ID, même si l'élément sélectionné avait déjà une largeur et une hauteur appliquées à l'aide d'un sélecteur de classe.

Même s'il y avait déjà une largeur et une hauteur pour le bras gauche, le bras prenait la nouvelle largeur et la nouvelle hauteur de la règle avec le sélecteur d'ID.

Comprendre la cascade

Le bras gauche d'un robot ne peut avoir qu'une largeur et une hauteur. Alors, que se passe-t-il lorsque deux règles CSS différentes tentent de définir séparément la largeur et la hauteur du bras? Ce qui se passe, c'est que le navigateur détient une compétition entre les deux règles CSS.

Le navigateur examine des facteurs tels que la règle CSS qui a été définie en dernier et celle qui est la plus spécifique pour déterminer la largeur et la hauteur réellement utilisées.

Dans cette compétition en cascade, les attributs d'ID gagnent les attributs de classe parce qu'ils sont uniques à un seul élément et, par conséquent, plus spécifiques que les attributs de classe.

Positionner des éléments avec CSS

En plus de vous donner la possibilité de changer les couleurs et la façon dont les éléments apparaissent dans un navigateur, CSS vous permet également de changer l'affichage d'un élément à l'écran. Changer l'endroit où un élément apparaîtra s'appelle positionner un élément.

Modifiez la position de certaines parties de Douglas:

Trouvez la règle CSS qui contrôle l'œil droit de Douglas.
```
#righteye {position: absolue; à gauche: 20%; top: 20%;}
```
La première propriété, position, indique au navigateur comment interpréter les propriétés d'emplacement spécifiques (telles que haut et gauche). Lorsque vous utilisez le positionnement absolu, l'élément sélectionné (l'œil dans ce cas) peut être positionné n'importe où dans la tête sans que vous ayez à vous soucier de savoir si un autre élément de la tête va le repousser. Si deux éléments absolument positionnés sont positionnés au même endroit, ils se chevauchent simplement.

L'œil droit est placé à 20% en dessous (de la hauteur de la tête) du bord supérieur de l'élément de tête et 20% (de la largeur de la tête) à la droite du bord gauche de la tête. tête.
Déplacez l'œil droit vers la gauche et vers le haut en changeant la valeur des pourcentages gauche et supérieur à plus petit.

Par exemple:
```
#righteye {position: absolute; à gauche: 10%; top: 10%;}
```
Cliquez sur Exécuter pour voir les résultats, comme indiqué ici.

Douglas levant son œil droit.