Feuilles de styles

Généralités

• Netscape 6
• Internet Explorer 5.5
• Opera 4

Inclusion dans une page HTML

• Dans une balise, avec l'attribut STYLE
  <B STYLE="color:silver;"> ce qui donne exemple
• Dans l'en-tête, après la balise TITLE :

  <STYLE TYPE="text/css">
  bla bla feuilles de style
  </STYLE>
  

  Commentaires HTML pour les navigateurs non compatibles

  <STYLE TYPE="text/css">
  <!--
  bla bla feuilles de style
  //-->
  </STYLE>
  

• fichier externe
  dans un fichier texte .css (pas de balise STYLE)
  puis dans l'en-tête du fichier HTML : <LINK REL="stylesheet" TYPE="text/css" HREF="bla.css">

Mise en oeuvre

• sélecteurs de types :

  H1 {
  font-family: Wide Latin;
  }
  
  H1,H2,H3 {
  	 font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
  	 color: red;
  	 }
  
  P {
    color: blue;
  }
  

• sélécteurs d'attributs (CLASS ou ID)

  P.cadre {
  	bla bla
  	}
  

  (classe de paragraphe)

  utilisation :

  <P CLASS="cadre">
  un paragraphe...
  </P>
  

  #p1 { color: blue; }
  

  (identifiant d'un unique paragraphe)

  <P ID="p1">
  

  un paragraphe...
• par contexte

  BODY {
       margin: 0.5cm;
  }
  
  UL LI { font-size: small}
  
  UL LI LI { font-size: x_small}
  

  héritage d'un ascendant
• Prof H1 { color: red; }
  héritage de l'ascendant direct Body ~P { color: red; }
• par pseudo-classes :

  A:link
  A:hover		(passage de souris)
  A:active
  A:visited	prioritaire sur les précédents... ne pas
  		utiliser mais préférer le VLINK de la balise BODY
  
  P:first-line
  P:first-letter
  
  p.ecolo:link {color: lime }
  p.ecolo:visited {color: olive }
  

• mise en page des listes, changement de la puce
• noms génériques de familles de polices :

       serif	(Times, etc.)
       sans-serif (Arial, Helvetica, etc.)
       cursive
       monospace	(machine à écrire comme Courrier)
       fantasy
  

• DIV et SPAN

Liste exhaustive

• unités de mesure : px, mm, cm, in, pt, pc, em (hauteur des majuscules de la police en cours), en (hauteur des minuscules de la police en cours)
• propriétés de police
  • font-family
  • font-size
  • font-style (normal, italic, oblique)
  • font-variant (normal, small-caps)
  • font-weight (de 100 à 900, normal, bold)
• mise en forme du texte
  • word-spacing
  • letter-spacing
  • text-decoration (none, underline, overline, line-through, blink)
  • text-transform (none, uppercase, lowercase, capitalize)
  Pour faire disparaître le soulignement des liens :

    A:hover {
  	  text-decoration: none;
  	  }
   

• agencement du texte
  • display (block, inline)
  • text-align (left, center, right, justify)
  • text-indent (taille du retrait de première ligne)
  • line-height (hauteur de ligne)
  • vertical-align (baseline, super, top, text-top, middle, text-bottom bottom, sub)
• mise en forme de listes
  • list-style-type (decimal, lower-alpha, upper-alpha, lower-roman, upper-roman) (disc, circle, square)
  • list-style-image (url(nom de fichier image))
  • list-style-position (outside, inside)
• couleurs et arrière-plans
  • color (rgb(0,0,255))
  • background
  • background-image (url, ou uri ?)
  • background-repeat (repeat, repeat-x, repeat-y, no-repeat)
  • background-attachement (scroll, fixed)
  • background-position
• retraits extérieurs et intérieurs
  margin (retrait extérieur) et padding (retrait intérieur)
  • margin
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • padding
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
• cadres
  • border
  • border-top
  • border-bottom
  • border-left
  • border-right
  • border-style (solid, double, groove, ridge, inset, outset, dotted, dashed)
  • border-style-top
  • border-style-bottom
  • border-style-left
  • border-style-right
  • border-width
  • border-color
• positionnement absolu des éléments
  Balises div et span
  • position (static, absolute, relative)
  • top
  • left
  • width
  • height
  • visibility (visible, hidden)
  • z-index
• pseudo-classes pour liens hypertextes
  • A:link
  • A:hover (passage de souris)
  • A:active
  • A:visited prioritaire sur les précédents... ne pas utiliser mais préférer le VLINK de la balise BODY
  définir mise en forme (text-decoration), couleur (color), etc.

Exemple