Remerciez-le!

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

Design and CSS Cascading Style Sheets Objectifs du cours Après ce cours vous se

Design and CSS Cascading Style Sheets Objectifs du cours Après ce cours vous serez capable de: – Définir ce que s’est que le CSS – Utiliser le css Plan du cours Introduction Le css Float & position Propriété display Elements & pseudo- classes Directives Précédence des sélecteurs INTRODUCTION CSS Introduction au CSS Avant de commencer…. • HTML, CSS et JavaScript jouent différents rols: – HTML: • Créer la structure de la page • Définir le contenu (images, texte…) – CSS: • Rendre les pages webs jolies – JavaScript: • Créer une interaction avec les utilisateurs(buttons, validation, …) • Créer une interaction avec le navigateur(redirect, set data, …) • Se comporter comme tout autre langage fonctionnel(boucles, variables, …) Introduction au css • La combinaison de tout ce qui precede constitue le web Avant de commencer: Introduction au css • HTML Une analogie YAMAHA MX49 Introduction au css • CSS Une analogie Introduction au css • JavaScript Une analogie Introduction au css • CSS: Cascading Style Sheet • Langage différend du html • Permet de décorer un document html • Version actuelle: css3 definition Avantages Introduction au css Centralisation des fichiers de mise en forme dans un seul document Séparation du design et le contenu Simplifie la maintenance des pages web Réduit la taille des pages web Peut être aussi utilisé pour le XML Possiblités Introduction au css Définir la disposition du document en agissant sur les éléments tels que: Le fond de page (image et ou couleur Style de police (couleur, forme police…. Bordures et les marges Les propriétés peuvent être appliquées sur : Les balises de type (<h1>, <p>, <ul>, <a>, …) Les classes (les attributs de type class) Les identifiants (les attributs de type id) Etc…; La syntaxe est très facile à comprendre. Vous devez vous concentrer sur le vocabulaire, car CSS possède de nombreuses propriétés avec encore plus de valeurs. Votre niveau CSS reposera principalement sur la pratique et les expériences, car c'est un langage descriptif. Pas de variables, pas de boucles, pas d'opérateur conditionnel Remarques Introduction au css Questions ? CSS Le design et le css Scission d’une page css <div>...</div> Définit les blocks de la page Balise de type block Utilisé pour séparer chaque partie importante de la page Facilite l’usage du css Pas de comportement spécial Scission d’une page web Sans le css css Affichage de la page précédente avec CSS Avec le cssWe’veusedCSS to obtainthisresult.Nous avons utilisé le csspour trouver ce resultat Ou placer le css css Directement dans les balises Méthode non recommandée Difficulté de mise à jour Ne cible qu’une seule balise <span style="color: red;">Red text... </span> Ou placer le css css Dans le code Bon à utiliser mais: Utilisable que pour une seule page Rend lourd la page <head> <style type="text/css"> p { color: blue; } </style> </head> Ou placer le css css Fichier externe Meilleur façon de placer le CSS: Utilisable sur plusieurs page Facile à mettre à jour Séparation du contenu de la mise en forme  <link href="main.css" media="all" rel="stylesheet" type="text/css" /> Syntaxe css selector { property: value; ... } p { background-color: white; color: black; font-family: Verdana, "Sans serif"; } Syntaxe css • Les sélecteurs peuvent être groupés • Les styles sont appliqués dans l'ordre de définition • En cas de conflit, la dernière propriété "remplace" les précédentes h1 { background-color: white; color: red; } p, h1 { font-family: Verdana, "Sans serif";} Commentaires css Synthaxe: /*……………..*/ Pas possible d’utiliser // /* Document font family */ body { font-family: Verdana, "Sans serif";} Les sélecteurs css Vu d’ensemble des sélecteurs Les sélecteurs css Vu d’ensemble des sélecteurs Un attribut de class css Permet d’appliquer un style sur un ensemble de balise Ce code css Peut etre associé à n’importe quelle balise de type h1 h1.section { background-color: red; } <h1 class="section">My Title</h1> Un attribut id css Permet d’appliquer un style sur une et une seule balise Ce code css Peut etre associé à n’importe quelle balise #MyObjectId { background-color: red; } <div id="MyObjectId">My Text</div> Les couleurs css Peuvent défini de différente manière Unités de mesures css Unités de mesure disponible % in, cm, mm em, px pt, pc px body { font-size: 1.2em; } Les propriétés de texte: css Les propriétés de texte: css Les propriétés de texte: css p { color: orange; text-align: center; text-decoration: underline; text-transform: uppercase; letter-spacing: 10px; font-style: italic; font-weight: bold; line-height: 1.4em; font-family: "Serif"; font-size: 1.2em; } Attribut: background css background-color background-image background-repeat background-attachment background-position Attribut: background css body { background-color: black; background-image: url('kaleidoscope.jpg'); background-repeat: repeat-x; background-attachment: fixed; background-position: 0% 50%; } Attribut: margin Les marges externes margin-position: margin-top margin-right margin-bottom margin-left css My Block Attribut: margin Sans style: Avec style: css p { margin: 40px; } Attribut: margin  L’attribut margin peut prendre la valeur auto permet de centrer les blocks La table sera centré css table { margin: auto; } Attribut: padding Spécifie les marges internes • padding-position: padding-top padding-right padding-bottom padding-left css My Block Attribut: padding Avec style : Sans style: css th { padding: 10px 40px 10px 40px; } td { padding: 20px; text-align: right; } Attribut: border  border-width  border-style  border-color  border-collapse  border-position: border-top border-bottom border-left border-right css My Block table { border: 5px solid green; border-collapse: collapse; } th { padding: 10px 40px 10px 40px; border-bottom: 3px dotted red; border-left: 1px solid blue; } td { padding: 20px; text-align: right; border-left: 1px solid blue; border-bottom: 1px solid blue; } Attributs: list  list-style-type  list-style-position  list-style-image css ul { list-style-type: disc; list-style-position: outside; list-style-image: url('orange.gif'); } Questions ? Deboguer avec le navigateur Avant de commencer, comment deboguer avec le css ! Vous pouvez utilizer votre navigateur préféré pour déboguer Faites un clique droit puis chosissez “inspecter” Toutes les propriétés css sont editable Vous pouvez même ajouter du CSS dans votre navigateur NB: quand vous rechargez la page, toutes les modifications disparaissent css Deboguer avec le navigateur Exemple avec chrome: css Exercice 1/2 Créer votre proper designe Mettre ç jour votre page de cv Ajouter un lien de fichier css externe Vous pouvez ajouter d’autres balises html si vous voulez Utilisez au maximum les propriétés css que nous venons de voir Margins, Paddings & Border Texts properties, Colors, Size unit List-Style Background css Exercice 2/2- créer des pages suivantes: css css Les flottants et les positions Programmer avec le css Avant d’aller dans les details nous devons comprendre le flux Comment est ce que les éléments sont affiché dans le flux Comprendre le flux Programmer avec le css Une structure simple: Comprendre le flow <div> <p>Lorem ipsum dolor sit amet</p> <div style="height: 50px; background: red;"></div> <div style="height: 50px; background: blue;"></div> </div> Programmer avec le css Le flow est prévisible Si nous changeons l’ordre : Comprendre le flow <div> <div style="height: 50px; background: blue;"></div> <p>Lorem ipsum dolor sit amet</p> <div style="height: 50px; background: red;"></div> </div> Programmer avec le css Un élément dans un flux peut prendre trois positions: Normale: l’élément est place par rapport à sa position dans le document Float: l’élément est dabord placé normalement puis déplacer à gauche ou à droite selon les possibilités Absolute: l’élément est place autrement que la position dans le DOM Le schema de positionnement Programmer avec le css Exemples - Normal <div> <div class="block"></div> <p>...</p> <p>...</p> </div> .block { height: 98px; width: 98px; background: blue; border: 1px black solid; } Programmer avec le css Exemples - float <div> <div class="block"></div> <p>...</p> <p>...</p> </div> .block { height: 98px; width: 98px; background: blue; border: 1px black solid; float: right; } Programmer avec le css Exemples - positon <div> <div class="block"></div> <p>...</p> <p>...</p> </div> .block { height: 98px; width: 98px; background: blue; border: 1px black solid; position: absolute; } Programmer avec le css Attribut : float • Détermine les éléments flottants • Les valeurs possibles: – Left – Right – None – inherit Floating block Programmer avec le css Exemple – blocs multiples <div class="block red"></div> <div class="block blue"></div> <div class="block yellow"></div> .block { height: 98px; width: 98px; border: 1px black solid; } .red { background: red; } .blue { background: blue; } .yellow { background: yellow; } Programmer avec le css Exemple – blocs multiples <div class="block red"></div> <div class="block blue"></div> <div class="block yellow"></div> .block { height: 98px; width: 98px; border: 1px black solid; float: left; } .red { background: red; } .blue { background: blue; } .yellow { background: yellow; } Programmer avec le css Exemple – blocs multiples <div class="block red"></div> <div class="block blue"></div> <div class="block yellow"></div> .block { height: 98px; width: 98px; border: 1px black solid; float: right; } .red { background: red; } .blue { background: blue; } .yellow { background: yellow; } Browser right border Programmer avec le css Attribut : position • Déplacer un élément du flux • Les valeurs possibles: – Static: l’élément est à sa position normale – relative: position relative à sa position normale – Absolute: position relative à la fenêtre (position de l’élément parent) – Fixed: même que absolute sauf que l’élément uploads/Finance/ design-and-css-cascading-style-sheets.pdf