AccueilFAQRechercherMembresGroupesS'enregistrerConnexion
Design optimisé pour Google Chrome et Safari.

Date : 9 de Onohozu 802

Partagez | 
 

 Tutoriel n°2 || Les identifiants CSS

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

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Tutoriel n°2 || Les identifiants CSS   Dim 25 Juil - 0:36

Il y a deux moyens d'introduire du CSS :
  1. Si l'on dispose d'un fichier CSS directement lié à la page html (exemple le fichier CSS d'un forum), on introduit directement les identifiants et on entoure les attributs avec des { attributs }
  2. Si l'on ne dispose pas de fichier CSS, on peut introduire le code directement dans les balises avec "style"


Dernière édition par Mizuri le Dim 25 Juil - 1:03, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Mizuri

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Re: Tutoriel n°2 || Les identifiants CSS   Dim 25 Juil - 0:54

Avec un fichier CSS :

  • Il faut insérer class="" ou id="" dans une balise (exemple
    Code:
     <span class="Bordure"> </span> ou <span id="Bordure"> </span>
    ) La différence entre class et id ? Un même identifiant class peut s'utiliser plusieurs fois dans votre code html, un id n'est valable qu'une fois. On peut aussi ne pas utiliser class ou id et attribuer des attributs à toutes les balises de même nom (tous les a, tous les span, tous les img...). je vais prendre un exemple de chaque Wink

    Code:
    <span class="cadre"> (n'oubliez pas les guillemets)</span>
    <span id="texte"> (n'oubliez pas les <span class="fond">guillemets</span>) </span>
    <h6> Pas de class ni de id</h6><h6> Le deuxième h6 sera aussi touché</h6>

  • Le CSS en lui-même
    Ouvrez votre fichier CSS (sur un forumactif => Affichage, Couleur, Feuille de style CSS) et introduisez vos identifiants. Les class s'introduisent précédés d'un point, les id d'un # et les autres de rien du tout. Un petit exemple (n'oubliez pas les acolades). /!\Chaque attribut doit être suivi d'un point-virgule sans quoi il ne fera pas effet /!\:
    .cadre {
    border-style : groove ;
    border-color : cyan ;
    border-width : thick ;
    }
    #texte {
    color : tomato ;
    }
    .fond {
    background-color : white ;
    }
    h6 {
    border-style : double ;
    border-color : green;
    border-width : thick ;
    text-align : center ;
    color : white ;
    }
    Ce qui nous donnera (bah oui j'ai un fichier CSS dispo alors... xD):
    (n'oubliez pas les guillemets)
    (n'oubliez pas les guillemets)
    Pas de class ni de id
    Le deuxième h6 sera aussi touché
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Mizuri

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Re: Tutoriel n°2 || Les identifiants CSS   Dim 25 Juil - 1:12

Sans fichier CSS : l'attribut style
Avec style, on introduit directement le CSS dans la balise concernée. Exemple :
Code:
<div style="border-style : solid ; border-color : red ; border-width : 2px ;"> N'oubliez pas les guillemets et les points-virgules !!</div>
Ce qui donnera :
N'oubliez pas les guillemets et les points-virgules !!

C'est-y pas beau tout ça ? x)

Il suffit donc de mettre style=" " à l'intérieur de votre balise et de mettre les attributs CSS que vous voulez, sans oublier de les séparer par des points virgules.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Contenu sponsorisé




MessageSujet: Re: Tutoriel n°2 || Les identifiants CSS   Aujourd'hui à 14:27

Revenir en haut Aller en bas
 

Tutoriel n°2 || Les identifiants CSS

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Parchemins étrangers :: Parchemins banals :: Tutoriel HTML et CSS-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com