Etape 1 : Fonctionnement de la feuille de style CSS
Me revoici pour inaugurer la 2° partie de ce cursus.
Définition
Euh stop, j'comprends déjà pas le titre c'est quoi CSS ?
CSS signifie Cascading Style Sheets et en français ça donne feuilles de style en cascade.
Mais encore ?
Et bien, le CSS c'est la décoration du code, la présentation des documents HTML et XML. Un code HTML sans CSS c'est comme un squelette sans peau. Dès lors que l'on ajoute du CSS on y met de la couleur, des formes, de la profondeur, etc. En quelque sorte, on l'habille.
Premier aperçu
Pour commencer, on va voir à quoi ressemble cette feuille de style.
Maintenant que c'est chose faite, on va voir comment y accéder. Cette dernière ce trouve dans le panneau d'administration et par conséquent elle n'est accessible que par les administrateurs. (Les templates eux ne sont accessibles que par le fondateur mais vous verrez ça dans la partie 3.) Que le panneau d'administration soit en profil simple ou avancé, la feuille de style CSS se trouve au même endroit. Il faut donc aller dans Affichage -> Images et couleurs -> Couleurs -> Feuille de style CSS.
À la création du forum la feuille de style CSS est vide. Cependant, le forum ressemble quand même à quelque chose et il possède bel et bien un CSS dit de base. Ce dernier n'est pas modifiable directement, cependant on peut le consulter en cliquant ici :
Et il ressemble à ça :
La plupart du temps on a pas besoin de s'y référer ni de l'utiliser néanmoins, ça peut arriver, plus particulièrement lors de modifications des templates. Mais ça ce sera pour plus tard !
Le CSS de la feuille de style est prioritaire sur le CSS de base.
La forme
Dans une feuille de style CSS on ne peut pas écrire n'importe quoi n'importe comment. Ici on va donc s'intéresser au « n'importe comment ». Il est possible que vous ayez déjà aperçu un morceau de code qui va dans cette feuille de style. Celui-ci se structure de cette manière :
- Code:
p {
color: blue;
font-size: 12px;
}
Ici « p » est le sélecteur, « color » et « font-size » sont des propriétés et « blue » et « 12px » les valeurs. Pour mettre un code dans la feuille de style, il faut mettre le sélecteur en premier pour indiquer que c'est à lui qu'on applique la propriété et sa valeur. Ces dernières sont toujours entre accolades « {} », séparées par deux points « : » et terminées par un point virgule « ; ».
On peut mettre autant de propriétés que l'on veut pour un sélecteur, il n'y a pas de limite.
Le fond (contenu)
Maintenant on s'attaque au « n'importe quoi ».
Tout d'abord, il faut toujours un nombre paire d'accolades. Si vous ouvrez une accolade il faut toujours la fermer. La feuille de style ne fonctionnera pas en cas contraire. De même pour les appostrophes, pour cette raison évitez d'en mettre. Les accents sont égalements à bannir. Ensuite il y a plusieurs façons d'introduire les propriétés dans la feuille de style, soit plusieurs types de sélecteurs. Les plus courants sont « p », « h1 », « h2 », « h3 », « . », « # » et « a ». Ce sont donc ceux que vous serez le plus susceptible d'utiliser.
- Le sélecteur « p » stylise les paragraphes. Si on reprend notre exemple, on donnait au « p » la couleur bleu et une taille de police de 12 pixels. Dans la feuille de style il s'écrit de cette façon :
- Code:
p {
color: blue;
font-size: 12px;
}
C'est-à-dire rien avant le « p » et rien entre ce dernier et l'accolade. - Les sélecteurs « h1 », « h2 » et « h3 » stylisent les titres. Par exemple sur N-U j'ai utilisé le « h1 » pour styliser le titre de l'étape, les sous-titres que j'utilise pour séparer cette étape en plusieurs parties comme "Définition", "Premier aperçu", etc. sont eux stylisés par « h3 ». Ces derniers fonctionnent comme le « p » sans rien ni avant ni entre eux et l'accolade.
- Donc le sélecteur « . » signifie que nous avons affaire à une classe. Cette classe peut donc prendre le nom que vous désirez. Cependant, pour faciliter la tâche à tous ceux qui liront votre CSS et donc vous, prenez des noms significatifs comme « .PA_titre » ou « .QEEL_fond » etc. Une classe peut se répéter autant de fois que nécessaire et être stylisée par toutes les propriétés possibles. Et dans la feuille de style, la classe se met de cette façon :
- Code:
.PA_titre {
font-size: 25px;
color: red;
text-align: center;
font-style: italic;
}
- Le sélecteur « # » signifie que nous avons affaire à un identifiant. En gros, c'est la même chose qu'une classe sauf que nous avons un « # » à la place d'un « . » cependant, cette différence fait tout. Un identifiant ne peut être utilisé qu'une fois, il n'est pas amené à se répéter et ne se répétera de toute façon pas, il est unique. Petite précision, bannissez les accents pour les identifiants (pour les classes aussi).
- Code:
#bandeau {
width: 200px;
background: yellow;
}
- Et pour terminer le sélecteur « a » représente les liens. Il fonctionne de la même manière que le « p ».
Pour les deux sélecteurs qui suivent, je vous invite à lire cette petite explication supplémentaire !
En plus de ça, les « class » et les « id » ne sont pas des balises à proprement parlé contrairement aux autres sélecteurs cités, dans le HTML il faut les insérer dans une division ou un span.
Il doit toujours y avoir au moins une propriété dans chaque sélecteur.
Vous ne pouvez pas écrire #quelque_chose {} et vous dire que vous le remplirez plus tard ou bien au cas où vous en avez besoin plus tard vous le mettez en attendant. Parce que votre navigateur ne cherchera pas plus loin et s'arrêtera ici. Donc tout ce qui se trouve après ne sera pas pris en compte.
Derniers conseils
La feuille de style n'est pas limitée en nombre de caractères, ni en nombre de lignes, n'hésitez donc pas à l'aérer et la commenter. Pour commenter la feuille de style ce n'est pas bien compliqué, il suffit de mettre ses commentaires comme ceci :
- Code:
/*Ceci est un commentaire*/
Ces derniers peuvent être insérés n'importe où dans le CSS et ce même en plein milieu d'un code.
- Code:
.PA_titre {
font-size: 25px;
color: red;
text-align: center; /*voilà comment aligner le texte*/
font-style: italic; /*ceci sert à mettre en italique*/
}
Les commentaires sont très pratiques pour séparer les codes de la page d'accueil, du QEEL, des catégories ou encore des différentes fiches. Ne rechignez pas à en abuser à condition de ne pas oublier de les fermer.
Une autre précision qui a son importance, à chaque fois qu'un « ; » est posé, il faut aller à la ligne pour la propriété suivante.
Pourquoi ? Ça prend de la place pour rien.
Bien sur que non. La feuille de style ne nous limite pas, il faut donc en profiter. Mais surtout parce que le retour à la ligne automatique n'existe pas sur la feuille de style. Si vous ne voulez pas vous perdre dans 10 kilomètres de propriétés pour une classe, c'est nettement mieux d'aller à la ligne après chaque point virgule.
Pour les codes, il est préférable de n'utiliser que les minuscules.
Pourquoi tu as écris PA et QEEL avec des majuscules alors ?
Parce que ce sont des classiques ça et que je sais que je les mets toujours en majuscules. Mais ce n'est pas le cas de tout le reste, à vrai dire ce sont les deux seules exceptions qui confirment la règle
Je préfère également utiliser l'underscore « _ » plutôt que le tiret normal « - », une histoire d'interprétation et de compréhension.
C'est sur cette note que se termine cette première étape. Je vous souhaite une bonne exploration de votre feuille de style ! Et si certains points ne seraient pas suffisamment clairs, ou si vous avez des questions n'hésitez surtout pas. Il n'y a pas de questions stupides, que des réponses trop courtes
Dernière édition par A-Lice le Lun 2 Fév 2015 - 12:08, édité 1 fois
En fait les 3/4 étaient déjà fait avant que je ne m’absente. Et ce n'est pas la seule, la suivante est déjà en-cours \o/ Mais oui c'est tout à fait sérieux xD 
