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 gratuit

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
 
Vivi
 
Tech
 
SeLfde4Th7
 
Neptune-
 
Nesquik
 
Space Sapien
 
FANCH 56
 
kiwi14637
 
Kinotto
 

Thèmes du mois
  • Thème forum rentrée
  • Thème forum
  • Thème magic septembre 2014
  • Thème Fairy Tail
  • Thème rentrée scolaire
  • Thème Minecraft
  • Thème forum
  • Thème Vive la rentrée
  • Thème pokémon
  • Thème pastel printemps
  • Thème SAO
Derniers sujets
Qui est en ligne ?
Il y a en tout 194 utilisateurs en ligne :: 5 Enregistrés, 0 Invisible et 189 Invités :: 2 Moteurs de recherche

:Dark-CO:, At0mic, Grimm, Neptune-, winyan_ska

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

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