--- title: Compréhension des fondements des CSS slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension tags: - CSS - Codage - Commentaires - Débutant - Evaluation - Règles - Style - Syntaxe - Sélecteurs - modèle de boîte translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension ---
Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.
Prérequis : | Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module. |
---|---|
Objectif : | Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS. |
Pour demarrer cet exercice, vous devez :
Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img>
sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style>
dans l'élément head
du document.
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 :
style.css
.<link>
.Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :
Nouveaux jeux de règles à écrire :
em
.<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.<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.<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.<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.Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px;
pour l'élément <html>
— cela signifie que pour tous les enfants de <html>
, un em
vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size
différent placés entre eux et <html>
dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).
Autres choses à prendre en considération :
.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.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 !
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}