Initiation au css

547 vues

Publié le

objectif général : Mettre en forme le contenu d’un site web
objectifs opérationnel :
Insérer du style dans une page HTML
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
547
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Initiation au css

  1. 1. Initiation au CSS M. DIENG Abdoulaye Mai 2014
  2. 2. Objectif général Mettre en forme le contenu d’un site web 2
  3. 3. Le sommaire 1. Présentation du CSS 2. La syntaxe 3. L’insertion 4. Les sélecteurs 5. Les éléments span et div 6. L’affichage d’un contenu 7. Les unités de longueur 8. Les caractères 9. Le texte 10. Les valeurs de couleurs 11. Les couleurs et fond 12. La marge 13. La bordure 14. L’espacement 15. Le dimensionnement 16. Le positionnement 17. L’empilement 18. L’héritage 3
  4. 4. Présentation du CSS  Le concept de CSS (Cascading StyleSheets ou feuilles de style en cascade) est apparu en 1996 et consiste à lier du style (ex. les polices de caractères, les couleurs, la mise en page, etc.) aux documents structurés.  Il a pour but de séparer la structure et la présentation du contenu  Intérêts des feuilles de style : – une présentation homogène sur tout un site; – faciliter la mise à jour et l'évolution d’un site; – une plus grande lisibilité du HTML; – des chargements de page plus rapides; – augmentation des potentiels de présentation; – avec CSS2, la prise en compte de la diversité de média (écran, imprimante, mobiles, synthétiseur vocal, etc.) 4
  5. 5. La syntaxe (1/2) • Une feuille de style est composée de règles qui peuvent s'appliquer au document entier, à un ensemble de contenus du document ou à un contenu particulier. • Une règle de style est composée d'un sélecteur et d'une déclaration constituée d’un ou de plusieurs couples propriété:valeur séparés par des ;. selecteur { prop1:val1; prop2:val2_1 val2_2; } • Un sélecteur indique à quel(s) contenu(s) d'une page HTML on désire appliquer une règle. • Une propriété identifie ce qu'il faut définir sur le contenu. • Une valeur est assignée à une propriété pour définir sa nature. 5
  6. 6. La syntaxe (2/2) • Une propriété peut avoir plusieurs valeurs (séparées par des espaces). • On peut attribuer un même style à plusieurs sélecteurs (séparées par des virgules). • Les commentaires sont délimités par les symboles /* et */ • Exemples : h1 { color : red; } /*couleur rouge pour tout titre de niveau 1*/ table {background-color : white ; border : 1px black;} h2, h3 { color : gray; } 6
  7. 7. L’insertion en ligne • Insertion dans une balise ou style inline • Syntaxe : <balise style="prop1:val1; prop2:val2; … "> • À utiliser avec modération car ne respectant pas le principe de la séparation du contenu et de la présentation. 7 x
  8. 8. L’insertion interne • Insertion dans l’en-tête du fichier HTML ou style interne • Elle s'applique à toutes les balises de la page qu'elle a définies. • Syntaxe: <head> <style type="text/css"> /* Définition des règles de style */ </style> </head> 8 x
  9. 9. L’insertion externe • Liaison d’une feuille de style externe (qui contient les règles) • Syntaxe: <head> <link href=“chemin/du/fichier.css" rel="stylesheet" type="text/css“> </head> • La feuille de style peut être utilisée par un nombre illimité de pages. • La feuille de style sera gardée dans la mémoire cache du navigateur. 9 x
  10. 10. Le sélecteur de type et d’attribut • Le sélecteur de type permet d’appliquer un style à une ou plusieurs balises. • Le sélecteur d’attribut permet d’appliquer un style en fonction de l’attribut d’une balise. • Exemple h1 {color: green;} h2 , h3 {color: yellow;} hr[width=50%]{ color : red;} 10
  11. 11. Le sélecteur de descendance • Le sélecteur de contenus imbriqués permet de créer une règle ne s'appliquant que lorsque un contenu Y est imbriqué dans un contenu X. • Syntaxe: X Y {déclaration1; déclaration2; … } NB : X et Y sont séparés par le caractère espace) • Exemple Définition : p b { color: red; } Application : <p> <i> texte en italique </i><b> texte rouge et en gras </b> </p> <div><b> texte uniquement en gras</b></div> 11
  12. 12. Le sélecteur filial • Le sélecteur de contenus père-fils permet de créer une règle ne s'appliquant que lorsque un contenu Y est fils direct d'un contenu X. • La règle ne s'applique pas si Y est encapsulé dans une ou plusieurs autres balises intermédiaires. • Syntaxe X > Y {déclaration1; déclaration2; … } • Exemple Définition : p > b { color: red; } Application: <p> <b><i> texte en italique, gras et rouge </i></b> <i><b> texte gras et en italique mais pas rouge</b></i> </p> <div><b> texte uniquement gras </b></div> 12
  13. 13. Le sélecteur adjacent • Le sélecteur de contenus consécutifs permet de créer une règle ne s'appliquant que lorsque un contenu Y suit immédiatement un contenu X. • Syntaxe : X + Y {déclaration1; déclaration2; … } • Exemple Définition: i + b { color: red; } Application: <p><i> texte en italique </i><b> texte gras et en rouge</b> <b> texte uniquement en gras </b></p> 13
  14. 14. Le sélecteur d’identificateur • Le sélecteur d’identificateur permet d'appliquer une règle de style à un contenu unique du document. • Le id est très utilisé pour la mise en page. • Définition du style (nom préfixé d’un dièse) #identificateur {déclaration1; déclaration2; … } • Application du style (nom sans le dièse) <balise id="identificateur"> .... </balise> • Exemple Définition : #titreDebutPage {color: blue;} Application : <h1 id="titreDebutPage">Titre principal</h1> 14 x
  15. 15. Le sélecteur de classe • Un sélecteur de classe permet de créer un style qui peut s’appliquer à n’importe quel contenu du document • +sieurs contenus d’une page peuvent partager une classe • Il est possible d'appliquer simultanément deux classes à une même balise, en les séparant par un espace. • Définition du style (nom préfixé d’un point) .nom_de_classe {déclaration1; déclaration2; … } • Application du style (nom sans le point) <balise class="nom_de_classe"> .... </balise> • Exemple Définition : .rouge { color: red; } p.gras { font-weight: bold; } /*sous classe*/ Application : <p class=" rouge gras "> paragraphe en gras et rouge</p> <h1 class=" rouge "> titre rouge</h1> 15 x
  16. 16. Le sélecteur de pseudo-classes • Un sélecteur de pseudo-classe permet d’appliquer une règle sur un contenu uniquement dans certains contextes • Il y en a plusieurs, mais ceux qui sont reconnus par tous les navigateurs sont :  a:link qui permet d'attribuer une règle au lien (non-visité). Exple. a:link {text-decoration:none;}  a:visited permet d'attribuer une règle au lien visité Exple. a:visited {color:blue;}  a:hover qui permet d'attribuer une règle sur les liens lors du survol par la souris. Exple. a:hover {font-weight:bold;} 16 x
  17. 17. span et div • span et div servent chacun à délimiter une zone associée à un style. • Éviter d’utiliser span ou div comme unique sélecteur • span et div sont souvent utilisés avec les attributs class et id. • L’élément span est utilisé pour modifier le style d'une portion de texte incluse dans une boîte ou un bloc. • Un "bloc" délimite un contenu en commençant sur une nouvelle ligne. Exples: h1, ..., h6, ul, table, pre, blockquote, p, div, etc. • div permet de contenir des sous-blocs et des balises en-ligne. • Les éléments "en-ligne" sont prévus pour rester dans le texte. Exples: a, abbr, b, img, input, span, textarea, etc. 17 x
  18. 18. Les unités de longueur Nombre entier ou décimal suivi d'une unité de mesure pour les tailles de police, les espaces entre paragraphes, les marges, les dimensions, etc.  em : taille de la police utilisée (1em=100%, 0.8em=80%)  ex : hauteur du "x" minuscule de la police utilisée  px : pixel (variable en fonction de l’écran)  % : pourcentage de la taille de l’élément parent 18
  19. 19. Les caractères • font-style : normal | italic | oblique style des caractères • font-weight : de 100 à 900 | normal(400) | bold(700) | bolder | lighter épaisseur ou graisse des caractères • font-size : xx-small | x-small | medium | x-large | xx-large | <longueur> | % | smaler | larger. taille des caractères • font-family : nom(s) de police ou famille générique ( serif, sans-serif, cursive, monospace, fantasy) Déclarer une famille générique après les polices (séparées par une virgule) pour obliger le navigateur, si la police n’est pas trouvée, à lui substituer une police similaire. • font : permet de regrouper les différentes propriétés de polices (dans l’ordre précité) en une ligne. Ex : p { font: italic bold 12pt "Times New Roman" , serif; } 19
  20. 20. Le texte • word-spacing et letter-spacing : normal | <longueur> distance entre mots et distance entre caractères. • line-height : normal | <longueur> | % interligne • text-decoration: none | [ underline || overline || line-through || blink ] texte souligné, surligné, barré ou clignotant. • text-align: left | right | center | justify alignement horizontale du texte. • text-transform: capitalize | uppercase |lowercase | none casse des caractères. • text-indent: <longueur> | <pourcentage> alinéa pour la première ligne de texte. 20
  21. 21. Les valeurs de couleur Mot clé rgb héxa aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff gray #808080 green #008000 lime #00ff00 Maroon #800000 navy #000080 olive #808000 purple #800080 red #ff0000 silver #c0c0c0 teal #008080 #ffffff yellow #ffff00 Orange #ffa500 21
  22. 22. Les couleurs et fond  color: <couleur> couleur d'un texte  background-color: <couleur> | transparent couleur du fond de la page ou d’un bloc  background-image: url(<url>) | none; image du fond de la page ou d’un bloc  background permet de regrouper les différentes propriétés de fond (dans l’ordre précité) en une ligne Ex : p { background: green url(image.gif) } 22
  23. 23. L’anatomie des boîtes Une boîte possède une aire de contenu (texte, image, ...) entourée par une aire d'espacement, une aire de bordure et une aire de marge 23
  24. 24. La marge • Le margin évalue la distance entre l’élément et ses voisins • Les propriétés margin-top, margin-right, margin-bottom, margin-left prennent chacune l’une des valeurs: <longueur> | <pourcentage> | auto • margin : [<longueur>|<pourcentage> | auto]{1,4} regroupe les différentes propriétés de marge (en partant d'en haut, dans le sens horaire) • Exemples : body{ margin: 2em } signifie : toutes les marges à 2em. body { margin: 1em 2em } signifie : top = bottom = 1em et right = left = 2em. body { margin: 1em 2em 3em } signifie : top = 1em, right = left = 2em et bottom = 3em 24
  25. 25. L’épaisseur de bordure • Les propriétés border−top−width, border−right−width, border−bottom−width, border−left−width prennent chacun l’une des valeurs : thin (fin) | medium | thick | <longueur> • border-width : [thin | medium | thick | <longueur>]{1,4} regroupe les différentes propriétés de l’épaisseur (en partant d'en haut, dans le sens horaire) 25
  26. 26. La couleur de bordure • Les propriétés border−top−color, border−right−color, border−bottom−color, border−left−color prennent chacun l’une des valeurs :<couleur> | transparent • border-color : [<couleur> | transparent]{1,4} spécifie la couleur des quatre côtés (en partant d'en haut, dans le sens horaire) 26
  27. 27. Le style de bordure • Les propriétés border−top−style, border−right−style, border−bottom−style, border−left−style prennent chacun l’une des valeurs : none | dotted (pointillée) | dashed (tirets) | solid (pleine)| double (2 traits)| groove (gravée avec effet 3D) | ridge (relief avec effet 3D ) | inset (incrustée)| outset (extrudée). • border-style regroupe les différentes propriétés de l’épaisseur (en partant d'en haut, dans le sens horaire) 27
  28. 28. Les raccourcies de bordure • Les propriétés border−top, border−right, border−bottom, border−left spécifient chacune l’épaisseur, le style et la couleur d’un coté (dans l’ordre précité) . • La propriété border spécifie la même épaisseur, la même couleur et le même style pour les quatre côtés. 28
  29. 29. L’espacement • Le padding evalue l’espace entre le contenu de l'élément et sa bordure. • padding-top : <longueur> | <pourcentage> valeur de l’espacement haut • padding-right : <longueur> | <pourcentage> valeur de l’espacement droit • padding-bottom : <longueur> | <pourcentage> valeur de l’espacement bas • padding-left : <longueur> | <pourcentage> valeur de l’espacement gauche • padding : [<longueur> | <pourcentage>]{1,4} permet de regrouper les différentes propriétés de padding en une ligne Ex. h1 { padding: 1em 2em } 29
  30. 30. Le dimensionnement • width et height permettent de contrôler la largeur et la hauteur des contenus de type bloc et ceux remplacés • Elle prennent des unités absolues ou relatives • Par défaut (valeur auto) : – un bloc prend la largeur max dispo sauf s’il est positionné en mode absolu, fixe ou flottant où il s’adapte à son contenu ; – un bloc s’adapte à la hauteur de son contenu. – un contenu en-ligne remplacé prend sa taille intrinsèque • Pour redimensionner une image, jouer uniquement sur l'une des deux valeurs width ou height, pour laisser au navigateur le soin de déterminer l'autre valeur d'une manière à conserver le les proportions de l'image • NB : Si la hauteur d’un contenant n’est pas à auto, son contenu peut déborder. 30
  31. 31. Le positionnement • Le positionnement CSS permet de placer un contenu exactement où l'on veut dans la page • Il existe plusieurs schémas de positionnement en CSS : – un schéma de positionnement dans le flux normal ou positionnement courant (positionnement par défaut); – un "positionnement" (relatif), une variante du positionnement courant qui provoque un décalage; – trois schémas de positionnement qui sortent le contenu du flux (positionnement absolu, positionnement fixé et positionnement flottant). 31
  32. 32. Le positionnement dans le flux • Par défaut, les navigateurs affichent les contenus suivant l'ordre dans lequel ils apparaissent dans le code HTML: c’est le positionnement dans le flux normal. • Par défaut, les éléments de type bloc seront affichées dans une succession verticale (du haut vers le bas) et les éléments de type en-ligne, dans une succession horizontale (de la gauche vers la droite). 32 • Pour positionner un contenu dans le flux normal, utiliser les propriétés padding et margin. • Pour centrer horizontalement un bloc, fixer sa largeur et mettre à auto ses marges latérales
  33. 33. Le positionnement relatif • Le positionnement relatif (position : relative) laisse le contenu dans le flux normal, tout en le décalant par rapport à la ligne de base, à l'aide des propriétés top:<longueur>, right :<longueur>, bottom :<longueur> et left :<longueur>. • L’emplacement d’une boîte B qui suit une boîte A en position relative est calculé comme si A n'avait pas été déplacée 33 • Aussi, en attribuant à un contenu une position relative, il peut: o servir de référent à un contenu enfant positionné en absolu (à voir plus loin). o bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions de contenus (à voir plus loin)
  34. 34. Le positionnement flottant • Un contenu flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. • float : none empêche un contenu de flotter 34
  35. 35. Empêcher l’enveloppement Pour contrôler le comportement d’un bloc qui suit des éléments flottants dans le document, utiliser la propriété clear avec l’une des valeurs none, left, right ou both 35 x
  36. 36. Le positionnement absolu • Le positionnement absolu (position : absolute) retire totalement du flux le contenu concerné mais le positionne par rapport aux limites du premier ancêtre positionné. • En l'absence d'un ancêtre positionné, c'est l’espace de visualisation qui sert de référence. • Utiliser les propriétés top:<longueur>, right :<longueur> , bottom :<longueur> et left :<longueur>. • Attention: superposition possible (voir z-index) 36 x
  37. 37. Le positionnement fixe • Le positionnement fixe (position : fixed) retire totalement du flux le contenu concerné et le positionne par référence aux limites de l'espace de visualisation. • Un contenu en position fixed reste visible lors du défilement de la page. • Pour positionner le contenu, utiliser les propriétés top:<longueur>, right :<longueur> , bottom :<longueur> et left :<longueur>. • Attention: superposition possible (voir z-index) • Le positionnement fixe n'est implémenté dans MSIE qu'à partir que de la version 7. 37
  38. 38. Empilement • En plus de leurs positions horizontales et verticales, les contenus s’échelonnent le long d'un "axe−z" et s'empilent les unes au−dessus des autres dans la mise en forme. • Des contenus positionnés (relative, absolute ou fixed) dont les domaines d'affichage se superposent sont en principe affichés l'un sur l'autre dans l'ordre dans lequel ils ont été définis. • Cet ordre d’empilement peut être modifié grâce à la propriété z-index appliquée à chacun de ces contenus. • Les valeurs possibles de z-index sont des entiers (plus l'entier est grand, plus le contenu considéré sera au dessus). 38 x
  39. 39. L’héritage • Les feuilles de style respectent la structure hiérarchique des éléments XHTML. • Un élément de niveau supérieur (l'élément parent) est suivi par des éléments enfants qui peuvent hériter des styles, provenant de leurs éléments parents. • Exemple: Avec : div { color : white; background-color : black; } on aura :<div>Ceci est une division (texte blanc sur fond noir) contenant un <p>paragraphe de même style </p></div> • Certaines propriétés comme les marges, les espacements, les bordures et les dimensions ne sont pas héritées pour des raisons évidentes de lisibilités des documents. • Depuis CSS 2, la quasi-totalité des propriétés peut prendre la valeur inherit permettant de définir explicitement l’héritage de la valeur que possède la même propriété dans l’élément parent. 39

×