Remerciez-le!

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

2 29/11/2020 Partie 2: CSS 3 29/11/2020 C’est Quoi CSS ? • Les feuilles de styl

2 29/11/2020 Partie 2: CSS 3 29/11/2020 C’est Quoi CSS ? • Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui permet de gérer la présentation d'une page Web. • Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML. • Le but de CSS est séparer la structure d'un document HTML et sa présentation. • Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d'un site internet. • CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. 4 29/11/2020 5 29/11/2020 OÙ ECRIRE LE CSS ? 3 possibilités : • Dans l’élément <head> du document HTML, • Dans la balise ouvrante d’un élément, • Dans un fichier CSS séparé. Il est recommandé d’utiliser la dernière méthode. 6 29/11/2020 Mettre en place le CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon super site</h1> <p> Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore</p> </body> </html> • Ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. 1ère méthode: Dans un fichier .css (recommandé): p { color: blue; } 7 29/11/2020 SELECTEURS, PROPRIETES, VALEURS • Un sélecteur détermine à quel élément un style doit être appliqué. • Une propriété détermine le style qui va être appliqué à un élément. • Une valeur détermine le comportement d’une propriété. p { color: blue; font-size: 16px; } sélecteur propriétés valeurs 8 29/11/2020 Mettre en place le CSS Créez un nouveau fichier vide dans votre éditeur de texte et saisissez-y ce bout de code CSS : Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez ce fichier.css dans le même dossier que votre fichier .html, comme à la figure suivante. p { color: blue; } 9 29/11/2020 Mettre en place le CSS Résultat 10 29/11/2020 Mettre en place le CSS 2ème méthode: Dans l'en-tête <head> du fichier HTML: Cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p { color: blue; } </style> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon super site</h1> <p>Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p> </body> </html> 11 29/11/2020 Mettre en place le CSS Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut : Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera coloré en bleu (figure suivante) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon super site</h1> <p style="color: blue;">Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p> </body> </html> 3ème méthode: Directement dans les balises (non recommandé) 12 29/11/2020 Mettre en place le CSS Résultat 13 29/11/2020 Mettre en place le CSS Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1, c'est le titre qui sera écrit en bleu. Modifiez votre fichier style.css comme ceci : h1 { color: blue; } h1 { color: blue; } strong { color: blue; } Il signifie que nos titres <h1> et nos textes importants <strong> doivent s'afficher en bleu. Si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci : h1, strong { color: blue; } Appliquer un style à plusieurs balises 14 29/11/2020 Mettre en place le CSS Commentaires dans du CSS Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous p { color: blue; /* Les paragraphes seront en bleu */ } 15 29/11/2020 Mettre en place le CSS Appliquer un style : class et id Ce qu’on a montré jusqu'ici a quand même un défaut : cela implique que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu). Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises : • l'attribut class ; • l'attribut id. Pour que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence. Class: est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. Id: il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code. <h1 class=""> </h1> <img id="" /> 16 29/11/2020 Mettre en place le CSS Appliquer un style : class et id En fait, vous devez écrire un nom qui sert à identifier la balise. Par exemple, je vais associer la classe introduction à mon premier paragraphe: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon super site</h1> <p class="introduction">Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p> </body> </html> 17 29/11/2020 Mettre en place le CSS Appliquer un style : class et id Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point (dans le fichier style.css ), comme ci-dessous : Id : Nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo : <img src="images/logo.png" alt="Logo du site" id="logo" /> Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) : #logo { width: 200px; } .introduction { color: blue; } 18 29/11/2020 ELEMENTS DE TYPES BLOCK & INLINE • Les élément de type block… • Commencent sur une nouvelle ligne, • Occupent toute la largeur disponible, • Peuvent être imbriqués les uns dans les autres et peuvent contenir des élément de type inline. • Les éléments de type inline… • Ne commencent pas sur une nouvelle ligne, • Occupent seulement la largeur nécessaire, • Peuvent contenir d’autres éléments de type inline mais pas d’éléments de type block. 19 29/11/2020 ELEMENTS DE TYPES BLOCK & INLINE 20 29/11/2020 ELEMENTS DE TYPES BLOCK & INLINE Eléments block Eléments inline div, p span h1, h2, h3… em,strong header, article, footer… mark ol, ul, dl a table img 21 29/11/2020 Mettre en place le CSS Les balises universelles • <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. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard. Pour le moment donc, nous allons utiliser plutôt la balise <span> Fichier.html: <p> Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p> Style.css: .salutations { color: blue; } 22 29/11/2020 Mettre en place le CSS Vous pouvez voir le résultat à la figure suivante. 23 29/11/2020 Créations des zones HTML/CSS • Si l'on souhaite créer un site web, cela commence par apprendre à créer des zones. • Avant d'intégrer des images ou encore de saisir du texte, nous avons besoin de définir des emplacements pour un positionnement précis de nos informations. 24 29/11/2020 Créations des zones HTML/CSS Exemple: 25 29/11/2020 Créations des zones HTML/CSS 26 29/11/2020 Floating: 27 29/11/2020 Floating: 28 29/11/2020 29 29/11/2020 FLEXBOX • Par défaut, les éléments HTML au niveau du bloc s'empilent, donc si vous souhaitez les aligner dans une ligne, vous devez vous fier à des propriétés CSS telles que float, ou manipuler la display. • Avec une règle simple appliquée à un élément parent, on peut facilement contrôler le comportement de disposition de tous ses enfants. 30 29/11/2020 FLEXBOX 31 29/11/2020 FLEXBOX Direction du flex 32 29/11/2020 FLEXBOX Emballage flexible : flex-wrap • nowrap (par défaut): empêche les éléments d'un conteneur flexible de s'emballer • wrap: enveloppe les éléments selon les besoins en plusieurs lignes (ou colonnes, selon flex- direction) • wrap-reverse: comme wrap, mais le nombre de lignes (ou de colonnes) augmente dans la direction opposée à uploads/s3/ 2-cours-css.pdf