Le CSS – Comment ça marche ?

par Alex Fowl le Dim 10 Avr 2011 - 19:46

Le CSS - Comment ça marche ?

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 : #forum
L’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 <head>) :

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 <head>) :

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:
.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:
.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:
.forum { font-size: X px ; }

Remplacer X par un nombre qui sera en px (pixels) pour changer la taille du texte.

Autre :

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:
.forum { font-style: italic ; }

Vous avez : "italic" pour mettre le texte en italique.

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:
.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:: tr.post span.gensmall { display: none; }

- PhpBB2, PhpBB3, PunBB : Au passage de la souris le texte des liens se met en majuscules.

Code:: A:hover{text-transform:uppercase;}

- PhpBB2, PhpBB3, PunBB Changer le curseur de la souris :

Code:: 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.