Je me permet de faire un petit tuto pour utiliser les css dans les fiche perso plutot que les element font
Généralité sur la mise en page.
1. Englobons la fiche.
On va utiliser un élément div elle ne fait rien , elle nous sert pour englober l'ensemble de la fiche (ce qui nous permettra d'y appliquer un style)
on aura donc quelque chose du genre :
Code:
<div>
tout le texte de la fiche
</div>
2. Un titre.il y a plusieur taille de titre
Code:
<h1>Grand titre</h1>
<h2>Titre un peu moins grand</h2>
<h3>Sous titre</h3>
3. La paragraphes.pour définir un paragraphe on utilise la balise p
exemple
Code:
<p>
le paragraphe
</p>
Quelques balises suplémentaires.1. Les listes.pour définir une liste
exemple une liste non ordonée
Code:
<ul>
<li> premier élément</li>
<li> second élément</li>
<li> troisiemme élément</li>
</ul>
exemple une liste ordonée, les éléments serons numéroté de 1 à ...
Code:
<ol>
<li> premier élément</li>
<li> second élément</li>
<li> troisiemme élément</li>
</ol>
2. la balise span.la balise
span ne fait rien comme div
elle permet d'appliquer un style a un ensemble de caractere (on le vera plutard)
exemble
Code:
blabla <span> blop blop </span> plop
Résumé.la trame doit donc ressembler a ca
Code:
<div>
<h1>Mon titre</h1>
<h2>titre 1</h2>
<p>
paragraphe 1
</p>
<h2>titre 2</h2>
<p>
paragraphe 2
</p>
......
</div>
pour mettre en page nous utiliserons l'attribut
style qui peut prendre un grand nombre de parametre
cette attribut peu etre mis dans toutes les balise vues si dessus
exemple :
Code:
<div style="text-align:center; color:#fff; font-style:italic;"> texte </div>
a. appliquer une police à la ficheon va utiliser
font-family, font family recoit les police dans l'ordre de préférence dans l'exemple si dessous le navigateur utilisera Time new roman, si elle n'est pas sur le PC il utilisera Time (version libre de time new roman) et si elle n'existe pas il utilisera la police par defaut en serif.
les police par defaut sont :
serif = une famille de police avec empattement, (time, geogia)
sans-serif = une famille de police sans empattement, (arial , bitstream)
Code:
<div style="font-family:'Times New Roman',Times,serif;">
tout le texte de la fiche
</div>
b. aligner le texte de la fichetext-align avec les attribut :
left = aligner à gauche
center = centrer.
right = aligner à droite.
justify = justifier.
exemple:
Code:
<p style="text-align:justify;">
un paragraphe
</p>
c. mettre en évidence des bouts de textela balise
strong permet de mettre en évidence, en gras en général, un groupe de mot
la balise
em permet de metre en style emphasé (italique) un groupe de mot
exemple
Code:
blabla <strong>coucou</strong> plop <em>contreplop</em>
d. mettre en gras / fin un textefont-weightavec les attributs:
bold = gras.
bolder = très gras.
lighter = plus fin
exemple:
Code:
<p style="font-weight:bold"> paragraphe</p>
e. mettre en italique un textefont-style:italic
exemple:
Code:
<p style="font-style:italic"> paragraphe</p>
f. mettre en couleur un textecoloron peu lui mettre en attribut soit un des nom de couleur standard :
bleu , black , grey ...
soit le code hexadecimal de la couleur : #xxxxxx
si vous ne connaissez pas ce code un petit logiciel:
la boite a couleurexemple
Code:
plop <span style="color:blue">en bleu</span> <span style="color:#ff0000">en rouge </span>plop
g. Taille du textefont-sizeavec un des parametre suivant:
xx-small =minuscule.
x-small = très petit.
small = petit.
medium = moyen.
large = grand.
x-large = très grand.
xx-large = géant.
exemple
Code:
plop <span style="font-size:large">en bleu</span>
g. Décoration du textetext-decorationavec les attributs :
underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant. (ne marche pas sous IE)
exemple
Code:
plop <span style="text-decoration:overline"> texte surligné</span>
