Compréhension des fondements des CSS

Pour demarrer cet exercice, vous devez :

• Récupérer et enregistrer le fichier HTML de l'exercice ainsi que le fichier image associé dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.
• Enregistrez le fichier texte des ressources de la CSS — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.

Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.

Construction de base :

• Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme style.css.
• Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <link>.
• Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.
• Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

• Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.

• Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que :

  • entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).
  • l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
  • le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
  • l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).

• Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.

Nouveaux jeux de règles à écrire :

• Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en em.
• La marge par défaut appliquée aux éléments <h2> et <p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.
• Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <article>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <article> à 120px, mais exprimez‑la en em. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.
• Écrivez un jeu de règles qui donne à <h2> une taille de police effective de 20px (mais exprimée en em) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
• Écrivez un jeu de règles qui donne à <p> dans le pied de page une taille de police effective de 15px (mais exprimée en em) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
• Comme dernière petite touche, donnez au paragraphe à l'intérieur de <article> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <h2> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.

Autres choses à prendre en considération :

• Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.
• Vous devriez mettre .card en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.

• Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.
• Quand vous calculez le nombre de pixels correspondant à la valeur em dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<html>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de em, au moins dans un cas simple comme celui-ci.

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur le fil de discussion à propos de cet exercise ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

page(Doc) not found /fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS