Introduction aux feuilles de style CSS

Dimension: px

Commencer à balayer dès la page:

Download "Introduction aux feuilles de style CSS"

Isaac Chrétien
il y a 6 ans
Total affichages :

1 Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr

2 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 1 CSS Cascaded Style Sheet (actuellement version 3) Objectif : Séparer la structuration du document de sa mise en page Faciliter la lecture et la mise au point d'un site complexe Offrir la même présentation quel que soit le navigateur utilisé Passer aisément de la conception sur papier à la réalisation informatique

3 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 2 CSS : 2 objectifs principaux Définir en un endroit unique la mise en forme de toutes les balises de même nom Par exemple, toutes les balises <H1> auront la même mise en forme Créer des nouveaux styles applicables à toutes sortes de balise différentes Toutes les balises utilisant le même style auront la même mise en forme

4 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 3 Personnaliser une balise préexistante : <body>, <H1>, <H2>, <p>, <table>? etc. Syntaxe : nombalise {attribut1:valeurattribut1; attribut2=valeurattribut2} Toutes les balises H1, H2 auront la même présentation Sans style Avec style

5 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 4 Créer un nouveau style applicable à toutes sortes de balise Déclaration du style.nomstyle {attribut:valeurattribut} Utilisation du style : Ajouter un attribut CLASS à la balise concernée <html> <head> <style type="text/css">.rougeetlarge{ color: red ; font-size: large; } </style> </head> <body> <H1 class=rougeetlarge> Chapitre 1 </H1> <H2 > Chapitre 1.1 </H2> <H3 class=rougeetlarge> Chapitre 1.2 </H3> <H1 class=rougeetlarge> Chapitre 2 </H1> </body> </html> Toutes les balises ayant l'attribut class= rougeetlarge auront la même présentation

6 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 5 CSS : où placer les styles? 2 méthodes principales 1. Dans la partie <Header> Voir exemple page précédente (déconseillé) 2. Dans un fichier séparé suffixé en.css (appel placé dans le <Header>) <LINK rel=stylesheet type="text/css" href="style.css"> Fichier HTML <html> <head> <link rel="stylesheet" type="text/css" href="monstyle.css" /> <title>exemple</title> </head> <body> <h1>un python tente de dévorer une femme tête la première</h1> Fichier monstyle.css body { font-family: Arial,Helvetica,sans-serif; } h1, h2, h3 { color: #406666; }

7 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 6 Quelques attributs CSS de mise en forme color:#ff0000; : pour définir la couleur, en hexadécimal. color:red; : pour définir la couleur, en lettres et en anglais. background-color:#ffffff; : couleur de fond text-decoration:none; : pas de soulignement. font-family:arial; : nature de la police des liens. font-size:8pt; : taille de la police des liens. font-weight:bold; : caractère de la police (gras, italique...). letter-spacing:2pt; : espacement des lettres du lien. text-transform: uppercase; : pour des liens en majuscules. lowercase; : pour des liens en minuscules. Plan width:100px; : longueur height:10px; : hauteur Consulter la référence : Tutoriel OpenClassrooms

8 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 7 Exemple de positionnement de zone la balise DIV représente une zone de code HTML

9 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 8 Réutiliser les éléments communs Partage de règles communes de présentation fichier.css Niveau Structuration Fichier1.htm Fichier2.htm Fichier3.htm

10 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 9 Utilisation des sélecteurs Autre possibilité à connaître Permet d'affecter un style à UNE SEULE BALISE <p>le contenu du document HTML</p> <p id="menu"> <a href="index.html">home</a><br/> <a href="ex.html">exos</a><br/> </p> /*Sélecteur d identifiant*/ #menu{ position: fixed; top: 0px; } Peut être combiné avec class pour des effets avancés

11 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 10 En résumé N'utilisez dans la partie <body> que les balises HTML de base : h1, h2,.h6 Pour le texte : <div>, définit un bloc de texte <span>, définit un fragment de texte dans une phrase Éventuellement <p> <hr> (à eviter et remplaçable par div> Pour les listes <ul> <ol> <li> Pour les images <img> Pour des objets multimédias <object>, <audio>, <video> Pour tout le reste, utiliser les classes, les id dans les feuilles de style externes

12 Utilisation du site jsfiddle.net pour la mise au point des sites web (CSS) Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr

13 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 12 Le site jsfiddle.net Zone pour le code html Zone pour le code css Zone pour le code javascript Zone pour la visualisation du résultat

14 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 13 Attention : jsfiddle ne sert qu'à la mise au point Il n'est pas nécessaire d'indiquer TOUT le code HTML. JSFiddle se charge de rajouter les balises obligatoires <html><head><body><link><script> Source du fichier

15 Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 14 Procédure pour développer une page HTML à partir d'un test jsfiddle 1. Récupérer une page HTML vierge, cliquer ici 2. Enregistrer la page sous le nom de votre choix 3. Récupérer la partie HTML de JSFIDDLE et intégrer dans la partie <body> 4. Créer un fichier CSS séparé 5. Récupérer la partie CSS de JSFIDDLE et intégrer dans le fichier CSS 6. Créer le lien relatif vers le fichier CSS dans la page HTML jsfiddle style.css essai.html div { color:red; font-size:14px; } "style.css"> <div> Mon premier essai </div>

Documents pareils

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML