Remerciez-le!

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

Abdelmalek Essaâdi University National School of Applied Sciences of Tangier -

Abdelmalek Essaâdi University National School of Applied Sciences of Tangier - Morocco Par: Mr. ERREZGOUNY Abderrachid ENSA of Tangier 2022 - 2023 1ère Année du Master Management et Pilotage des Systems Industriels Technology Web Partie 3 HTML & CSS (Cascading Style Sheets) 70 Initiation à l’utilisation des feuilles de styles CSS Partie 3 • CSS ? C'est lui qui vous permet de choisir la couleur de votre texte. • Lui qui vous permet de sélectionner la police utilisée sur votre site. • Lui encore qui permet de définir la taille du texte, les bordures, le fond… 1- Inline - en utilisant l'attribut style à l'intérieur des éléments HTML 2- Interne - en utilisant un élément <style> dans la section <head>. 3- Externe - en utilisant un élément <link> pour créer un lien vers un fichier CSS externe. 71 CSS? Technology Web • Selector; à quelle balise html la propriété s’applique • Un fichier CSS peut gérer plusieurs pages html 72 CSS? Technology Web 1- Inline - en utilisant l'attribut style à l'intérieur des éléments HTML <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> 2- Interne - en utilisant un élément <style> dans la section <head>. <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 73 CSS? Technology Web 3- Externe - en utilisant un élément <link> pour créer un lien vers un fichier CSS externe. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 74 CSS? Technology Web body { background- color: powderblue; } h1 { color: blue; } p { color: red; } La feuille de style externe (external) peut être écrite dans n'importe quel éditeur de texte. Le fichier ne doit pas contenir de code HTML et doit être enregistré avec une extension .css. 75 Style .CSS Technology Web CSS Colors, Fonts and Sizes The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used. h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } 76 Style .CSS Technology Web CSS Border p { border: 2px solid powderblue; } CSS Padding p { border: 2px solid powderblue; padding: 30px; } La propriété CSS border définit une bordure autour d'un élément HTML. Vous pouvez définir une bordure pour presque tous les éléments HTML. La propriété CSS padding définit un padding (espace) entre le texte et la bordure. 77 Style .CSS Technology Web CSS Margin p { border: 2px solid powderblue; margin: 50px; } Link to External CSS La propriété CSS margin définit une marge (espace) en dehors de la bordure. La propriété CSS padding définit un padding (espace) entre le texte et la bordure. <link rel="stylesheet" href="/html/styles.css"> Par Exemple, <link rel="stylesheet" href="styles.css"> 78 Style .CSS Technology Web Summary of CSS • Utiliser l'attribut HTML style pour le style en ligne • Utilisez l'élément HTML <style> pour définir le CSS interne. • Utilisez l'élément HTML <link> pour faire référence à un fichier CSS externe. • Utilisez l'élément HTML <head> pour stocker les éléments <style> et <link>. • Utilisez la propriété CSS color pour les couleurs de texte • Utilisez la propriété CSS font-family pour les polices de texte. • Utilisez la propriété CSS font-size pour les tailles de texte. • Utilisez la propriété CSS border pour les bordures • Utilisez la propriété CSS padding pour l'espace à l'intérieur de la bordure. • Utilisez la propriété CSS margin pour l'espace situé à l'extérieur de la bordure. 79 Style .CSS Technology Web Les commentaires dans CSS 80 /* style.css --------- Par Errezgouny */ p{ color: blue; /* Les paragraphes seront en bleu */ } Style .CSS Technology Web Exercise 1: 81 <!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 un peu !</p> </body> </html> .CSS p{ color: blue; } h1 { color: blue; } em { color: blue; } Style .CSS Technology Web 82 Chaque élément HTML a une valeur d'affichage par défaut, selon le type d'élément dont il s'agit. Il existe deux valeurs d'affichage : bloc et en ligne. L'élément <div> est un élément de niveau bloc. Éléments de niveau bloc <div>Hello World</div> Éléments en ligne Un élément en ligne ne commence pas sur une nouvelle ligne. Il s'agit d' un élément <span> à l'intérieur d' un paragraphe. <span>Hello World</span> <div style="background- color:black;color:white;padding:20 px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> Bloc HTML et éléments en ligne HTML & CSS 83 <div style="background- color:black;color:white;padding:20 px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> L'élément <div> L' <div>élément est souvent utilisé comme conteneur pour d'autres éléments HTML. L' <div>élément n'a pas d'attributs obligatoires, mais style, class et id sont communs. Lorsqu'il est utilisé avec CSS, l' <div>élément peut être utilisé pour styliser des blocs de contenu : Bloc HTML et éléments en ligne HTML & CSS 84 <!DOCTYPE html> <html> <body> <h1>The span element</h1> <p>My mother has <span style="color:blue;font- weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font- weight:bold">dark green</span> eyes.</p> </body> </html> L'élément <span> L' <span>élément est un conteneur en ligne utilisé pour baliser une partie d'un texte ou une partie d'un document. L' <span>élément n'a pas d'attributs obligatoires, mais style, class et id sont communs. Lorsqu'il est utilisé avec CSS, l' <span>élément peut être utilisé pour styliser des parties du texte : Tag Description <div> Defines a section in a document (block-level) <span> Defines a section in a document (inline) Bloc HTML et éléments en ligne HTML & CSS 85 Ces attributs spéciaux qui fonctionnent sur toutes les balises : <h1 class=""> </h1> <p class=""> </p> <img class="" /> <!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=“home">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> .home { color: blue; } .CSS Attributs Class & id HTML & CSS 86 Ces attributs spéciaux qui fonctionnent sur toutes les balises : <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html> <img src="images/logo.png" alt="Logo du site" id="logo" /> .CSS #logo { /* Indiquez les propriétés CSS ici */ } Attributs Class & id HTML & CSS 87 h1, em { } .class { } #id { } Tous les titres et tous les textes importants p{ } Les sélecteurs HTML & CSS 88 * : sélecteur universel Code : CSS *{ } Sélectionne toutes les balises sans exception. A B : une balise contenue dans une autre Code : CSS h3 em { } Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Code : HTML <h3>Titre avec <em> text important </em></h3> Les sélecteurs Avancés HTML & CSS 89 A + B : une balise qui en suit une autre Code : CSS h3 + p { } Sélectionne la première balise <p> située après un titre <h3>. Code : HTML <h3> Titre </h3> <p> Paragraph </p> A[attribut] : une balise qui possède un attribut Code : CSS a[title] { } Sélectionne tous les liens <a> qui possèdent un attribut title. Code : HTML <a href="http://site.com" title="Infobulle"> Les sélecteurs Avancés HTML & CSS 90 A[attribut*="Valeur"] : une balise, un attribut et une valeur Code : CSS a[title*="ici"] { } l'attribut doit cette fois contenir dans sa valeur le mot « ici » Code : HTML <a href="http://site.com" title="Quelque part par ici"> Les sélecteurs Avancés HTML & CSS 91 Cascading Style Sheets balise1 { propriete1: valeur1; propriete2: valeur2; } • CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web. • On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension .css (exemple : style.css). • En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation avec des propriétés CSS : Synthèse HTML & CSS 92 La taille du texte Font-size? Code : CSS font-size: 16px; Exemple : CSS p{ font-size: 14px; /* Paragraphes de 14 pixels */ }h1 { font-size: 40px; /* Titres de 40 pixels */ } Text Form HTML & CSS 93 La taille du texte xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très uploads/s3/ cours-techno-3.pdf