Chapitre III: Feuilles de Styles CSS PDF

Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Chapitre III: Feuilles de Styles CSS...

Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Chapitre III: Feuilles de Styles CSS Professeure Manal ZETTAM Ecole Nationale des Sciences Appliquées de Safi Université Cadi Ayyad - Marrakech Année Universitaire : 2024-2025 Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 1 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Plan 1 Introduction 2 Premier exemple CSS Fichier.css Dans l’en-tête du fichier HTML Directement dans les balises 3 Le code CSS Structure d’un code CSS Les sélecteurs en CSS Les unités Les couleurs Les propriétés css Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 2 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Plan 4 Pseudo-classes, pseudo-éléments, règles @ et media Pseudo-classes et pseudo-éléments Règles @ Media queries 5 Bibliographie & Webographie Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 3 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction CSS CSS (Cascading Style Sheets) est un langage qui permet de gérer la mise en forme d’une page HTML. CSS permet de définir: la couleur du texte, la police utilisée, la taille du texte, les bordures et le fond, la structure du site. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 4 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Avant l’arrivée du CSS en 1996, la mise en forme était gérée via HTML. Exemple Texte Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 5 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Il est important de noter que CSS a évolué tout comme HTML avant d’arriver à la version 3. CSS 1, CSS 2.0, CSS 2.1, CSS 3. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 6 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Aucun navigateur n’est compatible avec toutes les fonc- - tionnalités CSS. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 7 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction CSS Reflections (en anglais) La propriété -webkit-box-reflect permet de créer un effet de réflexion d’un élément dans une direction donnée. -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; https://developer.mozilla.org/fr/docs/Web/CSS/ -webkit-box-reflect Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 8 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction CSS Reflections (exemple) img { -webkit-box-reflect: right; } https://www.w3schools.com/css/tryit.asp?filename= trycss3_reflection_right Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 9 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction CSS Reflections (exemple) 1 Créer un fichier HTML nommé exemple.html puis copier le code depuis https://www.w3schools.com/css/tryit. asp?filename=trycss3_reflection_right. 2 Télécharger l’image depuis https://www.w3schools.com/css/img_tree.png 3 Ouvrir le fichier exemple.html avec Chrome. 4 Ouvrir le fichier exemple.html avec Firefox. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 10 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Figure: Résultat avec Chrome. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 11 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Figure: Résultat avec FireFox. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 12 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Introduction Pour connaı̂tre si un navigateur web/mobile est compatible avec une propriété/fonctionalité css il suffit de consulter le site https://caniuse.com/. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 13 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Premier exemple CSS Le code CSS peut être écrit: 1 dans un fichier.css (recommandé) ; 2 dans l’en-tête du fichier HTML ; 3 directement dans les balises du fichier HTML via un attribut style (déconseillé). Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 14 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Fichier.css Ajouter la ligne suivante sous la balise head d’un fichier html: Ajouter la ligne suivante à la balise body du même fichier html Bonjour et bienvenue sur mon site ! Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 15 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Fichier.css Créer un nouveau fichier style.css et ajouter le code suivant: p { color: blue; } placer le fichier html et css dans le même dossier et lancer la page html depuis un navigateur web. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 16 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Fichier.css Figure: Résultat obtenu. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 17 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Dans l’en-tête du fichier HTML Pour utiliser du CSS dans un fichier HTML, il suffit d’insérer le code css dans une balise , à l’intérieur de l’en-tête comme l’exemple suivant: p { color: blue; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 18 / 66  Introduction Premier exemple CSS Fichier.css Le code CSS Dans l’en-tête du fichier HTML Pseudo-classes, pseudo-éléments, règles @ et media Directement dans les balises Bibliographie & Webographie Directement dans les balises Ajouter un attribut style à n’importe quelle balise et insérer votre code CSS directement dans cet attribut: Bonjour et bienvenue sur mon site ! Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 19 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Structure d’un code CSS Le code CSS est structuré comme suit: Sélecteur1 { propriete1: valeur1; propriete2: valeur2; } Sélecteur2 { propriete1: valeur1; } Un commentaire CSS est définie comme suit: Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 20 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS En CSS, il existe plusieurs sélecteurs tels que: 1 Le sélécteur d’élément, 2 le sélécteur de classe, 3 le sélécteur d’identifiant, 4 le sélecteur d’attribut, 5 le sélecteur d’éléments adjacent, 6 le sélecteur d’éléments frères. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 21 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS Une liste exhaustive des sélecteurs CSS est disponible à l’url https://www.w3.org/Style/css3-selectors-updates/ WD-css3-selectors-20010126.fr.html#selectors Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 22 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS Le sélécteur d’élément On écrit le nom de la balise (par exemple p) et on ouvre des accolades pour, à l’intérieur, ajouter les propriétés et valeurs qu’on souhaite. p { color: blue; } Cela signifie que tous les paragraphes seront affichés en bleu. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 23 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS Le sélécteur de classe On ajoute l’attribut class aux balises concernées comme suit: Bonjour et bienvenue sur mon site ! On ajoute un point avant la valeur de l’attribut class puis on spécifie les propriétés CSS souhaitées:.introduction { color: blue; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 24 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS le sélécteur d’identifiant On ajoute l’attribut id à la balise concernée comme suit: Bonjour et bienvenue sur mon site ! On ajoute un dièse avant la valeur de l’attribut id puis on spécifie les propriétés CSS souhaitées: #para { color: blue; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 25 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS Le sélecteur d’attribut Soit le code html suivant: il est à noter que: le sélecteur a[title] permet de sélectionner tous les liens qui possèdent un attribut title. a[title], a[title="Cliquez ici"], a[title*="ici"], [href] { color: blue; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 26 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les sélecteurs en CSS Le sélecteur d’éléments adjacent Soit le code html suivant: Titre Paragraphe Pour appliquer des propriétés CSS à un élément p immédiatement précédés par un élément h2 il suffit d’utiliser le signe + entre h2 et p comme suit: h3 + p { color: blue; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 27 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les unités Les unités les plus pertinentes pour un affichage à l’écran restent px, % et em. Il faut privilégier em pour obtenir des unités fluides qui s’ajustent à différentes taillesd’écran. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 28 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les couleurs En CSS une couleur peut être définie de trois manières différentes: Un mot-clé par exemple green, Un code hexadécimal par exemple #F4C5A8. À l’aide de la fonction rgb(Red, Green, Blue) par exemple rgb(45, 78, 255) ou encore rgb(25%, 85%, 12%). Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 29 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Les propriétés sont des paires clé/valeur. La clé est le nom de la propriété, suivie desdeux-points, terminée par la valeur qui peut revêtir différentes formes : mots-clés, valeur numérique simple, valeur numérique avec unité, chaı̂ne de caractères, etc. Sélecteur1 { propriete1: valeur1; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 30 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Texte Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 31 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Texte(suite) Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 32 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Exemple p { font-weight: bold; color: #005A9C; text-align: left; line-height: 150%; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 33 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Fond Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 34 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css div { background-image: url(image.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 35 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Ombrages et transparence Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 36 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css footer { opacity: 0.5; text-shadow: 0px 0px 9px #777; box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 37 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Bordures Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 38 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css.arrondi { border: 5px solid yellow; border-radius: 20px; } :focus { outline: thick solid #fc0; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 39 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Positionnement et dimensionnement Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 40 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Positionnement et dimensionnement(suite) Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 41 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css img.illustration { float: right; margin-left: 2em; max-width: 50%; rotation: 10deg; rotation-point: bottom left; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 42 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Listes Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 43 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css ul li { list-style: disc; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 44 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Curseur et direction d’écriture Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 45 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css input[type=submit] { cursor: pointer; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 46 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Animations Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 47 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css div {animation-name: 'diagonale'; animation-duration: 3s; animation-iteration-count: 5;} @keyframes 'diagonale' { from { left: 0; top: 0;} to { left: 150px; top: 200px; }} Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 48 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Transformations Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 49 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css h1 { transform: rotate(8deg); } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 50 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css Transitions Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 51 / 66  Introduction Structure d’un code CSS Premier exemple CSS Les sélecteurs en CSS Le code CSS Les unités Pseudo-classes, pseudo-éléments, règles @ et media Les couleurs Bibliographie & Webographie Les propriétés css Les propriétés css img.transit { transition: transform.5s ease-in; } img.transit:hover { transform: rotate(10deg); } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 52 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Pseudo-classes et pseudo-éléments Les pseudo-classes et pseudo-éléments affinent les capacités des sélecteurs. Les pseudo-classes et pseudo-éléments s’écrivent à la suite du sélecteur initial, concaténés par un signe deux-points :. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 53 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Pseudo-classes et pseudo-éléments Pseudo-classes et pseudo-éléments Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 54 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Pseudo-classes et pseudo-éléments Pseudo-classes et pseudo-éléments Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 55 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Pseudo-classes et pseudo-éléments Pseudo-classes et pseudo-éléments Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 56 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Pseudo-classes et pseudo-éléments a:hover { text-decoration:underline; } p::first-letter { font-size: 2em; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 57 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Règles @ Les règles @ sont des instructions plus évoluées pouvant se retrouver dans les feuilles de styles pour moduler leur comportement ou ajouter des informations qui ne pourraient trouver leur place dans des déclarations classiques. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 58 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Règles @ Règles @ Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 59 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Règles @ @import "autres_styles.css"; @import url("impression.css") print; @page { size: 15cm 20cm; margin: 2cm; marks: cross; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 60 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Règles @ @media print{ body { font-size: 3em; } @font-face { font-family: maPolice; src: url(ToutSaufComicSans.otf); font-weight: bold; } Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 61 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Media queries Les media queries (ou requêtes de média) sont une fonctionnalité bien utile de CSS pour adapter le design et la présentation générale d’une page web au périphérique de consultation. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 62 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Media queries @media screen and (min-width: 200px) and (max-width: 640px) { section { display: block; clear: both; margin: 0; } } Ici, l’on s’adresse à un écran (screen) dont la résolution en largeur est comprise entre 200 et 640 pixels. Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 63 / 66  Introduction Premier exemple CSS Pseudo-classes et pseudo-éléments Le code CSS Règles @ Pseudo-classes, pseudo-éléments, règles @ et media Media queries Bibliographie & Webographie Documentation Se rendre à l’url https://developer.mozilla.org/fr/docs/Web/CSS puis dans la bare de recherche taper le mot clé comme clear Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 64 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Bibliographie & Webographie Réalisez votre site web avec HTML 5 et CSS 3 Ed. 3 (Eyrolles), Nebra, Mathieu (2023). HTML 5 : Une référence pour le développeur web Ed. 3 (Eyrolles),Rimelé, Rodolphe (2017). XHTML et CSS : Cours et exercices (EYROLLES), Jean Engels (2006). Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 65 / 66  Introduction Premier exemple CSS Le code CSS Pseudo-classes, pseudo-éléments, règles @ et media Bibliographie & Webographie Bibliographie & Webographie https://www.w3.org/TR/2009/WD-html5-20090825/ introduction.html https://fr.wikipedia.org/wiki/Extensible_ Hypertext_Markup_Language https://www.irif.fr/~carton/Enseignement/XML/ Cours/Annexes/presentation.html https://developer.mozilla.org/fr/docs/Learn/HTML https: //www.w3schools.com/css/css3_image_reflection.asp https://caniuse.com/ Professeure Manal ZETTAM Chapitre III: Feuilles de Styles CSS 66 / 66