Le CSS – Comment ça marche ?557

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 - 17: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
+ Hyperactif +

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