Retour

Récupérez l'archive contenant les fichiers nécessaires aux exercices suivants et décompressez la dans votre espace de travail.

Exercices CSS

Un peu de déco

Découvrons quelques propriétés CSS qui permettent d'ajouter, pour le meilleur ou pour le pire, un peu de design aux documents HTML.

Nous nous baserons sur le fichier carnet-voyages.html. Nous construirons progressivement sa feuille de style jusqu'à obtenir ce résultat :

le résultat à obtenir le résultat à obtenir, zoom arrière
La page à obtenir à la fin de l'exercice
Les images utilisées sont contenues dans le dossier images et la feuilles de style devra être placée dans le dossier style.
  1. Chargez le document carnet-voyages.html et visualisez sa forme par défaut.
  2. les cotes à respecter pour construire le document
    quelques côtes
    En utilisant l'outil Editeur de styles créez une feuille de style définissant les marges intérieures et extérieures, dimensions, tailles de police, alignements de texte, etc. qui permet de retrouver (à peu près) la structure visuelle des documents présentés dans les images ci-dessus.

    Vous pouvez vous baser sur les informations présentes dans l'image ci-contre pour vous aidez à définir ces dimensions.

    L'élément <footer> est présentée dans la figure plus bas. Appliquez-lui la marge suivante :

    padding : 20px 0px 30px 0px;					

    Pour renforcer la visualisation de la structure de page finale, ajoutez temporairement des bordures fines en pointillés pour les éléments <header>, <footer>, <h1>, <article> et <section>. Nous les supprimerons par la suite. Vous n'oublierez pas de les supprimer à la fin du travail.

    Pour l'instant laissez les polices en noir.

    å
    Roue de secours.
    Réponse. Le fichier style4.css est une solution possible.
  3. Commençons par changer la police du document, je vous propose :
    	font-family :  Georgia, "Times New Roman", serif;				
    Si la police Georgia n'est pas disponible sur votre système, c'est la police Times New Roman qui sera utilisée et à défaut la version de police serif du navigateur.
    On peut imposer l'utilisation de la police Georgia. Pour cela, il faut la fournir systématiqment en la mettant à disposition à partir de la feuille CSS. Il faut pour cela disposer du fichier de définition de la police, généralement d'extension .ttf (pour true type font) puis indiquer dans la feuille de style que l'on veut utiliser cette police en lui attribuant un nom de famille de police. On procède en ajoutant les lignes suivantes dans le fichier CSS, en supposant le fichier de police georgia.ttf placé dans un sous-dossier fonts
    @font-face{
        font-family : "Georgia";
        src : url("fonts/georgia.ttf");
    }
    
  4. Allons-y pour la première image en arrière plan... Une telle image se définit par la propriété background-image dont la valeur est donnée par la fonction url dont le paramètre est l'url du fichier image à utiliser.
    1. Quel chemin permet depuis le répertoire style de désigner le fichier carte.png contenu dans le répertoire images ?
    2. Ajoutez donc pour l'élément <body> la déclaration
      background-image: url( chemin jusqu'au fichier carte.png );				
      et visualisez.
    3. Bon, pas terrible pour le moment... Différentes propriétés permettent de contrôler la manière dont est affichée cette image. On peut commencer par la positionner au centre et en haut de la page :
      background-position: center top;				
    4. Faites défiler la page, on constate que l'image de fond se répète. La propriété repeat permet de contrôler cette répétition. Essayez
      background-repeat: no-repeat;				
    5. L'image n'est plus répétée mais le bas de la page n'a plus d'image en arrière-plan puisqu'elle suit la page lorsqu'on la fait défiler. Il nous reste à contrer cela :
      background-attachment: fixed;					
      et à changer background-position à center center (ou simplement center). Faites défiler le texte pour essayer.
    6. Enfin, pour être certain que cette image de fond occupe la totalité de la page il faut modifier sa taille, en conservant le ratio :
      background-size: cover;					
      et redimensionner (hauteur/largeur étroite). Essayez les valeurs contain puis auto.
    å
    Roue de secours.
    Réponse. Voici ce que pourrait devenir le style pour l'élément <body>
    body  {
    	margin: 10px 1%;
    	
    	/* réponse Q4.*/
    	background-image: url("../images/carte.png");
    	background-position: center;
    	background-repeat:no-repeat;
    	background-attachment: fixed;	
    	background-size: cover;
    }
    
  5. Parcourez les documentations sur les propriétés découvertes dans la question précédente : background-image, background-position, background-repeat et background-attachment. Elles sont toutes accessibles à partir de la page cette page du MDN et analysez les exemples d'utilisation présentés dans la question précédente.
  6. Occupons nous maintenant de l'image dans la balise <h1>. Il s'agit de l'image du fichier boussole.jpg.
    1. Cette image est trop grande, en conservant le ratio adapter sa taille pour qu'elle occupe toute la hauteur de l'élément <h1>.
    2. Comme on le voit sur le modèle ci-dessus, on ne souhaite pas la répétition de l'image. Faites donc le nécessaire.
    3. On veut maintenant décaler cette image de 10px vers la droite. Modifiez sa position en conséquence.
    4. Il faut également régler le problème du chevauchement du texte sur l'image, ajoutez les définitions de marge nécessaires.
    5. Finissons avec la couleur d'arrière-plan de cet élément. Pour retrouver le visuel proposé, fixez sa couleur à blanc avec une composante alpha à 0.5.
    6. Étudiez la différence avec sur <h1> une couleur d'arrière-plan blanche et une valeur de la propriété opacity à 0.5.
    7. Vous pouvez maintenant supprimer les bordures autour de l'élément <h1>.
    å
    Roue de secours.
    Réponse. Voici ce que pourrait devenir le style pour l'élément <h1>
    h1 {
    	color: black;	
    
    	font-weight: bold;
    	font-size: 24px;
    	margin: 5px 0px;
    	padding: 5px;
    
    	/* réponse Q6. */
    	background-image: url("../images/boussole.jpg");
    	background-size: auto 100%;
    	background-repeat: no-repeat;
    	background-position: 10px 0px;
    
    	padding-left: 55px;
    
    	background-color: rgba(255,255,255,0.5);
    }
    
    
    h1 {
    	/* suppression de la bordure, ou supprimer la règle associée */	
    	border: none;	
    }
    
  7. Au tour de <section> maintenant. Supprimer les bordures que nous avons ajoutées autour de cet élément.
    1. L'image d'arrière-plan à utiliser est contenue dans le fichier bois.png.
    2. Fixez la valeur de la propriété background-repeat à no-repeat.
    3. Quelle est la valeur par défaut de la propriété background-size ? Celle-ci étire notre image. Nous souhaitons conserver sa hauteur initiale. Donnez à cette propriété un valeur telle que l'image d'arrière-plan occupe exactement la largeur de l'élément, sans modifier son ratio.
    4. L'image ne couvre plus tout l'arrière-plan de l'élément <section>, modifiez la valeur de background-repeat pour que l'image se répète verticalement autant de fois que nécessaire.
    5. Le texte est maintenant assez peu lisible sur cet arrière-plan sombre, changez la couleur du texte des éléments <article> à whitesmoke.
    6. C'est mieux, mais le texte ne se dégage pas encore toujours très bien. Il semble même baver un peu... Il est possible d'améliorer le contraste en ajoutant une ombre au texte. Essayez :
      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);					
      Evidemment vous n'échapperez pas à une petite visite de la documentation de la propriété text-shadow pour comprendre le sens des différents paramètres de la valeur ci-dessus. Allez-y...
    7. Poursuivons la mise en forme. Ajoutez l'une après l'autre les définitions de propriétés suivantes pour l'élément <section> :
      box-shadow: 0px 0px 20px 5px rgb(0, 0, 0);					
      et
      border-radius: 8px;
      Constatez le résultat et déduisez-en leur signification que vous vérifierez par un petit tour par la documentation.

      N'oubliez pas que vous pouvez activer/désactiver les propriétés dans l'outil inspecteur pour en observer les effets.

    å
    Roue de secours.
    Réponse. Voici ce que pourrait devenir le style pour les élémente <section> et <article> :
    section {
    	margin: auto;
    	padding: 0px;
    	width: 95%;
    
    	background-image: url("../images/bois.png");
    	background-repeat: repeat-y;
    	background-size: 100%;
    
    	box-shadow: 0px 0px 20px 5px rgb(0, 0, 0);
    	border-radius: 8px;
    }
    article {	
    	font-size: 15px;
    	/* fixe la taille de la marge extérieure dans les 4 directions */
    	margin: 30px;
    	/* fixe la taille de la marge intérieure dans les 4 directions */
    	padding: 10px 10px;
    	
    	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
    	color: whitesmoke;	
    }
    
    section {
    	/* suppression de la bordure, ou supprimer la règle associée */	
    	border: none;	
    }
    
  8. A vous de jouer maintenant avec l'élément <header>. Son image d'arrière-plan est définie dans le fichier boussole-header.png.

    On souhaite qu'elle occupe toute la largeur de l'élément. Si vous observez bien le modèle vous constaterez que le texte et l'élément possèdent une ombre. On veut décaler l'ombre de la boîte de 4px vers le bas et la droite.

    å
    Roue de secours.
    Réponse. Voici ce que pourrait devenir le style pour les élémente <header> :
    header {
    	padding: 30px 80px;
    	font-size: 60px;
    	margin-bottom: 30px;
    	/* l'image de fond */	
    	background-image: url("../images/boussole-header.png");
    	background-size: 100% auto;
    	/* couleur et centrage vertical du texte */
    	vertical-align: middle;
    	color: white;
    	/* les ombres du texte et de la boîte */
    	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    	box-shadow: 4px 4px 8px 5px rgba(0,0,0,0.4);	
    }
    
    header {
    	/* suppression de la bordure, ou supprimer la règle associée */	
    	border: none;	
    }
    
  9. Voici à quoi ressemble le bas du document :

    le footer à obtenir
    Le pied de page à reproduire.

    L'image d'arrière-plan à utiliser est définie dans le fichier vague-h100.png et sa hauteur doit être de 30px. Le halo autour du texte est simplement bleu.

    Faites le nécessaire en définissant le style de l'élément <footer>.

    å
    Roue de secours.
    Réponse. Voici ce que pourrait devenir le style pour les élémente <footer> :
    footer {
    	padding: 20px 0px 30px 0px;
    	text-align: center;
    	color: white;
    	font-size: 24px;
    	font-style: italic;	
    
    	background-image: url("vague-h100.png");
    	background-repeat: repeat-x;
    	background-size: auto 30px;
    	background-position: bottom;
    
    	text-shadow: 0px 0px 10px rgba(0, 0, 255, 1);
    }
    
  10. Si vous ne l'avez pas encore fait vérifiez la validité CSS3 de votre feuille de style.