<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%

h3 {color:blue;font-family:comic sans ms,arial;font-weight:normal;
    font-size:13pt;text-align:center;margin:0px}
h4 {color:red;font-family: comic sans ms,verdana;font-weight:bold;
    font-size:12pt;text-align:center;margin:15px}		

bodyxx{

/*#######propriétés concernant le texte#######*/
text-align:center; /*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: blue;/*couleur fond ; elle peut être transparente*/
background-image:url("../images/quinquin1.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: 25px ;
/*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: 25px ; /*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 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 */
}

/*exemple float*/
.agauche {
float:left;
width:70;
text-align:right;
font-size:10pt;
padding-right:10 }
.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*/

/*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 */
}

h1{ 
color: #c7f2a4;
text-align:center;
font: 17px verdana, sans-serif;
}

/*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">


/*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;
}

/*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;
}

div#texte p { 
text-align:left;
}

h5 {color:silver;font-family:comic sans ms;text-align:center;}
h1,h2 { color:blue;}
h6 {color:silver;font-family:comic sans ms;text-align:center;
    font-weight:bold;height:30px;}
h2 {
font-family:verdana,sans-serif;
font-weight:bold;
color: #fff;
}
span {color:green;font-family:comic sans ms;text-align:center;
    font-weight:bold;height:12px;}
hr {text-align:center;color:gold;height:5px;width:80%;}

/*définition de présentation pour les images */
img{
/*border: 1pxl solid;*/
/*margin-left: auto;
margin-right:auto;*/
padding:0px;
width:70px;
margin:0px;border:none;padding:0px;
/*height:100px;*/
/*text-align, color utilisable aussi sur les images...*/
}

/*définition de présentation pour les mots en exergue dans les paragraphes */
p /em{
font-size:12;
text-decoration: underline;
}

/*faire des classes d'élément ; on metta <p class="entete">*/
p.entete{
margin-left: 2cm ;
font-weight: bold; 
}
p.exemple {
border-left: solid blue 2px;
}
/*pour conserver p.e une ligne verticale gauche,insérer les <p..> entre une
balise <div> </div> */
div.exemple {border-left: solid blue 2px;}  

pre.blue8 {font-family:verdana,arial,lucida console ; color:blue ; font-size:8pt ;font-weight:bold ; font-style:normal}


a {font-family: verdana,arial;font-size:8pt;font-weight:bold;text-decoration:none;color:gold}

/*pour attribuer des styles différents à un même lien 
en fonction de son degré d'activation */
/*a:link{color:blue;}
a:visited{color red;}
a:active{color:green;}*/ 
/*mélange IE MOZILLA !*/ 

/*autre syntaxe
a:link.red {color:red}
a:link.yellow {color:yellow}
appelé par a class="red" ...*/



/* tout cequi est en italique à l'intérieur d'un élément P sera rouge */
P I {color:red;}

/*décrire un sous élément d'un élément html, p.e tous les items 
d'une liste sont décalé d'un cm*/
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
}

/*propriétés spécifiques aux listes*/
/*
list-style-type : définit le type de repère qui sera affiché à gauche 
de chaque article
list-type-position : précise si le repère des articles sera en retrait négatif
ou aligné avec la marge gauche
list-type-image : permet de remplacer le repère standard par une image appropriée
list-style : une propriété pour les trois ci-dessus
*/

/*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 !
*/

/*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*/


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: navy;/*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
*/
/*noms de couleur courants: aqua,black,blue,fuchsia,gray,green,
lime,maroon,navy,olive,purple,red,silver,teal,white,yellow */
}
table {
margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;
}
xtable xtr{
text-align:left;  
text-decoration:none;
font-family:verdana,sans-serif;  
font-style:normal;   
font-weight:normal;  
font-size:medium;  
background-color: white;
margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;
padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;
border-style:solid; 
border-color:blue; 
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-bottom-width:0px;
}

/*exemple float*/
.agauche {
float:left;
width:70;
text-align:right;
font-size:10pt;
padding-right:10 }
.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*/


-->
</style>

</html>