Forum gratuit : Le forum des forums actifs
Bienvenue sur le forum de support de ForumActif.

Afin de profiter pleinement de tout ce que vous offre notre forum, merci de vous identifier si vous êtes déjà membre ou de rejoindre notre communauté si vous ne l'êtes pas encore.

Créer un forum gratuit semblable à ce forum

Créer un forum

Rechercher
Magic FDFRechercher parmi les tutoriels...
Pensez à effectuer une recherche parmi les tutoriels existants avant d'ouvrir un sujet dans l'Entraide !



Afficher sous forme de :


Les posteurs les plus actifs de la semaine
Chacha
 
Tech
 
Vivi
 
Coventgarden
 
Neptune-
 
MlleAlys
 
Le_Geek
 
mikado80
 
SeLfde4Th7
 
lolo591
 

Thèmes du mois
Derniers sujets
» Lenteur d'affichage
Aujourd'hui à 16:34 par Lambada

» Avatar non précisé pour layton200 (forum-emulario.forumperso.com)
Aujourd'hui à 16:32 par Nesquik

» Texte blanc sur fond blanc
Aujourd'hui à 16:31 par sudreptiles

» Icônes 75*74 pour MB_Eevee (animal-crossing-leaf.forumactif.org)
Aujourd'hui à 16:18 par MB_Eevee

» QEEL et PHBB3
Aujourd'hui à 15:54 par emc2

» Besoin: suppression d'un topic avec mon adresse email
Aujourd'hui à 15:47 par Soso67

» Image calendrier
Aujourd'hui à 15:41 par Pommepote

» Comment modérer la tchatbox sans être connecter
Aujourd'hui à 15:34 par néco

» Décalage de titre de catégorie
Aujourd'hui à 15:32 par S@cha

Qui est en ligne ?
Il y a en tout 288 utilisateurs en ligne :: 22 Enregistrés, 1 Invisible et 265 Invités :: 2 Moteurs de recherche

Alrun, Caline-08, emc2, Ezio7080, FANCH 56, jacs, kahlanou, Lambada, Lisy Nila, lolo591, Lucariaura, MB_Eevee, Neptune-, Nesquik, néco, Oum Layla, SeLfde4Th7, Soso67, sudreptiles, Tatiana47, Tech, Wave

Le record du nombre d'utilisateurs en ligne est de 1877 le Jeu 19 Mai 2011 - 15:00
Le CSS – Comment ça marche ? 5 5 6

Le CSS – Comment ça marche ?

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

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

Masculin
Messages: 7557
Réputation: 986
Inscrit(e) le: 28/03/2009

http://www.aidactif.fr

Revenir en haut Aller en bas

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