Démarche générale
Démarche générale
On respectera les règles suivantes:
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>
