Remerciez-le!

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

15/10/2021 1 Chapitre 3 Feuilles de style CSS 98 Développement Web - L3 – TIC &

15/10/2021 1 Chapitre 3 Feuilles de style CSS 98 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 2 Mettre en place le Cascading Style Sheets : Versions • CSS1 : première version publié en 1996 . • CSS-P: (CSS positioning) qui permet le positionnement d'éléments. • CSS2 : depuis mai 1998. L'accent a été mis sur l'accessibilité et la capacité à avoir un style différent selon les media. • CSS3 : elle a apporté des nouveautés : multicolonnage, SVG, styles sur les polices , arrondir les coins des boîtes, utiliser des images de fond dans les bordures, des ombres portées... 99 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 3 Cascading Style Sheets 3 • CSS : Cascading Style Sheets. C'est cet autre langage qui vient compléter le HTML. • On peut écrire du code en langage CSS à trois endroits différents : dans un fichier .css (méthode la plus recommandée) ; dans l'en-tête <head> du fichier HTML ; dans les balises du fichier HTML par l’attribut style (c’est la méthode la moins recommandée). 100 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 4 Dans un fichier .css • Le plus souvent utilisé: le code CSS dans un fichier spécial ayant l'extension .css (les fichiers HTML ont l'extension .html). • C'est la méthode la plus souple et la plus pratique. Cela évite de tout mélanger dans un même fichier. • Exemple <link rel="stylesheet" href="style.css" /> : cette ligne indique que ce fichier HTML est associé à un fichier appelé style.css. Ce dernier est chargé de la mise en forme. 101 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 5 Dans un fichier .css (Exemple 1) 102 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 6 Dans un fichier .css (Exemple 1) 103 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 7 Dans l'en-tête <head> du fichier HTML • On trouve une autre méthode pour utiliser le CSS dans ses fichiers HTML : • Elle consiste à insérer le code CSS dans une balise <style> à l'intérieur de l'en-tête <head>. • L’exemple (2) montre comment obtenir exactement le même résultat en utilisant un seul fichier .html. Celui qui contient le code CSS (lignes 6 à 9) : 104 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 8 Dans l'en-tête <head> du fichier HTML: Exemple 2 105 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 9 Directement dans les balises (Exemple 3) • C’est la dernière méthode, à manipuler avec précaution : on ajoute un attribut style à n'importe quelle balise. on insère le code CSS dans cet attribut : 106 106 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 10 Quelle méthode choisir ? Le code CSS est donné une fois pour toutes dans un fichier CSS 107 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 11 Appliquer un style : sélectionner une balise • Dans un code CSS, il existe trois éléments différents : • Noms de balise : on écrit le nom de la balise dont on veut modifier l'apparence. Par exemple, pour modifier tous les paragraphes <p>, on écrit p. • La propriété CSS : les « effets de style » sont rangés dans des propriétés. On trouve par exemple la propriété color permettant d'indiquer la couleur du texte, font-size pour la taille du texte, etc.. • La valeur : on doit indiquer une valeur pour chaque propriété CSS. Par exemple, pour la couleur (color), il faut indiquer le nom. Pour font-size, il faut indiquer quelle taille , etc. 108 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 12 Exemple • Schématiquement, une feuille de style CSS ressemble donc à cela : 109 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 13 Exemple 110 p { color: blue; } … signifie donc : « on veut que tous les paragraphes soient écrits en bleu. ». Le résultat est visible à la figure suivante. H { color: blue; } … signifie donc : « on veut que tous les titres soient écrits en bleu. ». Le résultat est visible à la figure suivante. Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 14 Appliquer un style à plusieurs balises • Exemple : le code CSS suivant : h1 { color: blue; } p { color: blue; } H1,p { color: blue; } 111 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 15 Des commentaires dans du CSS • Comme en HTML, il est possible de mettre des commentaires. ces derniers ne seront pas affichés, ils servent à indiquer des informations pour l’auteur. • Pour faire un commentaire, ecrire /*, suivi du commentaire, puis */ pour terminer le commentaire. Les commentaires peuvent être écrits sur plusieurs lignes. /* style.css --------- Introduction au commentaires */ p { color: blue; /* Les paragraphes seront en bleu */ } 112 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 16 Appliquer un style : class et id • Pour résoudre le problème, on utilise les attributs spéciaux qui fonctionnent sur toutes les balises : l'attribut class ; l'attribut id. TOUS les paragraphes possèdent la même présentation. 113 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 17 L'attribut class • C'est un attribut que l'on peut utiliser sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. <h1 class=""> </h1> <p class=""> </p> <img class="" /> • Exemple, on définit la classe introduction .introduction { color: blue; } 114 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 18 L’attribut class : Exemple 4 • On associe la classe introduction au premier paragraphe • Cette classe : introduction. On peut la réutiliser dans le fichier CSS qui signifie : « que seules les balises qui ont comme nom 'introduction' seront affichées en bleu ». 115 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 19 L'attribut id • Il fonctionne de la même manière que class, mais il ne peut être utilisé qu'une fois dans le code. • C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères. Par exemple, on met des id que sur des éléments uniques dans la page, comme par exemple le logo. <img src="images/logo.png" alt="Logo du site" id="logo" > • Si on utilise des id, lorsqu’on définit leurs propriétés dans le fichier CSS, il faudra précéder le nom de l'id par un dièse (#) : #logo { /* Indiquez les propriétés CSS ici */ } 116 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 20 L'attribut id : Exemple 117 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 21 Les balises universelles • Il arrive d’avoir besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises. • Si, par exemple, on veut modifier uniquement le mot « paragraphe » dans le paragraphe de l’exemple précédent: • Pour ce faire, on a créé deux balises universelles, qui n'ont aucune signification particulière. 118 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 22 Span & Div Eléments de type block Eléments de type inline P em h1, h2, h3, h4, h5, h6 strong ol, ul,dl mark li a table img Il y a une différence minime entre eux balises : <span> </span> : c'est une balise de type inline, c'est-à- dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. 119 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 23 Balise div et attribut class • Div : Une balise qui ne fait rien à part marquer une zone • Dans le fichier HTML : <div class="titre">C'est le titre de ma page</div> • Dans le fichier CSS : .titre { color: black; } 120 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 24 Appliquer un style : les sélecteurs avancés (1) Les sélecteurs standards: P { } … signifie modifier tous les paragraphes h1, h2 { } … signifie tous les titres 1 et 2 sélectionner deux balises d'un seul coup. sélectionner des balises précises et leur donner un nom grâce aux attributs class et id : .class { } #id { } 121 Développement Web - L3 – TIC & SE - BEN SALEM M. 15/10/2021 25 Les sélecteurs avancés (2) *: sélecteur universel: touche toutes les balises uploads/s3/ chapitre3-coursprogrammationweb-malekbensalem 1 .pdf