Bases de css et Douglas le Robot JavaScript - nuls

Dans ce projet, vous modifiez et ajoutez des styles à un robot HTML nommé Douglas. Douglas a été livré de l'usine de robot ce matin. Ses compétences JavaScript sont exceptionnelles; il n'a pas besoin de beaucoup de maintenance (juste une nouvelle variable à jouer de temps en temps); et il raconte de bonnes blagues!

Le seul problème, c'est que ses looks sont un peu ennuyeux! Bien sûr, il a de beaux yeux bleus, et son "I <3>

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.

Vous êtes maintenant prêt à donner du style à Douglas!

Jetez un coup d'œil aux trois premières lignes du volet CSS JavaScript Robot.

body {font-family: Arial;}

Ces trois lignes forment une règle CSS . Une règle CSS se compose de deux composants principaux:

• Sélecteur: Le sélecteur indique l'élément ou les éléments auxquels s'applique la règle CSS. Dans cet exemple, le sélecteur est le corps.

• Bloc de déclaration: Le bloc de déclaration contient une ou plusieurs déclarations CSS qui indiquent comment styliser l'élément ou les éléments sélectionnés. Dans cet exemple, vous n'avez qu'une seule déclaration, font-family: Arial;.

Sélecteurs CSS

Le sélecteur est la partie de la règle CSS qui précède le {. Les sélecteurs CSS indiquent au navigateur Web les éléments HTML auxquels un style doit s'appliquer.

Lorsque vous sélectionnez un élément auquel appliquer un style, il s'applique également à chaque élément de l'élément sélectionné.

Les sélecteurs CSS proposent différentes méthodes de sélection d'éléments. Regardez trois d'entre eux en travaillant avec Douglas le Robot JavaScript:

• Sélecteurs d'éléments: Jetez un oeil aux deux premières règles du panneau CSS du robot JavaScript:

  body {font-family: Arial;} p {font-size: 1em;}
  

  Ce sont deux exemples de sélecteurs d'éléments. Les sélecteurs d'élément sélectionnent les éléments HTML en utilisant le nom de l'élément. Pour utiliser un sélecteur d'élément, tapez simplement le nom de l'élément que vous voulez sélectionner. Dans ces cas, vous sélectionnez l'élément body (qui utilise et tags) et l'élément p (qui utilise les balises

  et

  ).

• Sélecteurs de classes: Jetez un coup d'œil à la troisième règle CSS du volet CSS Robot JavaScript:

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

  Le sélecteur de classe commence par un point (.), suivi de la valeur d'un attribut HTML nommé class. Dans ce cas, vous sélectionnez tous les éléments qui ont class = "eye". Si vous regardez dans le volet HTML, vous pouvez voir qu'il y a deux éléments avec class = "eye". Ils sont utilisés pour faire les deux yeux de Douglas.

  Les sélecteurs de classe sont idéaux pour les moments où vous devez appliquer le même style à plusieurs éléments. Dans ce cas, le robot a deux yeux, et les deux yeux ont plusieurs choses en commun (ils sont tous les deux bleus et de la même taille, par exemple).

• Sélecteurs d'ID: Les sélecteurs d'ID commencent par un symbole de hachage (#) et sélectionnent les éléments en fonction de la valeur de l'attribut ID de l'élément. Par exemple, l'œil gauche et l'œil droit de Douglas ont des attributs ID distincts:

  #righteye {position: absolute; à gauche: 20%; en haut: 20%;} #lefteye {position: absolute; gauche: 60%; top: 20%;}
  

  Les sélecteurs d'ID sont utiles lorsque vous devez sélectionner un seul élément dans un document HTML.

  Chaque attribut ID doit être unique dans un document.

  Si vous regardez dans le volet HTML, vous pouvez voir que les yeux gauche et droit de Douglas, en plus des deux attributs de classe, ont également des attributs d'ID uniques. Ces attributs ont été ajoutés afin que vous puissiez positionner les yeux individuellement sur le visage de Douglas.

Déclarations CSS

Les déclarations CSS vont dans les blocs de déclaration suivant les sélecteurs CSS. Les déclarations sont constituées de deux parties:

• Propriété: La partie propriété d'une déclaration indique ce qui doit être modifié. Par exemple, vous pouvez modifier la couleur, la largeur ou la position d'un élément. La propriété doit être suivie d'un deux-points (:).

• Valeur: La valeur indique comment la propriété doit être modifiée.

Chaque déclaration doit se terminer par un point-virgule (;). Vous pouvez avoir autant de déclarations dans un bloc de déclaration que nécessaire pour effectuer le travail.

Le bloc de déclaration des éléments avec la classe eye, par exemple, contient quatre déclarations:

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