TD : Initiation aux feuilles de style CSS Mise en forme et feuilles de style externe

Dimension: px

Commencer à balayer dès la page:

Download "TD : Initiation aux feuilles de style CSS Mise en forme et feuilles de style externe"

Michele Lucille Trudeau
il y a 7 ans
Total affichages :

1 OBJECTIFS : Comprendre la nécessité de définir des styles Appliquer sur la mise en page d un site d informations 1 LE PROBLEME A RESOUDRE On voudrait arriver au résultat suivant : TD : Initiation aux feuilles de style CSS Mise en forme et feuilles de style externe 1. Commencer par charger les fichiers nécessaires fournis pas l'enseignant au format ZIP. 2. Décompresser les fichiers du fichier ZIP dans un nouveau dossier de votre choix 3. Ouvrez le document <exemple.html>, d'une part avec Scite et d'autre part avec le navigateur Firefox. Vous devez obtenir le résultat ci-dessous. Le document précédent n'est pas mis en page et les images sont mal placées Code HTML de la page Affichage actuel sans mise en page - 1 / 5 -

Décompresser les fichiers du fichier ZIP dans un nouveau dossier de votre choix 3. Ouvrez le document <exemple.

2 2 LES ETAPES Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin Repérer les styles existants et différents dans la page Définir les règles de style (police, couleur, taille) Créer une feuille de style externe Etape 1 : Repérage des styles de la page Combien pouvez-vous repérer de styles différents dans la page? Aidez-vous de l'image ci-contre. Un style correspond à un type de police, une couleur, une taille de caractère, etc. Nom du Style ou Balise Règles de style à appliquer (taille, couleur, gras, italique, etc.) - 2 / 5 -

page Combien pouvez-vous repérer de styles différents dans la page? Aidez-vous de l'image ci-contre.

3 Etape 2 : Modification des styles de la page Dans les phases suivantes, il s'agit de modifier le style de la page HTML en ajoutant des instructions permettant de définit la mise en forme des balises HTML. Ne recopiez pas nécessairement à chaque fois le texte, utilisez le copier coller!!! Code à insérer dans le fichier HTML Vos remarques 1. Phase 1 On peut remarquer que toutes les polices de caractères sont de type arial On modifie donc le style de la balise BODY, valable pour tout le document // AJOUTER DANS LA PARTIE HEAD LE CODE SUIVANT <style type="text/css"> </style> 2. Phase 2 On peut remarquer que les titres h1, h2, h3 sont en bleu. Compléter la balise <style> de la façon suivante. <style type="text/css"> h1, h2, h3 { </style> 3. Phase 3 On peut remarquer que les textes des différentes balises sont écrits avec des tailles de caractères différentes Code à ajouter dans la balise <style> h1 { font-size: 20px; h2 { font-size: 14px; h3 { p { 4. Phase 4 On peut remarquer que au sein de certaines lignes, le texte est écrit différemment, On va alors utiliser un nouveau style spécial (ici commentaires et lire_la_suite) ATTENTION : FAIRE PRECEDER LE NOM DU STYLE PAR UN POINT. Ex :.commentaires Code à ajouter dans la balise <style> Code à modifier dans la page HTML :.commentaires { font-size: 9px; color: #999999;.lire_la_suite { font-size: 11px; font-weight: bold; <h2 class="commentaires">zigonet.com - il y a 1 heure 27 <h3>un euro, le prix à payer pour la rupture?le Post <span class="commentaires">mardi 7 octobre, 19h10</span></h3> <span class="lire_la_suite">lire la suite </span></p> - 3 / 5 -

Phase 1 On peut remarquer que toutes les polices de caractères sont de type arial On modifie donc le style de la balise BODY, valable pour tout le document // AJOUTER DANS LA PARTIE HEAD LE CODE

4 Etape 3 : L utilisation d une feuille de style externe RAPPEL : Il existe 3 principales façons de définir des feuilles de style : - dans la partie BODY de la page HTML : DECONSEILLE - dans la partie HEADER de la page HTML : POSSIBLE mais ne s applique qu à une seule page HTML - dans un fichier externe CSS : RECOMMANDE parce que cela permet de réutiliser plusieurs fois la même feuille de style pour différentes pages HTML 5. Exemple à tester Créer une page HTML nommée <exemple1.html> avec le code de la colonne de gauche Créer une page nommée < monstyle.css > avec le code de la colonne de gauche Sauvegardez les deux fichiers DANS LE MEME DOSSIER. Tester le résultat en lançant le fichier <exemple.html> avec Firefox Contenu de la page HMTL à créer <exemple1.html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <link rel="stylesheet" type="text/css" href="monstyle.css" /> <title>exemple</title> </head> <body> <p>insolite<br> <img class="imageserpent" alt="serpent" src="serpent.jpg"> <h1>un python tente de dévorer une femme tête la première</h1> <h2 class="commentaires">zigonet.com - il y a 1 heure 27 <p>uhldingen, Allemagne - La directrice d'un zoo allemand, attaquée par un python de près de quatre mètres, a dû être secourue... Lire la suite»</p> <h1>crise financière: encore des solutions Made in Japan</h1> <h2 class="commentaires">le Post - il y a 1 heure 31 <p>la récession est annoncée et il va être de plus en plus difficile de vivre comme avant... Il faut mieux se préparer à faire quelques économies. <span class="lire_la_suite">lire la suite </span></p> <h3>une élève intoxique ses professeurs avec des gâteaux au cannabis <span class="commentaires">le Post - il y a 1 heure 31 minutes</span></h3> <h3>un euro, le prix à payer pour la rupture?le Post <span class="commentaires">mardi 7 octobre, 19h10</span></h3> <h3>dossiers</h3> <h4>animaux insolites</h4> <img class="imageours" alt="ours" src="ours.jpg"> <p>toute l'actualité insolite des animaux sauvages et de compagnie</p> <h5>tous les dossiers Insolite»</h5> <br> <img class="imagestendhal" alt="stendhal" src="logostendhal.jpg"> </body> </html> Contenu de la feuille de style : "monstyle.css" h1, h2, h3 { h1 { font-size: 20px; h2 { font-size: 14px; h3 { p {.commentaires { font-size: 9px; color: #999999; list-style-image: url();.lire_la_suite { font-size: 11px; font-weight: bold;.imageserpent { width: 160px; height: 106px;.imageOurs { width: 70px; height: 50px;.imageStendhal { width: 100px; CONSEIL Pour travailler confortablement avec des feuilles de style externes, vous devez donc : Ouvrir dans votre éditeur (Scite) la page HTML que vous souhaitez modifier Ouvrir dans votre éditeur (Scite) la feuille CSS appelée par votre page HTML Modifier progressivement avec Scite la feuille CSS puis consulter dans le navigateur (Firefox) le résultat affiché de la page HTML (modifiez les tailles, les couleurs, etc.) - 4 / 5 -

pour différentes pages HTML 5. Exemple à tester Créer une page HTML nommée <exemple1.html> avec le code de la colonne de gauche Créer une page nommée < monstyle.

5 3 POUR CONNAITRE LES PRINCIPALES POSSIBILITES DE MISE EN FORME CSS Consulter le tutoriel : et en particulier les leçons suivantes Leçon 3 : Les couleurs et les arrières-plans Apprendre à appliquer des couleurs et couleurs de fonds dans son site Web et comment utiliser des images d'arrière-plan. Leçon 4 : Les polices Dans cette leçon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS. Leçon 5 : Le texte Cette leçon introduit les possibilités étonnantes de CSS pour ajouter une présentation au texte. Leçon 6 : Les liens Comment ajouter des effets plaisants et utiles aux liens et se servir des pseudo-classes. Leçon 7 : L'identification et le regroupement d'éléments (class et id) Une approche sur la façon d'utiliser les attributs class et id pour définir les propriétés des éléments sélectionnés. 4 LE POSITIONNEMENT AVEC DES BLOCS (OU BOITES) Deus types de blocs sont possibles : - les blocs DIV correspondent à des zones indépendantes qui peuvent être positionnées les unes par rapport aux autres dans la page - les sous-blocs SPAN permettent de définir de façon plus précise le style de fragments de texte (par exemple sur une même ligne) Consulter le tutoriel : et en particulier les leçons suivantes Leçon 8 : Le regroupement d'éléments (span et div) Une approche de l'utilisation des éléments span et div, et le rôle central de ces deux éléments HTML pour CSS. Leçon 9 : Le modèle des boîtes Le modèle des boîtes dans CSS décrit les boîtes générées pour les éléments HTML. Leçon 10 : Le modèle des boîtes : margin & padding Changer la présentation des éléments avec les propriétés margin et padding. Leçon 11 : Le modèle des boîtes : les bordures Apprendre les options illimitées de l'utilisation de bordures dans ses pages avec CSS. Leçon 12 : Le modèle des boîtes : la hauteur et la largeur Dans cette leçon, nous apprendrons comment définir aisément la hauteur et la largeur d'un élément. Leçon 13 : Les éléments flottants (les flottants) Un élément peut flotter à droite ou à gauche avec la propriété float. Leçon 14 : Le positionnement des éléments Le positionnement CSS permet de placer un élément dans la page exactement où l'on veut. Leçon 15 : Une couche sur une couche avec z-index (les couches) Cette leçon nous apprendra comment faire se recouvrir des éléments différents avec la propriété z-index. Leçon 16 : Les standards du Web et la validation La dernière leçon traite des standards du W3C et de la façon de vérifier l'exactitude de son code CSS. - 5 / 5 -

des images d'arrière-plan. Leçon 4 : Les polices Dans cette leçon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS.

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles