/*une règle CSS doit avoir un ordre, de l'intérieur vers l'extérieur* */

/* Balise pour écrire du commentaire dans les feuilles de style*/

<style type="text/css"> 
/*le caractère utilisé pour ouvrir et fermer les caractéristiques est une accolade et pas une paranthèse*/
		
	body {
		/*les propriétes s'appliquent au corps de la page*/
		/*je défini la marge de gauche*/
		margin-left:10px;
		/*je defini la marge du haut*/
		margin-top:10px;
		/*je defini pour la police la taille, la fonte et la famille au cas où la police n'existerait pas*/
		font:18px Verdanna, sans-serif, Arial;
		/*tous les éléments sont encadrés d'une boite*/
		box-sizing:border-box;
		color:#0000ff;
	}
	
	header {
		/*style de l'entête*/
		/*bleu ciel*/
		background-color:skyblue;
		/*un écart autour de l'entête*/
		padding:20px;
		/*centrage du texte*/
		text-align:center;
		/*taille du caractère*/
		font-size:35px;
		/*couleur de caractère*/
		color:white;
	}
	/*La première lettre des paragraphes p seront agrandies*/
	p :first-letter {
		font-size :150% ;
		}
	/*mise en forme des liens grace aux pseudos classs link, active, visited et hover*/
	/*mise forme des liens non visités*/
	a:link {color:mediumblue;}
	/*mise en forme des liens visité*/
	a:visited {color:magenta;}
	/*Xmise en fomre des liens au passage de la souris - suppression du soulignement et coulleur orange*/
	a:hover {
		text-decoration:none;
		color:orange;
	}
	/*Xmise en fomre des liens lorsque l'utilisateur garde le cic activé sur le lien*/	
	a:active {color:crimson;}

	h1 { margin:5px;}
	p {
		border: 1px solid rgb(200,200,200);
		background: rgb(234,234,234);
		padding:5px;
		margin:5px;
	}
	
	/*Les sélecteur de descendance*/
	p.note {
		background:yellow;
		border: 1px solid gold;
	}
	span.code { 
		font-family:monospace;
		padding: 0 10px;
	}
	/*ce sélecteur de déscendance sélectionne les éléments <span> avec des noms de classe 'code', mais uniquement lorsqu'il s'agit des déscendant des éléments <p>.
	cela signifie que si le document contient un élémne <span>avec un nom de classe 'code' qui est le fils, petit fils ou arrière petit fils d'un élement <p> on
	lui attribuera un fond jaune*/
	p span.code {
		background:yellow;
	}
	/*Deux sélecteurs de type et de classe figurent dans un sélecteur de descendance. Dans ce sélecteur tous les éléments <p> du document avec 
	un nom de classe 'note' qui possèdent les éléments descendant <span> avec un nom de claaasse 'code', recoivent des arrière plan jaune clair
	*/
	p.note span.code {
		background:lightyellow;
	}
	/*pour ne pas créer de conflit avec les definitions des style h1 et p existants, je crée un id (#selecteuradjacence) pour gérer ce style*/
	p#selecteuradjacence {padding:5px;}
	h1#selecteuradjacence  + p#selecteuradjacence {
		background:lightyellow;
		color: darkkhaki;
		border: 1px solid darkkhaki;
	}
	 h1#selecteuradjacence + p#selecteuradjacence + p#selecteuradjacence {
		background:yellowgreen;
		color:green;
		border: 1px solid green;
	}
/*-------------------exemples du livre CSS et HTML de Francis Draillard---------------------------------------------------------------------------------------*/	
/*la mise en fome des caractères*/
	/*je met une couleur de fond et de bordue au bloc*/
	.exemplesdulivre {background-color:#f2ff91;}
	.exemplesdulivre {border: 3px solid #d68c83}
	
	/*je détermine les familles de polices à utiliser*/
	.exemplesdulivre h3 {font-family: "Courrier New", monospace;}
	.exemplesdulivre p {font-family: Arial, Verdana, sans-serif;}
	/*je détermine les tailles de polices*/
	.exemplesdulivre h1 {font-dize:150%;}
	.exemplesdulivre p {font-size:15px;}
	/*Je détermine les couleurs pour les objets de la claas exempledulivre hors id défini*/
	.exemplesdulivre a {color: rgb(30%,80%,20%);}
	.exemplesdulivre em {color:green;}
	/*je détermine les decorations pour les objets hors class ou id défini*/
	.exemplesdulivre a:hover {text-decoration:none;}
	.exemplesdulivre h1 {text-decoration:underline overline;}
	/*proriéte de texte transform*/
	.exemplesdulivre h1 {text-transform: uppercase;} /*toutes les lettres en majuscule*/
	/*capitalize= 1ere lettre en majuscule - lowercase=tout en minuscule - uppercase= tout en majuscule - none=écriture standard*/
	.exemplesdulivre h3 {text-transform: capitalize;}
	/*propriété petites majuscules font-variant*/
	.exemplesdulivre h2 {font-variant: small-caps;}
	/*propriétés font qui peuvent être regouées ensembles exemple avec h4*/
	.exemplesdulivre h4 {font: bold small-caps 1.2em Arial, Verdana, sans-serif;}
	/*propriéte couleur de fond*/
	.exemplesdulivre strong {background-color:orange}
	.exemplesdulivre h3 {background-color: #00ffff;}
	/*retrait de la première ligne par rapport au reste du texte*/
	.exemplesdulivre p {text-indent : -10px ; padding-left : 20px ;}
	/*propriété du menu de navigation*/
	.exemplesdulivre nav {
		/*emplacement dans la page*/
		float:left;
		/*largeur de la colonne par rapport à la page*/
		width:12%;
		/*hauteur de la colonne*/
		height:270px;
		/*couleur de fond de la colonne*/
		background:#D8FFF2;
		/*marge externe du bloc de navigation*/
		margin:0px 10px 10px 5px;
		/*écartement autour de la colonne*/
		padding:10px;
		/*style de la bordure epaisseur (facultatif) style (obligatoire) et couleur (facultatif*/
		border:thick outset;
		}
	.exemplesdulivre li {list-style: circle inside;}
	/*Espacement entre les lien définis par l'attribut de hauteur des liens*/
	.exemplesdulivre a {line-height:2em;}
	/*couleur du texte des liens*/
	.exemplesdulivre a {color:Black}
	
	/*Je positionne le titre pour ensuite me servir de cette position pour placer le tableau*/
	div#positiondesblocs {position: relative;}
	#positiondesblocs {background-color: #beffb5;}
	#positiondesblocs {height:350px;}
	/* style pour le tableau*/
	/*.exemplesdulivre table {display:inline-table;}*/
	/*je positionne le tableau qui va se caler sur le bloc parent div id="titreposition" */ 
	.exemplesdulivre table {position:absolute; top:5px; left:65%;}
	/*largeur du tableau par rapport à la page*/
	.exemplesdulivre table {width:25%;}
	/*marges externes autour du tableau*/
	.exemplesdulivre table { margin:1px;}
	/*marges internes autour du tableau*/
	.exemplesdulivre table { padding:10px;}	
	/*mise en forme du tableau*/
	.exemplesdulivre table, tr {
		border : solid 3px red;
		table-layout:fixed;
		border-collapse: separate;
		border-spacing: 2px 5px;
		}
	
	/*propriétés font regroupés ensembles dans la feuille de style*/
	#note1 {font : italic 180% Garamond, serif ;}
	#note1 {background-color: #C0C0C0;}
	#note1 {text-align:right;}
	/*defini lespacement entre les lettres*/
	#pluslarge {letter-spacing : 0.5em ;}
	#moinslarge {letter-spacing :-1px ;}
	/*défini l'espacement entre les mots*/
	#grandsespaces {word-spacing : 0.5em ;}
	#petitsespaces {word-spacing :-2px ;}
	/*modification du curseur de la souris*/
	#curseuraide { cursor :help ;}
	/*propriétes border-style*/
	#note1 {border-style : dashed dotted solid double ;	}
	#titretableau {font : italic 120% Garamond, serif ;}
	#titretableau {border-style : dashed dotted solid double ;	}
	
	/*position du conteneur dans la page*/
	/*#imadearriereplan {float:right;}*/
	/*j'encadre le bloc pour mieux le repérer à l'écran*/
	#imagearriereplan {border:4px solid #d505ff;}
	/*largeur du bloc par rapport à la page*/
	#imagearriereplan {width:45%;}	
	/*définition de l'image d'arriere plan du pied de page	
	#imagearriereplan {background-image : url('file://///C:/Users/pasca/OneDrive/Favoris/Portail_Perso/images/vitres.jpg') ;}*/
		/*pour la version en ligne l'url est diiférente*/
	#imagearriereplan {	background-image: url('/images/vitres.jpg');}
	/*je défini la non répétion et la postion*/
	#imagearriereplan {	background-repeat: repeat;}
	#imagearriereplan {	background-position: left center;}
	/*j'affiche une barre de défilement pour le bloc p*/
	p#imagearriereplan {overflow:scroll;}
/*------------------------------------------------------------------------------------------------------*/	
/*mise en forme de la premiree lettre et de la première ligne, ce sont des pseudo-élémnent associés à des selecteur*/
	p.quote {
		color:darkblue;
		border: 1px solid lightblue;
		padding: 2px;
		font: 14px sans-serif;
		width:40%;
	}
	p.quote:first-letter {
		background:darkblue;
		color:white;
		font: 55px "Monotype Corsiva";
		float:left;
		margin-right:5px;
	}
	p.quote:first-line {
		font-weight : bold;
		letter-spacing:3px;
	}
	p.byline {
		width:40%;
		text-align:right;
		font-style: italic;
		font-size:10px;
		border:none;
	}
	
/*------------------------------------------------------------------------------------------------------*/	

/*mise en style de la zone  Sélécteur de class et ID*/
	p.container {
		border: 1px solid rgb(29,179,82);
		background: rgb(202, 222, 245);
		padding:10px;
		width:245px;
		height:245px;
		float:left;
		margin:10px;
	}
	p.box {
		border: 1px solid rgb(69,199,115);
		background: rgb(164,201, 245);
	}
	p.tank {
		border: 1px solid rgb(107, 214, 145);
		background: rgb(124, 180, 245);
		clear: left;
	}
	p#container-1234 {
		border: 1px solid rgb(154, 232, 181);
		background: rgb(82, 157,245);
	}
/*------------------------------------------------------------------------------------------------------*/	
/*création et style de la colonne de gauche qui contiendra un menu de navigation*/
	.pagedeuxcolonnes {border:4px solid #bc63ff;}
	.pagedeuxcolonnes header {
		/*style de l'entête*/
		/*bleu ciel*/
		background-color:#bc63ff;
		/*un écart autour de l'entête*/
		padding:0px;
		/*centrage du texte*/
		text-align:left;
		/*taille du caractère*/
		font-size:16px;
		/*couleur de caractère*/
		color:white;
		/*pour l'oliger à ce positionner en dessous de la section Class et ID*/
		/*sinon il se positionne à la suite des paragraphe Class et ID (donc à leur droite)*/
		clear: left;
	}
	.pagedeuxcolonnes nav {
		/*emplacement dans la page*/
		float:left;
		/*largeur de la colonne par rapport à la page*/
		width:15%;
		/*hauteur de la colonne*/
		height:400px;
		/*couleur de fond de la colonne*/
		background:#ccc;
		/*écartement autour de la colonne*/
		padding:20px;
	}
	/*type d liste dans la colonne de gauche*/
	.pagedeuxcolonnes nav ul{
		/*la liste possède une puce carrée*/
		list-style-type:square;
		/*écart de gauche*/
		padding-left:10px;
		/*un interligne de 2*/
		line-height:2;
	}
	.pagedeuxcolonnes li{
		/*couleur de la puce en rouge*/
		color:red;
	}
	.pagedeuxcolonnes a{
		/*couleur du tecte dans la liste*/
		color:black;
		/*texte simple, pas de soulignement de texte, de caractères barrés etc*/
		text-decoration:none;
	}
	
	/*création et style de la 2ème colonne à partir de la gauche*/
	.pagedeuxcolonnes article {
		/*positionnement dans la page par rapport à la colonne de gauche existante*/
		float:left;
		/*écartement autour de l'article*/
		padding:20px;
		/*largeur de la 2ème colonne (la 1ère étant de 20%)*/
		width:80%;
		/*couleur de fond*/
		background-color: #f1f1f1;
		/*hauteur de la colonne*/
		height:400px;
	}
	footer{
		/*les styles pour le pied de page*/
		/*couleur de bordure*/
		border: 3px solid #91b804;
		/*couleur de fond*/
		background-color:#c9ff05;
		/*ecartement*/
		padding:10px;
		/*centrage du contenu*/
		text-align:center;
		/*couleur du texte*/
		color:black;
		/*annule les effets de flottement*/
		clear:both;
	}

/*création et style d'un menu de navigation horizontal*/
	.menuhorizontalcadre {position:relative;}
	.menuhorizontalencadre header {
		/*style de l'entête*/
		/*bleu ciel*/
		background-color:aliceblue;
		/*un écart autour de l'entête*/
		padding:10px;
		/*centrage du texte*/
		text-align:center;
		/*taille du caractère*/
		font-size:35px;
		/*couleur de caractère*/
		color:gray;
	}		
	.menuhorizontalencadre nav {
		/*je defini la marge du haut*/
		margin-top:70px;
		text-align:left;
		}
	.menuhorizontalencadre a {
		font-family:serif;
		font-size:25px;
		/*je place une bordure*/
		border:3px solid gray;
		background-color:aliceblue;
		/*je défini un écart autour du menu*/
		padding:5px;
		/*texte simple, pas de soulignement de texte, de caractères barrés etc*/
		text-decoration:none;
	}
	.menuhorizontalencadre a:active{
		/*quand je clique sur l'element du menu son fond se met en bleu*/
		background:blue;
	}
	
	.cadrecontenucentre {position:relative;}
	/*couleur de bordure*/
	.cadrecontenucentre {border: 3px solid #00ff0d;}
	.cadrecontenucentre {
		width:100%;
		height: 200px;
	}
		
	.cadrecontenucentre img{
		/*position absolue par rapportau au bloc div menuhorizontalcadre qui a un positionnement défini (relative)*/
		position:absolute;
		/*position centrage vertical*/
		top:50%;
		height: 140px;
		margin-top:-70px;
		left:50%;
		width: 300px;
		margin-left:-150px;
		}	


	/*paramètres pour un affichage responsive*/
	@media (max-width:600px){
		div,nav,article,table,th,td{
			width:100%;
			height:auto;
		}
	}
	
/*-------------------------------------------------------------*/
.menuhorizontalencadre2 {
    display: flex;                /* Transformation en flexbox */
    padding:0;                    /* Suppression des marges internes */
    background-color: #ccc;       /* Ajout de la couleur d'arrière-plan */
    justify-content: space-around;/* Alignements des liens dans le menu */
}
.menuhorizontalencadre2 li {
    list-style-type: none ;       /* Suppression des puces */ 
}
.menuhorizontalencadre2 a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */   
    
    margin: 0.5rem;               /* Marges externes */
    padding: 0.4rem 0;            /* Marges internes */
    text-align: center;           /* Centrage du texte */   
    background-color: #1ABC9C;    /* Arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */    
    transition: all 1s ;          /* Ajout des effets de transition */
}

.menuhorizontalencadre2 a:hover{
    background-color: #ed2794;
    color: #ffe843;
    border-color: #ffe843;
}
/*-------------------------------------------------------------*/
	
	.menu1 {
		/*je dis qu'il n'y a aucune puce dans la liste*/
		list-style:none;
	}
	.menu1 li{
		/*je déclare un menu flottant qui se positionne à gauche et dont les options sont verticales*/
		float:none;
	}
	.menu1 a{
		/*largeur de l'élément du menu*/
		width:200px;
		/*hauteur de l'élément du menu*/
		height:30px;
		/*affiche par block*/
		display:block;
		/*je centre le texte*/
		text-align: center;
		/*je place une bordure*/
		border:1px solid gray;
		/*texte simple, pas de soulignement de texte, de caractères barrés etc*/
		text-decoration:none;
		/*couleur rouge pour le texte*/
		color:red;
		/*couleur bleu ciel pour le fond*/
		background-color:azure;
	}
	.menu1 a:hover{
		/*si je survole l"element avec la souris du menuson fon se met en jaune - :hover est une pseudo-classe*/
		background:yellow;
		/*si je survolel'element du menu sa bordure se met en noir*/
		border:1px solid black
	}
	.menu1 a:active{
		/*quand je clique sur l'element du menu son fond se met en bleu*/
		background:blue;
	}
	/*La première lettre des paragraphes seront agrandie*/
	.menu1 p :first-letter {
		font-size :150% ;
		}
	/*mise en forme des tableaux pour les balises suivantes, le caractère utilisé est une accolade et pas une paranthèse*/
	table, th, td{
		/*encadre les cellules en noir*/
		border: 1px solid black;
		/*je défini un encadrement simple, pas double*/
		border-collapse: collapse;
		/*je définis une largeur de 30% pour chaque cellule*/
		width: 30%;
		/*j'aligne le texte au centre de cahque cellule*/
		text-align: center;
	}
	
	/*je defini le style de mes listes*/
	.laliste1 {
		/*list-style-type: none;*/ /*pour ne pas voir de puces*/
		/*list-style-type: disc;*/ /*avec des puces rondes*/
		/*list-style-type: circle;*/ /*avec des puces en cercle*/
		list-style-type: square; /*avec des puces carrés*/
		/*La première lettre des éléments de la liste seront agrandies*/
		li:first-letter {
		font-size :150% ;
		}
	}
	.laliste2 {
		/*je dis qu'il y a une puce pour chaque élément de la liste*/
		list-style-type: disc;
		/*largeur de l'option du menu*/
		width:200px;
		/*hauteur de l option du menu*/height:30px;
		/*j'affiche par block*/
		display:block;
		/*je centre le texte*/
		text-align:left;
		/*texte simple sans soulignement, caractères barrés etc*/
		text-decoration:none;
		/*couleur rouge pour le texte*/
		color:red;
	}
	
	/*je defini les caractéristique des images*/
	img {
		width:100px; /* je neutralise height:100px; car ainsi l'image sera redimentionné automatiquement en fonction de width*/
		border:2px solid #935800; 
	}
	
	/*je défini le style des cadres qui sont utilisés dans les balises HTML iframe. Attention le nom donné doit être précédé d'un point exemple .cadre1 */
	.cadre1 {
		/*je défini la positionnement gauche du cadre*/
		margin-left:40px;
		margin-top: 20px;
		width: 20%;
	}
	.cadre2 {
		/*je défini la positionnement gauche du cadre*/
		margin-left:40px;
		/*position relative par rapport au précédent*/
		margin-top: 10px;
		width: 20%;
		height:450px;
		border:0;
	}
	.cadre3 {
		/*je défini le positionnement gauche du cadre*/
		margin-left:40px;
		/*position relative par rapport au précédent*/
		margin-top: 10px;
		width: 20%;
	}
	.cadre4 {
		/*je défini le positionnement gauche du cadre et la hauteur du cadre*/
		width:25% ; height:430px;
		margin-top: 10px; /*position relative par rapport au précédent*/
		margin-left:40px; /*defini l'épaisseur de la bordure de gauche*/
		border-color:black; /*defini la couleur de la bordure*/
		border-style:dotted; /*place la en pointillé tout autour du cadre*/ 
	}	
	.letitre1 {
			background-color: rgb(147,234,0);
			color:blue;
			font-family:ARIAL;
			font-size:16px;
			font-weight:bold;
	}
	.letitre2 {
			color:blue;
			font-family:ARIAL;
			font-size:16px;
	}
	.laligne {
		font-size:14px;
		font-family:ARIAL;
	}
/*----------------------------------------------*/	
/*un menu avec des images qui s'affichent en fonction de l'option choisie*/
.menuquiaaficheimage {position : relative;}
.menuquiaaficheimage {border: 3px solid orange;}
.menuquiaaficheimage nav{
	padding:60px;
	margin:10px;
	display:grid;
	background-color:#fff75c;
	font-family:serif;
	font-size:25px;
	border-style:double;
	}
.menuquiaaficheimage img{
	/*position absolue par rapportau au bloc div menuquafficheimage qui a un positionnement défini (relative)*/
	position:absolute;
	/*position gauche*/
	top:90px;
	left:300px;
	border:solid;
	}	
/*------------------------------------------------*/
	
</style>