Informatique


FS, les styles généraux

Démarche générale

Démarche générale
On respectera les règles suivantes:
  • on utilise pour le CSS (à titre indicatif!):
    • 1 FS pour le reset des effets par défaut
    • 1 FS pour les styles généraux
    • 1 FS pour le header
    • 1 FS pour le nav
    • 1 FS pour le main
    • 1 FS pour le footer

    Toutes ces FS seront réunies en une FS avec SASS.

  • 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
  • utiliser les propriétés chaque fois dans le même ordre
  • on privilégie l'héritage des styles
  • on privilégie les styles condensés

La FS reset

Les règles CSS par défaut changent en fonction du browser utilisé, il est donc utile de réaliser un reset afin de s'assurer un comportement identique des balises pour chaque browser.

Code CSS
/*----Suppression des effets html par défaut----------*/
*  {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font:normal normal 400 1rem/1rem Verdana,Arial,sans-serif;
}
/*---Taille des caractères pour la racine---*/
html	{
	font-size:10px;
}
/*---Liens hypertexte--*/
a	{
	cursor:pointer;
	text-decoration:none;
}

/*---Les listes---*/
ul,ol	{
	list-style:none;
}	


La FS styles généraux

Dans l'exemple suivant on crée une FS de styles généraux, il s'agit de définir les styles les plus généraux de notre FS.

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.

Dans l'ordre:

  • le fond, la police, la taille et la couleur des caractères, ces valeurs sont généralement homogènes pour toutes les pages
  • les niveaux de titres
  • 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
Code CSS

/*---------Styles généraux--------------*/
body	{
	background:#eee;
	margin:0.5rem;
	font-size:1.2rem;
	color:rgba(10,10,10,1);
	
}
/*---------Formats des niveaux de titres-------*/
h1,h2,h3,h4,h5,h6	{
	margin-top:1.5rem;
	margin-bottom:0.5rem;
	font-weight:bold;
	}
h1	{
	font-size:3rem;
}
h2	{
	padding-left:2.5rem;
	font-size:2.5rem;
}
h3	{
	padding-left:7.5rem;
	font-size:2em;
}
h4	{
	font-size:1.6rem;
}
h5	{
	font-size:1.4rem;
}
h6	{
	font-size:1.2rem;
}


/*-----classes de couleurs-----*/
.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 (justifiés, centrés)------*/
.contenujust	{
text-align:justify;
}
.contenucent	{
text-align:center;
}
/*----------------------Espacements entre les paragraphes-------------------*/
.p5	{
	margin-top:0.5rem;
}
.p10	{
	margin-top:1rem;
}
/*-----------------Aspect caractères---------------------------------*/
.gras	{
	font-weight:bolder;
}
.italique	{
	font-style:italic;
}
.taille25	{
	font-size:2rem;
}
/*--------------------Fin styles généraux--------------------------------*/


Exemple de page avec les 2 FS

On inclus les fichiers css dans les pages avec <link>.

Démo
<head>
	<link rel=stylesheet href="cssReset.css">
	<link rel=stylesheet href="cssGeneraux.css">
</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>