Apprendre le CSS
Les Bases : pour bien commencer


Un fichier CSS se compose schématiquement de la manière suivante :



Attribut1 {
propriété1: valeur1;
propriété2: valeur2; 
propriété3: valeur3;
}
Attribut2 {
propriété1: valeur5;
propriété4: valeur4;
}

J'imagine que vous n'avez pas compris le schéma ci-dessus, ce n'est pas étonnant, puisque je ne l'ai pas encore expliqué.
Ce qu'il faut retenir, c'est qu'un fichier CSS est en gros composé de trois éléments principaux : les attributs, les propriétés, et les valeurs.

J'expliquerait en détail dans la suite de ce tutoriel à quoi peuvent correspondre ces éléments, mais donnons tout de même quelques exemples.

.colonneavatar est l'attribut désignant la colonne dans laquelle s'affichent les avatars, sur les commentaires et sur le forum.
width est la propriété qui définit la largeur d'un attribut
Enfin, 130px est une valeur exprimée en pixels que l'on associe à la propriété width.

Donc, si vous entrez dans votre CSS le code ci dessous, la colonne ou s'affichent les avatars aura une largeur de 130 pixels.
.colonneavatar {
width : 130px;
}

Bien entendu, vous êtes libre de choisir une autre valeur à la place de 130 .

Personne n'a abandonné en cours de route ?
Finalement ce n'est pas si compliqué, n'est ce pas ?


Veillez à toujours bien respecter la structure que j'ai annoncée en haut de page, et n'oubliez surtout pas les ; séparant chaque propriété, ceci est essentiel au bon fonctionnement du CSS.


Les commentaires


Je vais maintenant vous apprendre quelque chose qui pourra vous être utile pour mieux vous y retrouver dans votre css.
Vous pouvez ajouter des commentaires dans votre fichier css.
Ceux ci vous aideront à vous souvenir de l'interet de chaque élément que vous avez mis dans votre css.

Les commentaires doivent être précédés de la balise /* et suivis de la balise */ afin que le navigateur comprenne qu'il ne doit pas en tenir compte lors de l'affichage de votre site.
Si vous oubliez ces 2 balises, votre CSS risque de ne plus fonctionner correctement.

Voici maintenant un petit exemple pour vous aider à mieux comprendre:
Attribut1 {
propriété1: valeur1; 
propriété2: valeur2; 
propriété3: valeur2;
} 
/*on applique les propriétés 1, 2, et 3 à la pseudoclasse 1*/ 

Attribut2 {
propriété1: valeur5;
/*on applique également la propriété 1 à l'attribut2. */ 
propriété4: valeur4;} 




Petit exercice

Passons maintenant à un petit exercice, pour nous assurer que vous avez bien compris tout ce qui a été dit plus haut.



Attribut1 {
propriété28: valeurA 
propriété6: valeurB;
} 
/*j'ai appliqué la propriété 28 à la pseudo-classe1/*
Attribut2 {
propriété2: valeurC, 
propriété4: valeurD, 
propriété1: valeurE,
}
Attribut3:
propriété6: valeurF
};
/*fin de mon CSS

Le code présenté ci dessus est il correct ? Je ne vous le cacherai pas plus longtemps : non! Il est même bourré de fautes .

en fait, je vous rassure : j'ai fait ces fautes volontairement . Je pense et j'espère que vous serez capable de trouver les erreurs par vous même et de les corriger.
Relisez attentivement ce code et essayez de trouver ou sont les erreurs, puis de corriger les erreurs.

Vous pensez avoir trouvé les erreurs ? Voici le code que vous devez obtenir après correction.



Citation :
Attribut1 {
propriété28: valeurA ;
propriété6: valeurB;
}
/*j'ai appliqué la propriété 28 à la pseudo-classe1*/
Attribut2 {
propriété2: valeurC;
propriété4: valeurD;
propriété1: valeurE;
}
Attribut3 {
propriété6: valeurF;
}
/*fin de mon CSS */

Les erreurs ont été corrigées en rouge.
Vous aviez tous réussi à trouver les erreurs et corriger correctement le code, n'est ce pas ?
Si ce n'est pas le cas, je vous conseille de relire les explications ci-dessus afin de bien tout comprendre.


Conclusion


Normalement, cette très courte introduction devrait vous suffire à comprendre le principe d'un CSS.
Après avoir lu les explications des pages suivantes, vous devriez être en mesure de créer vous même votre propre fichier CSS .

Allez, courage ! On passe à la suite .




Aller à la page   <<        >>