[CSS] Les bases
1) Introduction
Bonjour
Le langage CSS, Cascade Style Sheet, traduit littéralement Feuille de Style en Cascade sert à la mise en forme. Il est en effet très utile pour séparer mise en forme et contenu du XHTML.
2) Utilisation du CSS
Pour pouvoir l'utiliser, vous devez créer une balise <div> ou <span> avec un attribut class ou id. Cependant, vous pouvez l'utiliser avec l'attribut style associé à n'importe quelle balise. Par exemple:
<p style="font-size: 12px;">texte</p>
Il faut savoir qu'il y a des différences entre class et id :
- Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
- Une classe peut désigner plusieurs objets identiques.
Par exemple, il peut avoir
<div class="azerty"></div>
<div class="azerty"></div>
Mais il n'est pas correct
<div id="azerty"></div>
<div id="azerty"></div>
De même entre <span> et <div> :
- Un <div> s'applique à un élément bloc, qui contribue à la mise en page du document.
- Un <span> s'applique à un élément en-ligne, qui enrichie du texte.
Il est incorrect d'imbriquer des <div> dans un <span> par exemple. Mais un <div> peut contenir plusieurs <span>...
Il est préférable de créer une feuille de style à part en .css pour plus de lisibilité. Créer donc une feuille de style nommé style.css et incluez la dans le document HTML entre <head> et </head> comme ceci:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Vous pouvez spécifier le type de media comme screen, print,... L'attribut rel indique le type de relation qui est établit avec le fichier définit dans href.
Il existe aussi une autre solution qui n'est pas comprise par certains navigateurs "dinosaures", donc il est peut-être préférable de l'utiliser pour éviter d'avoir une mise en page horrible sur ces navigateurs et afficher un site sans habillage, mais lisible.
<style type="text/css">
@import url(style.css);
</style>
Pour afficher un texte rouge aligné sur la droite en police verdana et de taille 10px, il faut écrire ceci dans votre document HTML:
<div id="droite">Texte</div>
Et ceci dans votre feuille de style CSS:
#droite
{
text-align:right;
font-family: verdana, sans-serif;
font-size: 10px;
color: #FF0000;
}
N'oubliez pas le " # " devant le nom de l'id. Pour une classe vous devez mettre un " . " devant le nom. Pour la couleur rouge, elle se note " #FF0000 " en hexadécimal mais vous pouvez mettre " red " à la place.
Vous pouvez aussi définir un style sans utiliser de classe ou d'id, tout simplement grâce à l'attribut style:
<div style="color: #FF0000;">Texte</div>
Les styles peuvent être définis pour un type de balise en général, par exemple vous pouvez définir une taille de police pour tous les éléments <h1>:
h1
{
font-size: 16px;
}
Il suffit de ne pas préciser de . ou de #
3) Liens utiles
Vous pouvez trouver la référence des propriétés CSS ici.
Si vous êtes allergique a l'anglais, vous pouvez consulter ce site dans la partie référence au milieu de la page.
« Trouve un travail qui te plaît et plus jamais tu ne travailleras » Confucius
Aucun commentaire(s)
| Pas de commentaire pour ce tutorial. |
Ajouter un commentaire
Vous devez vous être connecté pour poster des commentaires