STYLES CSS by bzs12927

VIEWS: 116 PAGES: 26

									              STYLES: CSS
• Dans une balise, avec l'attribut STYLE=
  – "argument:valeur; … "
• Avec la balise <STYLE
• Dans un fichier de styles nom.css
  – Définition d'une classe: .nomclasse
  – Définition d'un identifiant: #nomidentifiant
  – Style pour une balise
STYLE dans une balise
STYLE dans une balise
             Balise STYLE
• <STYLE
  – TYPE="text/css"
• >
• Définitions de styles
• </STYLE>
         Définition de style
– balise ou balise1,balise2, ...
– balise.classe
– balise:pseudoélément
– .classe
– #identifiant
– #identifiant balise
– #identifiant balise.classe
   {argument:valeur; … }
Balise STYLE
STYLE: surbrillance  exemple
STYLE  exemple
          Fichier de style .CSS
<link rel="stylesheet" type="text/css"
       href="fichier.css">
       dans la partie HEAD, pour indiquer
       quel fichier de style doit être utilisé

Le fichier .CSS contient des définitions
  de style comme dans la balise STYLE
Fichier de style .CSS
      Arguments: styles de police


•   font-family nom ou famille de police
•   font-style  normal/italic/oblique
•   font-weight normal/bold/bolder/lighter/valeur
•   font-size   taille (pt/in/cm/px/%)
        Arguments: styles de texte

•   text-align        left/center/right/justify
•   text-indent       valeur (in/cm/px)
•   text-decoration underline/overline/line-through
•   text-transform uppercase/lowercase/capitalize
•   color             #RRGGBB/couleur/rgb(,,)
      Arguments: styles de texte

•   word-spacing     valeur(pt/in/cm/px/%)
•   letter-spacing   valeur(pt/in/cm/px/%)
•   line-height      valeur(pt/in/cm/px/%)
•   width            valeur(pt/in/cm/px/%)
•   height           valeur(pt/in/cm/px/%)
         Arguments: arrière-plans

•   background-color    #RRGGBB/couleur/rgb(,,)
•   background-image url(fichierimage)
•   background-repeat     repeat/no-repeat
•   background-attachment scroll/fixed
•   background-position left/center/right/valeur
                       top/center/bottom/valeur
Arguments: bordures et enrobages
•   border-top-width        thin/medium/thick/valeur
•   border-right-widththin/medium/thick/valeur
•   border-botton-width     thin/medium/thick/valeur
•   border-left-width       thin/medium/thick/valeur
•   border-color            #RRGGBB/couleur/rgb(,,)
•   border-style      none/solid/dotted/double/dashed/
                       groove/ridge/inset/outset/hidden
•   padding-top              valeur(pt/in/cm/px/%)
•   padding-right            valeur(pt/in/cm/px/%)
•   padding-botton           valeur(pt/in/cm/px/%)
•   padding-left             valeur(pt/in/cm/px/%)
            Arguments: listes

• list-style-typesquare/disc/circle/decimal/
          lower-roman/upper-roman/
          lower-alpha/upper-alpha
• list-style-image url(fichierimage)
• list-style-position inside/outside
               Arguments: tables
•   caption-side position titre(top,bottom,left,right)
•   table-layout largeur table/col(fixed/auto)
•   empty-cells show/collapse
•   border-collapse separate/collapse
•   border-spacing espace bordure/quadrillage
                 Arguments: divers
•   position            static/absolute/relative
•   bottom              valeur
•   top                 valeur
•   left                valeur
•   right               valeur
•   visibility          visible/hidden/collapse
•   z-index             valeur (ordre aff.)
              Pseudo-éléments
•   P:first-line     1ère ligne paragraphe
•   P:first-letter   1ère lettre paragraphe
•   :before          argument inséré avant
•   :after           argument inséré après
•   A:link           lien
•   A:visited        lien déjà visité
•   A:hover          lien sous souris
•   A:active         lien cliqué
STYLE  exemple (1)
STYLE  exemple (1)
           STYLE  exemple (2)
• #td11{font-style=italic ; font-family=Arial ; border-style: dotted ;
  border-width: thick ; border-color: yellow}
• #td21{font-style=italic ; font-family=Arial ; border-style: dashed ;
  border-width: thick ; border-color: red}
• #td31{font-style=italic ; font-family=Arial ; border-style: double ;
  border-width: thick ; border-color: blue}
• #td41{font-style=italic ; font-family=Arial ; border-style: groove ;
  border-width: ridge; border-color: pink}
• #td51{font-style=italic ; font-family=Arial ; border-style: groove ;
  border-width: inset; border-color: violet}
• #td61{font-style=italic ; font-family=Arial ; border-style: groove ;
  border-width: outset; border-color: lime}
• #HTML{font-color="red";background-color="lime";text-
  align="center"}
• #Math{font-color="violet";background-color="yellow";text-
  align="center"}
STYLE  exemple (2)
STYLE  exemple (3)
               Syntaxe des DTD
                  En HTML
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
   Validation pages HTML: W3
• Site
  – http://validator.w3.org
• DOCTYPE obligatoire
  – <!DOCTYPE HTML PUBLIC "-//W3C//DTD
    HTML 4.01 Transitional//EN"
    http://www.w3.org/TR/html4/loose.dtd>
• TITLE dans HEAD
• <META http-equiv="Content-Type"
  charset=iso-8859-1">

								
To top