Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1 CHAPITRE 5 : LES FEUILLES DE STYLE CSS Sana REKIK sana.rekik2@gmail.com sana.

1 CHAPITRE 5 : LES FEUILLES DE STYLE CSS Sana REKIK sana.rekik2@gmail.com sana.rekik@iit.ens.tn 2 LE CSS : CASCADING STYLE SHEETS 3 2 Les feuilles de style CSS sont un complément direct à HTML. Il s'agit d'un langage pour définir les propriétés de format de commandes HTML (pour spécifier les polices de caractères à utiliser, leurs attributs d’affichage (gras, italique, taille, couleur..), la couleur ou l’image de fond, les formats de puces). CSS est une solution pour séparer le contenu de la forme. • Séparer le travail de la rédaction de celui de la présentation. CSS assure la cohérence graphique d’un site. • Plusieurs pages peuvent partager la même feuille de style. 3 APPLIQUER UN STYLE CSS 4 Les formats CSS peuvent être définis à trois endroits différents : 1) Dans la balise d’ouverture d’un élément HTML (appel à l’attribut style) • Méthode la moins recommandée 2) Dans l'en-tête <head> du fichier HTML (feuille de style interne) ; 3) Dans un fichier .css (feuille de style externe) • Méthode la plus recommandée 3 4 CSS : DANS LA BALISE D’UN ELEMENT HTML 5 Appel à l’attribut style : ajouter du CSS à une balise donnée La valeur correspondante à cet attribut comportera les associations propriété valeur : la propriété et sa valeur sont séparées l'une de l'autre par « : » (ex : color:blue) Cette solution présente l'inconvénient d'encore mêler des informations sur la présentation et la structure d’un document. • Cela rend difficile les mises à jour du code. <p style="color: blue; font-size:20px;"> Bonjour et bienvenue sur mon site! </p> 4 5 CSS : DANS L’ENTÊTE (STYLE INTERNE) 6 On pout insérer le code CSS dans l’entête d’une page entre les balises <head> et </head> On utilise alors la balise <style> qui prévient le navigateur que des CSS sont utilisées. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> P { color: blue; } </style> </head> …. 5 Règle de style 6 Syntaxe : une règle de style est composée de : Un sélecteur est désigne l'élément HTML (balise) auquel on applique un style. Au moins une déclaration qui présente les propriétés modifiant le format du document HTML p {color: blue;} Sélecteur Déclaration Propriété Valeur CSS : DANS L’ENTÊTE (STYLE INTERNE) 6 7 Syntaxe : La déclaration du style proprement dite est placée entre des accolades { } Les expressions complètes contenant propriété et valeur sont séparées par « ; » balise { propriété de style: valeur; propriété de style: valeur; } Il est possible de grouper plusieurs sélecteurs ayant une règle de style identique, séparés par une virgule : h1, h2, h3 { color: red } Les lignes de commentaires dans les fichiers de style CSS commencent par "%" CSS : DANS L’ENTÊTE (STYLE INTERNE) 7 8 CSS : DANS UNE FEUILLE DE STYLE EXTERNE 7 La ligne 5 indique que ce fichier HTML est associé à un fichier appelé style.css chargé de la mise en forme. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Premiers tests du CSS</title> </head> <body> <p>Mon premier site</p> </body> </html> Dans cet exemple, les deux fichiers (HTML et CSS) sont dans le même répertoire 8 <LINK> : La balise avertit le navigateur qu'il faudra réaliser un lien. rel="stylesheet" : L'attribut précise que le navigateur trouvera une feuille de style externe. href=" ... " : L'attribut de lien donne le chemin d'accès et le nom du fichier à lier. TYPE="text/css" : L'attribut précise que l'information est du texte et de type css. 9 POURQUOI UTILISER UNE FEUILLE CSS EXTERNE? 8 Eviter les répétitions du code CSS dans les pages HTML 9 10 9 10 POURQUOI UTILISER UNE FEUILLE CSS EXTERNE? Eviter les répétitions du code CSS dans les pages HTML 11 9 11 FEUILLE DE STYLE EN CASCADE Puisqu'on peut placer plusieurs feuilles de style dans un même document, les instructions de style successives peuvent s'opposer. L’hiérarchie prédéfinie est la suivante: Style externe << Style interne << Style en attribut dans la balise HTML 12 SÉLECTEUR DE TYPE 11 Par exemple : • Définir la couleur de texte pour tous les paragraphes et pour les titres h1 • Afin d’éviter les répétitions, nous pouvons combiner la déclaration en séparant les noms des balises par une virgule p { color: blue; } h1 { color: blue; } /*---------style.css-------*/ p, h1 { color: blue; } 12 13 12 C’est possible également d’avoir pour une même balise différents styles. Par exemple : • des paragraphes ayant comme couleur de texte le noir • et d’autres paragraphes dans la même page HTML ayant comme couleur de texte le bleu Que doit-on faire? On utilise des attributs spéciaux qui fonctionnent sur toutes les balises : • l'attribut class • l'attribut id 13 SÉLECTEURS D’IDENTIFIANT ET DE CLASSE 14 14 Pour cibler une classe en CSS, on utilisera le symbole point . suivi de la valeur de la class à laquelle on souhaite lier des styles. .introduction { color: blue; } .corps { color: green; } 14 <p class="introduction">Ceci est l’introduction!</p> <p class="corps">Ceci est le corps du texte</p> SÉLECTEURS DE CLASSE 15 15 Pour cibler un id en CSS, on utilisera le symbole dièse # suivi de la valeur de l’id auquel on souhaite lier des styles. #introduction { color: blue; } #corps { color: green; } 15 <p id="introduction">Ceci est l’introduction!</p> <p id="corps">Ceci est le corps du texte</p> SÉLECTEURS D’IDENTIFIANT 16 16 16 .title_class { Color: red; } .class2 { background-color: black; } #body_id { background-color: yellow; } #body_id2 { color: green; } 16 <p class="title_class class2"> Ceci est l’introduction! </p> <h1 id="body_id body_id2"> Titre du texte </h1> On peut avoir plusieurs valeurs de classe dans le même attribut class. Mais, pas de plusieurs id dans l’atribut id Un id doit être unique (un seul id identique par page). SÉLECTEURS D’ID ET DE CLASS : DIFFÉRENCE 17 16 Le id est plus fort que la class <html> <head> <style type="text/css"> .myclass { color: red; } #main { color: blue; } </style> </head> <body> <p id="main" class="myclass">Ceci est le corps du texte</p> </body> </html> 17 SÉLECTEURS D’ID ET DE CLASS : DIFFÉRENCE 18 Les balises SPAN et DIV : Permettent de cibler certains morceaux de paragraphe ou plusieurs paragraphes sans devoir repasser par les éléments structurels du HTML classique. S'utilisent toujours avec les class et les ID. La balise <SPAN> ... </SPAN> permet d'appliquer des styles à des éléments de texte d'un paragraphe ou à un morceau de paragraphe. La balise <DIV> ... </DIV> permet de regrouper plusieurs paragraphes. 18 18 SÉLECTEURS D’ID ET DE CLASS 19 19 <html> <head> <style type="text/css"> .element{ font-size : x-large ; color : red ; } </style> </head> <body> <p>Un monde de <span class=‘element’> géants </span> </p> </body> </html> 19 SÉLECTEURS D’ID ET DE CLASS La balise SPAN 20 20 <html> <head> <style type="text/css"> .zone{ font-size : x-small ; } </style> </head> <body> <div class= ‘zone’> <p>commentaire:</p> <p>N’oubliez pas l’attribut :</p> </div> </body> </html> 20 SÉLECTEURS D’ID ET DE CLASS La balise DIV 21 LE SÉLECTEUR UNIVERSEL 17 * : sélecteur universel S’applique sur toutes les balises sans exception. On l'appelle le sélecteur universel. * { /* Propriété universelle */ } 21 22 22 <!DOCTYPE html> <html> <head> <style> * { color: green; font-size: 20px; } </style> </head> <body> <h2>Ceci est un titre</h2> <p>Ce style sera affecté sur tout les paragraphes.</p> <p id="para1">Moi aussi!</p> <p>Et moi!</p> </body> </html> LE SÉLECTEUR UNIVERSEL 23 LES SÉLECTEURS AVANCÉS 18 Balise contenue dans une autre On peut définir un style pour une balise qui se trouve imbriqué dans une autre balise HTML Par exemple:  Sélectionner toutes les balises <i> situées à l'intérieur d'une balise <p>.  Il faut séparer les sélecteurs (les deux noms de balises) par un espace. p i { Color : red; } <p>parapgraphe avec <i>texte important</i></p> 23 24 LES SÉLECTEURS AVANCÉS 19 Balise suivie d’une autre Par exemple : Sélectionner la première balise <p> (le premier paragraphe) située après un titre <h3>. h3 + p { Color : red; } <h3>Titre 3 </h3> <p>Paragraphe</p> 24 25 LES SÉLECTEURS AVANCÉS 20 Balise qui possède un attribut Par exemple : Sélectionner tous les liens <a> qui possèdent un attribut title. a[title] { } <a href="http://site.com" title="Infobulle"> Voici in lien </a> 25 26 LES SÉLECTEURS AVANCÉS Balise qui possède un attribut et une valeur exacte  Par exemple : Sélectionner tous les liens <a> qui possèdent un attribut title avec la valeur « Cliquez ici ». 21 a[title="Cliquez ici"] { } <a href="http://site.com" title="Cliquez ici "> Voici in lien </a> 26 27 LES SÉLECTEURS AVANCÉS Balise qui possède un attribut et une valeur correspondante  Par exemple : Sélectionner tous les liens <a> qui possèdent un attribut title l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position). 22 <a href="http://site.com" title="Quelque part ici"> Voici in lien </a> 27 a[title*="ici"] { } 28 23 La propriété CSS font-size : modifier la taille du texte  Indiquer une taille absolue : en pixels, en centimètres ou millimètres. uploads/s3/ cours-chapitre5.pdf