Ce tutoriel à pour but de vous initier au CSS.
Introduction :Le CSS (Feuilles de style en cascade) est le langage informatique qui sert à personnaliser le rendu graphique des pages web.
Les balises rudimentaires :
Le CSS se présente toujours de cette façon :
Une classe, par exemple :
.forum La classe peut être utilisée plusieurs fois dans un code.
Ou un id, par exemple :
#forumL’id peut être utilisé qu’une seul fois dans un code.
Le CSS dans le code HTML se présente de cette façon :
- Code:
-
<div class="forum">Texte</div>
- Code:
-
<div id="forum">Texte</div>
Toutes les balises HTML sont prises en compte et non pas seulement la balise "div" !
Le code CSS lui se place dans une feuille de style, en .css comme cela :
- Code:
-
.forum {
… ;
}
#forum {
… ;
}
Feuille de style qui peut être intégrée avec cette balise dans une page HTML (elle doit se placer entre les balises HTML ) :
- Code:
-
<link rel="stylesheet" type="text/css" href="mafeuilledestyle.css" />
Ou plus directement en mettant le CSS dans le code HTML en lui-même avec cette balise (elle doit se placer entre les balises HTML ) :
- Code:
-
<style type="text/css">
.forum {
… ;
}
#forum {
… ;
}
</style>
Comme vous le remarquez, les codes CSS sont toujours entre une accolade ouvrante { et une accolade fermante } et les balises CSS sont toutes fermées par un point virgule ;.
Vous pouvez mettre des commentaires dans votre CSS, pour cela il vous suffit de rajouter cette partie :
- Code:
-
/*mon commentaire*/
Nous allons voir les balises de texte :
La couleur :
- Code:
-
.forum
{
color: X ;
}
Remplacer X par une couleur en anglais ou par un Code couleur (héxadécimal) par exemple pour le rouge : red ou #FF0000.
L’alignement :
Code: Sélectionner le contenu
- Code:
-
.forum
{
text-align: center ;
}
Vous avez : "left" pour mettre le texte à gauche, "center" pour centrer le texte, "right" pour mettre le texte à droite et "justify" pour justifier un texte.
La police :
Code: Sélectionner le contenu
- Code:
-
.forum
{
font-family: Times New Roman, Times, serif ;
}
Si une police n’est pas installée sur l’ordinateur de la personne qui ouvre la page, c’est la seconde police séparée par une virgule , qui est utilisée et ainsi de suite.
La taille :
Code: Sélectionner le contenu
- Code:
-
.forum
{
font-size: X px ;
}
Remplacer X par un nombre qui sera en px (pixels) pour changer la taille du texte.
Autre :
Code: Sélectionner le contenu
- Code:
-
.forum
{
text-decoration: underline ;
}
Vous avez : "underline" pour souligner le texte, "line-through" pour barrer le texte, "none" pour ne rien mettre (pour les liens par exemple) et "blink" pour faire clignoter le texte (ne marche pas sous Internet Explorer).
Code: Sélectionner le contenu
- Code:
-
.forum
{
font-style: italic ;
}
Vous avez : "italic" pour mettre le texte en italique.
Code: Sélectionner le contenu
- Code:
-
.forum
{
font-weight: bold ;
}
Vous avez : "bold" pour mettre le texte en gras.
La balise !important :
Cette balise permet de spécifier la partie la plus importante de votre feuille de style :
Exemple :
Code: Sélectionner le contenu
- Code:
-
.forum
{
font-weight: bold !important;
font-style: italic ;
}
Les zones d’utilisation du CSS sur votre forum :
Avec votre forum, intégrer du CSS, c’est facile !
Car il existe déjà une feuille de style que vous pouvez modifier !
Panneau d'administration Affichage Couleurs Onglet "Feuille de Style CSS".
Pour les pages HTML par contre :
Panneau d'administration Modules Gestion des pages HTML.
Il vous faudra vous même insérer votre feuille de style si vous choisissez l’option "Voulez-vous utiliser le haut et le bas de page de votre forum ? Non" (voir plus haut pour intégrer une feuille de style).
Quelques codes CSS pour vos forums :
- PhpBB2 : Supprimer la partie "Dernière Edition par XXX le XXX - XXX, édité XXX fois."
Code: Sélectionner le contenu
tr.post span.gensmall { display: none; }
- PhpBB2, PhpBB3, PunBB : Au passage de la souris le texte des liens se met en majuscules.
Code: Sélectionner le contenu
A:hover{text-transform:uppercase;}
- PhpBB2, PhpBB3, PunBB Changer le curseur de la souris :
Code: Sélectionner le contenu
body{
cursor: url('http://moncurseur.CUR'), auto;
}
a {
cursor: url('http://moncurseur.CUR'), auto;
}
Plus :
Apprendre le CSS :
Le CSS - En anglais.
Alsacréation - Le CSS.
Le site du zéro - Le CSS.
Tutoriel sur le HTML.