<html>

<!#########memento css#####################################################
style lié: un .css est appelé par l'élément link
style incorporé: : défini dans l'élément style de l'entête
style en ligne: informations placées directement dans le HTML ;
p.e p style="....." 

css se construit comme un html classique mais avec l'extension css
faire ensuite un lien vers ce fichier entre head et /head 

cela donnera: LINK rel=stylesheet HREF="nom de fichier.css"

une régle de style comprend deux parties
le sélecteur qui définit la portée de la régle
   il peut être formé de nom d'éléments, de classes ou d'identificateurs
	 les premiers tels quels, les seconds précédé d'un point, les derniers d'un dièse
une liste entre accolades de définitions de propriétés sous la forme de couples nom:valeur

insérer entre DIV et /DIV ce qui ne doit pas tenir compte du style en cours

le "!" dans style est destiné aux navigateurs non compatibles

L'attribut style="nom:valeur ; nom2:valeur2....." peut être inséré directement 
dans un élément

#############################################################################>
<style>
<!--
/*feuille de style "exercice" */

/*???
margin : 3% 
padding : 3%
*/

pre {font-family:verdana,arial,lucida console }
/*indique du texte à traiter comme ayant été préalablement mis en forme*/
/*l'attribut xml:space indique que les espaces doivent être préservés
cela permet d'afficher correctement un texte sous forme de tableau*/
pre.blue8 {font-family:verdana,arial,lucida console ; color:blue ; font-size:8pt ;font-weight:bold ; font-style:normal}
pre.navy9 {font-family:verdana,arial,lucida console ; color:navy ; font-size:9pt ;font-weight:bold;font-style:normal}
pre.georgia11 {font-family:georgia,verdana,arial,lucida console ; color:navy ; font-size:11pt ;font-weight:bold;font-style:normal}
pre.blanc {font-family:verdana,arial,lucida console ; color:white ; font-size:9pt ;font-weight:normal;font-style:normal}
span {color:navy;font-family:comic sans ms;font-weight:bold;
    font-size:10pt;text-align:center;}
 		
h6 {color:navy;font-family:comic sans ms;font-weight:bold;
    font-size:10pt;text-align:center;margin:0px}
h2 {color:blue;font-family:verdana,sans-serif;font-weight:bold;
    font-size:15pt;text-align:center;margin:0px;}
h3 {color:red;font-family:arial,comic sans ms;font-weight:bold;
    font-size:12pt;text-align:center;margin:0px}
h4 {color:red;font-family:comic sans ms,verdana;font-weight:bold;
    font-size:11pt;text-align:left;margin:15px}		
hr {text-align:center;height:5px;width:80%;background-color:gold;color:gold;margin:0px}
b.g9 {font-family:georgia,verdana,arial,lucida console ;color:blue ;font-size:9pt ;font-weight:bold;font-style:normal}
		
a {font-family: verdana,arial;font-size:9pt;font-weight:bold;text-decoration:none;color:red}
/*pour attribuer des styles différents à un même lien 
en fonction de son degré d'activation */
a:link{color:red;text-decoration:underline;}
a:visited{color:red;text-decoration:underline;}
a:active{color:red;text-decoration:underline;}
/*autre syntaxe
a:link.red {color:red}
a:link.yellow {color:yellow}
appelé par a class="red" ...*/
a.titre paragraphe {color:fuschia;}
.fondnoir {background-color:black;background-repeat:no-repeat}
.agauche {float:left;width:100;text-align:right;padding-right:2;
font-family:arial,georgia,verdana,lucida console ;color:blue ;font-size:8pt ;
font-weight:normal;font-style:normal;
padding-right:10;
padding-left:10;
border-style:solid;
border-width:0 1 0 0 ;  }
.adroite {float:left;text-align:left;width:500;
padding-right:10;
padding-left:10;
border-style:solid;
border-width:0 0 0 0 ;
font-family:georgia,verdana,arial,lucida console ;color:navy ;font-size:11pt ;
font-weight:bold;font-style:normal; }
/* on obtient deux colonnes séparées par un tiret vertical*/
/*définition de présentation pour les images */
/*img{
border: 1pxl solid;
margin-left: auto;
margin-right:auto;
padding:10px;
width:550px;   MOZILLA PREND PAS !!!!!!!!!! }
*/
/*height:100px;*/
/*text-align, color utilisable aussi sur les images...*/


body{
/*#######propriétés concernant le texte#######*/
text-align:justify; /*alignement du texte left,right,center,justify */
text-decoration:none; /*décoration, combinaisons possibles : 
none,underline,overline,line-through,blink */
text-transform:none; /*texte ou 1ere lettre en MAJ ou min : none,capitalize,
uppercase,lowercase */
vertical-align:none; /*décalage vertical, none,super(haut),sub(bas)...%? ;
mal implémenté? */
/*text-indent:????; Rentrée de première ligne ; quelles sont les valeurs ????*/
/*line-height:????; Controle de l'interligne ; unités de mesure habituelles*/
/*letter-spacing:????; espacement entre les lettres; unités de mesure habituelles
mal implémenté*/
/*word-spacing:????; espacement entre les mots ; unités de mesure habituelles ;
mal implémenté*/
/*text-shadow:????; ombrage du texte dans les différenrzs unités de mesure */
/*#######propriétés concernant les polices de caractère##########*/
font-family:verdana,sans-serif; /*nom police caractère*/
font-style:normal;  /*style police : normal,italic,oblique*/
font-weight:normal; /*épaisseur police: normal,bold,bolder,lighter,100(le plus léger),200..900(le plus gras)*/
font-size:medium; /*taille police: xx-small,x-small,small,medium,large,x-large,
xx-large,larger,smaller,une valeur absolue (p.e 11pt),un pourcentage (p.e 50%) */
/*font: 14px times, sans-serif; ça apporte quoi ????? */
/*exemple font:16pt/18pt,"helvetica",bold remplace font-size:.. line-height:.. 
font-family:... font-weight..*/
/*font-variant:????, Affichage normal ou en petites capitales*/
/*#######propriétés concernant l'arrière plan############*/
background-color: white;/*couleur fond ; elle peut être transparente*/
/*background-image:url("../images/quinquin1xxxxx.jpg")*/;/*image fond; url ou none */
/*l'url peut être externe : url(http://monsite.fr) */
/*background-attachment: fixed;*/ 
/*déplacement du décors de fond par rapport aux 
objets de la page : fixed,scroll*/
/*background-repeat: no-repeat; */
/*repeat,repeat-x,repeat-y,no-repeat*/
/* background-position:???? mise en page précise de l'image */
/* background regroupe en une seule propriétés les cinq précédentes */
/*#####propriétés concernant les blocs#####*/
/*tout élément html peut être considéré comme placé à l'intérieur d'un bloc
rectangulaire auquel sont attachées certaine proprétés .
un bloc est formé de l'imbrication de trois éléments entourés d'une bordure
bordure <margin <padding   <élément html>   padding> margin> bordure
margin :marge ; padding : ajustement ; par défaut ces deux valeurs sont nulles
on peut assembler plusieurs élément html dns un bloc via <div></div>  */
margin: 10px ;
/*raccourci pour préciser la largeur des quatres marges d'un coup, 
une valeur commune ou les quatres séparées par un espace ;
lecture: haut,droit,bas,gauche ;
sinon détailler margin-top,margin-bottom,margin-left,margin-right
valeur:
1em : hauteur d'un car. dans la police courante
1ex : hauteur du x dans la police courante
px: pixel, in: pouce, cm: cm, mm: mm, pt: point (1pt=1/72in), 
pc: pica (1pica=12pt);   
*/
padding: 10px ; /*ajustement, même syntaxe que margin */
border-style:none; /*style bordure: none,hidden,dotted(pointillé),dashed(tirets)
,solid,double,groove(en creux),ridge(en saillie),inset(3D avant),outset(3D arrière) */
border-color:blue; /*couleur de la bordure ; pour détailler: border-top-color etc...*/
border-width:medium; /* épaisseur bordure: thin,medium,thick ou une mesure */
/* définir autremernt épaisseur bordure:border (pour les 4 valeurs); border-top,
border-right,border-bottom,border-left  */
/*vu autre syntaxe : border-top-width border-top-color border-top-style etc */
/*
width largeur d'un bloc
height: hauteur d'un bloc
float: flottaison d'un bloc  ; sans feuille de style, seules les images flottent
les feuilles de style étendent cette particularité aux autres objets, p.e deux
blocs de texte, voir ex plus bas
*/
/*###########autres propriétés ????? ###############*/
/*position:justify; c'est du DHTML, voir annexe B DICO HTML */
/*color:#021609; couleur du texte en texte,hexa,décimal: blue,#4c41c6,
rgb(125,32,98), rgb(50%,25%,0%)*/
/*noms de couleur courants: aqua,black,blue,fuchsia,gray,green,
lime,maroon,navy,olive,purple,red,silver,teal,white,yellow */
}

div {font-family:arial,lucida console,verdana,comic sans ms ;text-align:left;
/*définition de présentation du texte, hors élément fixes */
/*
div#texte{
padding:0 2% 3em 2%;
color:#fff;
background-color:#333;
border:1px solid #666;
line-height:150%;
le centrage vaut pour l'image, voir "div#texte p" 
text-align:center; /*alignement du texte left,right,center,justify 
???? ça crée un paragraphe à gauche ?

*/
}
/*définition de présentation pour les titres de niveau 1 dans le texte */
/*
div#texte h1{
background: white;
padding: 1em 1em 1em 0;
color:#133f22;
letter-spacing: 0.5em;
font-family: times,sans serif;
font-size: x-large;
border: solid #133f22;
}
*/
/*div#texte p { text-align:left;} */


h1 { color:blue;text-align:center;font: 17px verdana, sans-serif;}
/*définition de présentation pour les mots en exergue dans les titre de niveau 1 */
h1 /em{
/* exergues contenus dans H1 */
font-weight:bold;
letter-spacing: 0.5m;
}
/*h3 {font:14pt verdana,arial,lucida console ; color:#0000FF}*/
/*séparer les sélecteurs par des virgules*/
/*h5*/
p.argent #argente {color:silver;font-family:comic sans ms;text-align:center;}
/*h6 {color:navy;font-family:comic sans ms;font-weight:bold;
    font-size:10pt;text-align:center;}
	*/	
 

/*divers*/
/*
display : rend certains éléments invisibles bien qu'il continue d'occuper de la
place dans la page
white-space : reproduit le résultat de <PRE> (espaces, tab et RC)
mal implémentées !
*/

table{align:center;background-color:none ;/*(navy)couleur de l'encadrement*/
margin:1px;/*init 15*/padding:0px;/*init rien*/ 
/*
border="épaisseur en pixel"
width="pixel ou % de la largeur du NAVIGATEUR"
cellpadding="pixels" marge entre le contenu et le bord de la cellule
cellspacing="pixels" espacement des cellules
frame="affichage bordure extérieure du tableau"
   valeurs pour frame:
	 above    bordure supérieure
	 below    bordure inférieure
	 border   bordure compléte
	 box      id
	 hsides   bordures à gauche et à droite
	 lhs      bordure à gauche
	 rhs      bordure à droite
	 vsides   bordure supérieure et inférieure
	 void     aucune bordure
rules="quadrillage"
   valeurs pour rules : 
	 all       quadrillage complet
	 cols      quadrillage par colonnes seulement
	 groups    quadrillage des entités comme  thead tbody tffot et colgroup
	 none      aucun quadrillage
	 rows      quadrillage par lignes uniquement
summary="description du contenu et de la structure"
détails syntaxe tableau: campus p102

VU DANS XML
propriétés de tableau
border-collapse: collapse|separate bordure dessinés pour tous les cotés de chaque cellule ou
uniquement pour les cotés du tableau
caption-side: top|bottom   spécifie où la légende du tableau doit apparaitre
cell-spacing:none|valeur  définit l'espacement entre les cellules
column-span:valeur nb de colonnes sur lequel une cellule devra s'étendre
row-span: valeur nb de ligne sur lequel une cellule devra s'étendre
table-layout:auto|fixed  détermine si l'affichage du tableau doit être 
controlé par le navigateur où s'il est fixe avec un ensemble de colonnes et lignes prédéfini
*/


td{
/*#######propriétés concernant le texte#######*/
text-align:left; /*alignement du texte left,right,center,justify */
text-decoration:none;
/*#######propriétés concernant les polices de caractère##########*/
font-family:verdana,sans-serif; /*nom police caractère*/
font-style:normal;  /*style police : normal,italic,oblique*/
font-weight:normal; /*épaisseur police: normal,bold,bolder,lighter,100(le plus léger),200..900(le plus gras)*/
font-size:medium; /*taille police: xx-small,x-small,small,medium,large,x-large,
xx-large,larger,smaller,une valeur absolue (p.e 11pt),un pourcentage (p.e 50%) */
/*font: 14px times, sans-serif; ça apporte quoi ????? */
/*#######propriétés concernant l'arrière plan############*/
background-color: white;/*couleur fond ; elle peut être transparente*/
/*#####propriétés concernant les blocs#####*/
/*tout élément html peut être considéré comme placé à l'intérieur d'un bloc
rectangulaire auquel sont attachées certaine proprétés .
un bloc est formé de l'imbrication de trois éléments entourés d'une bordure
bordure <margin <padding   <élément html>   padding> margin> bordure
margin :marge ; padding : ajustement ; par défaut ces deux valeurs sont nulles
on peut assembler plusieurs élément html dns un bloc via <div></div>  */
margin-left:10px;margin-right:0px;margin-top:0px;margin-bottom:0px;
padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;
/*margin: 5px ;*/
/*raccourci pour préciser la largeur des quatres marges d'un coup, 
une valeur commune ou les quatres séparées par un espace ;
lecture: haut,droit,bas,gauche ;
sinon détailler margin-top,margin-bottom,margin-left,margin-right
valeur:
1em : hauteur d'un car. dans la police courante
1ex : hauteur du x dans la police courante
px: pixel, in: pouce, cm: cm, mm: mm, pt: point (1pt=1/72in), 
pc: pica (1pica=12pt);   
*/
/*padding: 5px*/ ; /*ajustement, même syntaxe que margin */
border-style:solid; /*style bordure: none,hidden,dotted(pointillé),dashed(tirets)
,solid,double,groove(en creux),ridge(en saillie),inset(3D avant),outset(3D arrière) */
border-color:black; /*couleur de la bordure ; pour détailler: border-top-color etc...*/
/*border-width:2px;*/ 
/* épaisseur bordure: thin,medium,thick ou une mesure */
/* définir autremernt épaisseur bordure:border (pour les 4 valeurs); border-top,
border-right,border-bottom,border-left  */
border-left-width:0px;
border-right-width:0px;
border-top-width:1px;
border-bottom-width:1px;
/*vu autre syntaxe : border-top-width etc C'EST LA BONNE!*/
/*
width largeur d'un bloc
height: hauteur d'un bloc
float: flottaison d'un bloc  ; sans feuille de style, seules les images flottent
les feuilles de style étendent cette particularité aux autres objets, p.e deux
blocs de texte, voir ex plus bas
*/
}


u {color:navy ; font-size:10pt ;font-weight:bold ; font-style:normal}

ul li {
margin-top:1cm
}
/*héritage par défaut ? pour ul li ; sinon mot clé css2 inherit force 
un élément à prendre les attributs de son élément parent */

/*id juste pour les items de la liste principale*/
ul > li {
margin-top: 1cm
}

/*noms de couleur courants: aqua,black,blue,fuchsia,gray,green,
lime,maroon,navy,olive,purple,red,silver,teal,white,yellow */

/*Attributs CSS2 de positionnement dans les feuilles de style

position: un élément peut être statique,positionné de manière absolue ou relative
top:décalage par rapport au haut du conteneur (valeurs nég. possible)
left:décalage par rapport à gauche du conteneur(id)
bottom:id par rapport bas
right:id par rapport droite
clip:rect(x1,y1,x2,y2) : coordonnées du rectangle qui circonscrit le contenu
overflow:si contenu déborde,: visible ou masqué, automatique ou défilant
visibility: affiche ou non un contenu
z-index: superpose des éléments dans la page
*/

/*attributs XHTML pouvant prendre l'attribut style
balises physiques:tt i b u s strike big small sub sup
balises logiques:em strong dfn code samp kbd var cite abbr acronym ins del q
balises de blocs: body br blockquote address div hr center h1à6 pre span p
balises de liste: ul ol li dl dt dd
balises images et de liaison: img map a area
balise de formulaire: form label input select optgroup option textarea 
fieldset legend button
balises de tableau: table caption colgroup col thead tbody tfoot tr th td
*/
/*utiliser l'élément span(fusion) ou div(division) pour mettre en forme 
une partie du document en dehors de balises spécifiques
seule différence: div entraine un saut de page ; pas span*/




/**************************IDENTIFICATEURS*************************/
/*exemple identificateur;  un identificateur est toujours unique (<> classe)
un identificateur modifie localement un élément */
#soustitre {font-size:small;}
/*sera appelé p.e par: <H2 id="soustitre">*/

/*CLASSES *********************************/
/*exemple float*/
xxx.agauche {
float:left;
width:70;
text-align:right;
font-size:10pt;
padding-right:10 }
xxx.adroite {
float:right;
text-align:justify;
padding-right:10;
padding-left:10;
border-style:solid;
border-width:0 0 0 1  }
/* on obtient deux colonnes séparées par un tiret vertical*/
/* sans css , cela pourrait se faire avec <TABLE> , mais avec pb pour le trait vertical*/
/* .xxx PASSENT PAS AVEC MOZILLA ou erreur dans le css ? 
définir à la place p.e pre.blue8  
LE SELECTEUR CLASS DOIT ETRE PREDEFINI AVEC SON ELEMENT 
A LA DIFFERENCE DES IDENTIFIANTS
.purple12 {font-family:verdana,arial,lucida console ; color:purple ; font-size:12pt ;font-weight:bold ; font-style:normal}
.olive11  {font-family:verdana,arial,lucida console ; color:olive ; font-size:11pt ;font-weight:bold ; font-style:normal }
.black12 {color:black ;font-size:12pt ;font-weight:bold ; font-style:normal} 
.navy10 {font-family:verdana,arial,lucida console ; color:navy ; font-size:10pt ;font-weight:bold ; font-style:normal} 
.blue8 {font-family:verdana,arial,lucida console ; color:blue ; font-size:8pt ;font-weight:bold ; font-style:normal}
.vert8 {font-family:arial,verdana,lucida console ; color:darkgreen ; font-size:8pt ;font-weight:bold ; font-style:normal}
.blue10 {color:blue ; font-size:10pt ;font-weight:bold ; font-style:normal}
.navy12 {font-family:comic sans ms,arial ; font-weight:normal ; color:navy ; font-size:12pt}
*/
-->
</style>

</html>