Création de sites web en coopération, ... cours, ... webdesign, ... webmastering ...

...Aucune formule prédéfinie, .....elle tue toute création....donc adaptée à votre projet.....pour une autonomie....
Un moment est nécessaire pour tout charger, merci. • cours 5 CSS : menu.

... JavaScript indispensable ... code utf-8 ...

❦ Down | Plan du site

- Site web en XHTML 1.0 / CSS 2.0 - CSS 3.0 - site pédagogique expérimental - le ... slow web ... -

Menu cours 5 css : - class / span / position

Info cours CSS 2.0.
①. background-color,color,
     font-family,font-size,
     font-weight,width,height
②. style des liens hypertexte.
③. text: align,border:
     style,width, color.
④. blocs(div): border,
     margin,padding,alignement,
     place du menu horizontal.
⑤. class-span-position.
⑥. coupures du menu-
     du corps
⑦. le style des blocs.

Cours 5 CSS 2.0 avec LigneWeb.net...

Style des éléments dans les blocs en XHTML

... recherche sur ligneweb.net ...

Les éléments div et les class :

… il est important de différencier le style de chaque bloc en marquant une différence … et nous allons voir comment :

… la logique de présentation est la suivante :

… d'abord, la balise … <body> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="entete"> … suivi de tous les blocs qui le concernent…
… ensuite, la balise … <div id="menu"> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="corps"> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="pieds"> … suivi de tous les blocs qui le concernent …

… montrons maintenant ce que cela donne dans la feuille de style … externe … (en CSS 2.0) ...

… pour … <body> … l'écriture est …   body   …
… pour … <div id="entete"> … l'écriture est …   #entete   …
… pour … <div id="menu"> … l'écriture est …   #menu   …
… pour … <div id="corps"> … l'écriture est …   #corps   …
… pour … <div id="pieds"> … l'écriture est …   #pieds   …

… avec pour chacun d'eux … l'ouverture et la fermeture des accolades entre lesquelles se trouve les attributs …
… comme décrits dans le … cours CSS 2.0 ...

… pour tous les autres blocs … nous avons une écriture différente comme suit : ...

… nous n'écrirons plus … <div id="table"> … mais … <div class="table"> …
… ce qui se traduira dans la feuille de style … externe … par …
… cette écritue … .table … suivi des accolades avec les attributs …
… le mot … table … précédé d'un … point …

… nous voyons apparaître l'expression … class="----" …
… ce qui permet de réserver … id="----" … pour attribuer un nom à cette balise ...

Voici un exemple de fichier ... .css ... tiré directement de ce site :

 					
body
{
   	width: auto;
   	margin-left: 20px;
   	margin-top: 10px;
   	margin-right: 20px;
   	margin-bottom: 10px;
   	background-color: #3399bb;
   	font-family: Papyrus, "Comic Sans MS", Geneva, Arial, Verdana, "Times New Roman", Times, serif;
   	font-size: 16px;
}

#en_tete
{
   	width: auto;
   	height: 300px;
   	border-style: outset;
   	border-color: #33ffff;  
   	border-width: 1px;
   	margin-bottom: 200px;
   	padding-left: 10px;
   	padding-right: 10px;
   	font-family: Papyrus, "Comic Sans MS", Geneva, Arial,Verdana, "Times New Roman", Times, serif;
  	 font-size: 16px;
   	color:#000066;
   	text-align: center;
}

#menu
{
   	float: left;
   	width: 180px;
   	border: 1px;
   	border-style: outset;
   	border-color: #00ffff;
   	background-color: #1f7997;
   	color: #000066;
}

/*-----exemple de class-----*/

.element_menu
{
   	margin-bottom: 30px;
}

		etc. ... ce n'est qu'un exemple partiel ... 
			copyright ligneweb.net

… à part les … div entete, menu, corps et pieds … il y a d'autres div qui ont d'autres noms …
… et ceux-ci, exprimés grâce à la spécification … id="____" … avec le nom entre guillemets ...

Retour au menu

Les span :

… avec … div … on peut donner un style particulier à ce bloc en utilisant sa … class …
… mais nous pouvons faire également un style particulier pour une partie d'un bloc avec … span ...

… nous voyons une illustration de l'utilisation de … span … dans la phrase précédante …
… ( avec la partie de phrase … surlignée en bleu clair … ce qui permet de le mettre en évidence ) …
… avec … <span class="_______"> … comme balise entrante …
… et … </span> … comme balise sortante …

… comme exemple, prenons le surlignement précisé par un … span ... particulier ...

Voici un exemple de class dans ... .css ... réservé à ce span :

… prenons le bloc dans le fichier … .html … avec la partie encadrée par un … span ...

Voici un exemple de class dans ... .html ... réservé à ce span :

Retour au menu

Propriétés de positionnement :

… le positionnement des différents blocs se fait avec les … id … pour les quatre grands blocs …
… l'entete, le menu, le corps et le pieds …

… et les autres blocs internes aux quatre grands avec les … class ...

… et les propriétés de positionnement s'expriment avec les attributs :
… margin … et … padding … avec … top, right, bottom et left ... voir le … cours 4 CSS …
… width … et … height … avec … une mesure en pixel (px) … ou ... en % … voir le … cours 1 CSS …
… float … avec …left, right … voir le cours … création de sites 2 … et le cours … création de sites 4 …

exemple :

... style.css …

 
 body
 {
 	width: 500px; 
 	height:700px; 
 	border-style:inset; 
 	border-width:1px; 
 	border-color:black;
 	margin:auto; 
 	background-color: #1f7997;
 }
 
 #entete
 {
 	width:494px; 
 	height:100px; 
 	border-style:inset; 
 	border-width:1px; 
 	border-color:black; 
 	margin-left:2px;margin-top:5px; 
 	text-align:center;
 	background-color: #3399bb;
 }
 
 #entete a
 {
 	width: auto;
   	height: 500px;
   	border-style: inset;
   	border-color: #00bbff;  
   	border-width: 1px;
   	margin-bottom: 30px;
   	padding-left: 10px;
   	padding-right: 10px;
   	font-family: Papyrus, "Comic Sans MS", "Times New Roman",  Arial, Times, serif;
   	font-size: 14px;
   	color:#000011;
   	text-align: center;
   	background-color: #3399bb;
 }
 
 #entete a:hover
 {
 	background-color: #33bbff;
   	color: #000033;
 }
 
 #menu
 {
 	float:left;<!--ici notre précision float-->
 	 width:100px;
 	 height:350px;
 	 border-style:inset; 
 	 border-width:1px; 
 	 border-color:black; 
 	 margin-left:5px; 
 	 text-align:center;
 	 background-color: #3399bb;
 }
 
 #corps
 {
 	width:auto; <!--pour s'adapter-->
 	height:500px; 
 	border-style:inset; 
 	border-width:1px; 
 	border-color:black; 
 	margin-left:120px; <!--pour se mettre à côté du menu-->
 	margin-right:5px; 
 	text-align:center;
 	background-color: #3399bb;
 }
 
 #pied
 {
 	width:auto; 
 	height:50px; 
 	border-style:inset; 
 	border-width:1px; border-color:black; 
 	margin-left:10px; 
 	margin-right:5px; 
 	text-align:center;
 }

… nous voyons le placement du menu et du corps … avec l'attribut … float ...

Retour acte pécédent | Page précédente | Page suivante | Retour au menu