Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Le CSS – Comment ça marche ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Le CSS – Comment ça marche ?

Message 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, 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.

Tutoriel sur le HTML.


Alex Fowl
Membre actif

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum