Informatique


FS, les styles généraux

Généralités

On utilise une fs, pas 36...

Utiliser des noms mnémoniques pour les sélecteurs.

Utiliser des commentaires pour rendre l'organisation plus claire.

Aller du plus général vers le plus particulier.

L'exemple qui suit ne représente pas une obligation, il n'est qu'une façon de procéder. L'important c'est de bien prendre conscience qu'organiser sa fs du plus général vers le plus particulier permet d'avoir un outil de mise en page très efficace.

  • On va d'abord préciser les choses les plus générales: le fond, souvent le même pour toutes les pages.
  • La police, la taille et la couleur des caractères, qui sont également homogènes pour toutes les pages.
  • Afin d'éviter des rendus par défaut variables selon le navigateur on fixe les margin et padding des balises de type block à 0.
    On précisera plus tard les valeurs de margin et padding.
  • Les différents niveaux de titres sont également homogènes, on les précise donc. Afin d'être rationnel, il faut éviter de répéter plusieurs fois le même style, c'est pourquoi on regroupe les styles identiques et on précise ailleurs un style particulier.
  • L'alignement des paragraphes inclus (ou non!) dans les divisions ainsi que les espacements avant et après (margin).
  • On prépare deux classes pour respectivement la mise en gras et la mise en italique.
    S'il s'agit d'un contenu sémantique on préfèrera l'utilisation des balises html correspondantes.
Démo
<style>
/*---------Styles généraux--------------
--------------------------------------*/
/*----Fonds, caractères------------*/
body	{
background:#eee;
font-family:"Trebuchet MS";
color:rgba(50,50,50,1);
font-size:1em;
height:130%;
}

/*----Margin et padding par défaut----------*/
p,div,code,pre,h1,h2,h3,h4,h5,h6,ul	{
margin:0;padding:0;
}
/*---Suppression des effets des balises sém. block et inline---*/
em,strong,i,cite,small,mark,h1,h2,h3,h4,h5,h6	{
	font-size:1em;
	font-style:normal;
	font-weight:normal;
	background:none;
}

/*---------Formats des niveaux de titres-------*/
h1,h2,h3	{
	margin-top:15px;
	margin-bottom:5px;
	font-weight:lighter;
	}
h1	{
	font-size:1.6em;
}
h2	{
	font-size:1.4em;
	padding-left:25px;
}
h3	{
	font-size:1.2em;
	padding-left:75px;
}
.gris	{
	color:rgba(0,0,0,0.7);
}
.orange	{
	color:rgba(255,153,0,1);
	}
.vert	{
	color:rgba(0,175,0,1);
}
.rouge	{
	color:rgba(255,0,0,1);
}
/*-----Formats des zones de texte (à gauche, justifiés, centrés)------*/
.contenu,.contenucent,.contenujust	{
font-family:"Trebuchet MS";
color:rgba(50,50,50,1);
font-size:1em;
}
.contenujust	{
text-align:justify;
}
.contenucent	{
text-align:center;
}
/*----------------------Espacements entre les paragraphes-------------------*/
.p5	{
	margin-top:5px;
}
.p10	{
	margin-top:10px;
}
/*-----------------Aspect caractères---------------------------------*/
.gras	{
	font-weight:bolder;
}
.italique	{
	font-style:italic;
}
.taille25	{
	font-size:2em;
}
/*--------------------Fin styles généraux--------------------------------*/
</style>
</head>
<body>
<h1 class="rouge">Lorem ipsum</h1>
<div class="contenujust">
<h2 class="vert">Lorem ipsum p1 et p2</h2>
	<p class="p5">
	<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. 
	<mark>Nunc eget lacinia risus</mark>. <i></i>Class aptent taciti</i> sociosqu ad litora 
	torquent per conubia nostra, per inceptos himenaeos. <strong>Sed auctor
	aliquam sem nec dignissim</strong>. Sed sagittis elementum tortor sit amet
	 ermentum...
	<p>
	<p class="p5">
	Aliquam id urna diam, non mollis ipsum. Donec placerat, sapien vel 
	auctor bibendum, odio sem rutrum arcu, id eleifend nisl sapien 
	ac lectus. Duis vitae libero purus....
	</p>
<h2 class="vert">Lorem ipsum p3, p4 et p5</h2>
	<p class="p5">
	Vestibulum non tristique ante. Integer et leo felis,
	quis semper ante. Curabitur
	cursus arcu sit amet dui interdum commodo. Suspendisse potenti.
	Curabitur at nibh
	vitae lectus aliquam placerat. Sed tincidunt massa felis, 
	eget suscipit nisi.
	Ut posuere fringilla turpis ut pretium. Integer consequat pretium
	orci vel ullamcorper....
	</p>
	<p class="p5">
	Vivamus vehicula libero tincidunt nisi pellentesque eget dapibus
	dui ultrices.
	Praesent ligula nibh, lacinia in iaculis luctus, pharetra eget
	magna. Nulla quam 
	nulla, luctus a tempor luctus, dignissim in mauris. Etiam sed
	feugiat nisl. 
	Praesent scelerisque augue bibendum turpis vulputate adipiscing...
	</p>
	<p class="p5">
	Etiam rutrum sodales posuere. Suspendisse quis sodales nisi.
	Curabitur scelerisque
	nunc mollis purus accumsan tincidunt. Duis imperdiet, augue bibendum
	tempus malesuada,
	neque quam blandit erat, lacinia scelerisque nibh nulla sed enim.
	Curabitur
	nec nisl ipsum.
	Nullam at vehicula metus. Praesent eu libero diam, at 
	sollicitudin ligula.
	Sed venenatis erat nec odio adipiscing aliquet.
	</p>
</div>
</body>


Travailler intelligemment, plusieurs classes d'un coup!

Afin d'éviter de répéter les mêmes styles dans plusieurs sélecteurs on peut, à l'inverse, côté html, utilser plusieurs style dans une balise.

Le grand classique concerne les textes et leurs caractéristiques.
Si vous voulez centrer du texte de couleur orange en gras, que faire ?
Il suffit d'appeler les classes "contenucent", "gras" et "orange", les noms des classes étant séparés par des espaces.

Cette métode est très très efficace, elle est évidemment applicable aux formulaires et aux tableaux. Il suffit de définir un canevas général (en relation avec le look du site) et ensuite une série de sélecteurs qui vont donner les petites touches particulières.


	<div class="contenucent orange gras">Un texte orange, gras et centré</div>