AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Coffret dresseur d’élite ETB Pokémon EV06 Mascarade Crépusculaire
56.90 €
Voir le deal

    Partie 2 - Etape 1 : Fonctionnement de la feuille de style CSS

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Dim 1 Fév 2015 - 20:43


    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.


    • Pour les deux sélecteurs qui suivent, je vous invite à lire cette petite explication supplémentaire !

    • 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;
      }


    • 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.

    • Et pour terminer le sélecteur « a » représente les liens. Il fonctionne de la même manière que le « p ».


    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 Wink

    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 Wink


    Dernière édition par A-Lice le Lun 2 Fév 2015 - 12:08, édité 1 fois

    Manumanu
    Manumanu
    MasculinAge : 36Messages : 71

    Lun 2 Fév 2015 - 10:30

    Salut,

    Je me permet quelques petites remarques :

    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.

    Pas du tout, il n'y a aucune contre-indication spécifique en CSS (j'ai vérifié s'il y avait un problème avec FA de ce point de vue, mais à priori non). C'est juste une mauvaise pratique d'ajouter des trucs inutiles à son code, mais rien de plus. Wink

    les « class » et les « id » ne sont pas des balises à proprement parlé

    Cette phrase me chiffonne un peu, dans le sens où les classes et les id ne sont pas des balises tout court. Du coup ça n'a pas vraiment de sens... Peut-être qu'un "ce ne sont pas des balises" suffirait ? Personnellement je fais souvent un rappel sur la terminologie :

    Code:
    <balise attribut="valeur"></balise>
    Code:
    sélecteur { propriété: valeur; }

    Il est également préférable d'utiliser l'underscore « _ » plutôt que le tiret normal « - », une histoire d'interprétation et de compréhension.

    Beaucoup de guidelines syntaxiques recommandent l'utilisation de tirets, parfois en complément avec l'underscore (c'est le cas de BEM par exemple), parfois sans. Dans la plupart des Framework (Bootstrap, Foundation), le tiret est préféré à l'underscore. Donc ce n'est pas vraiment exact...

    bannissez les accents pour les identifiants.

    C'est valable également pour les classes et les noms de fichiers... : Le risque de mauvaise interprétation est trop grand. Par contre, tu peux préciser qu'un id ne doit jamais commencer par un caractère numérique (erreur de validation d'une part, et potentiellement non-interprétation).

    Voilà voilà ; bon courage pour la suite.




    Eh.
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 2 Fév 2015 - 11:16

    A-Lice : HAN ! Mais tu reviens à peine et tu nous sors une étape de Cursus ??? Sérieux ? XD
    Merci en tout cas c'est super x)

    Manu :
    j'ai vérifié s'il y avait un problème avec FA de ce point de vue, mais à priori non

    En fait si, ça m'était arrivé et Threax m'avait aidé à trouvé d'où venait le problème, il s'avérait que c'était ça justement. Cela dit, il y a peut-être eu correction de ce problème par la suite, mais il est peut-être bon par précaution d'au moins laisser qu'il est préférable d'éviter de laisser des accolades vides car sur certaines plateformes et avec certains navigateurs ça peut bloquer la lecture du CSS à l'endroit des accolades vides.

    Pour le reste je n'ai rien à dire je pense que tu t'y connais mieux que moi concernant toutes ces petites choses, spécificités techniques etc. Donc ce sont de bonnes précisions^^



    sign
    Manumanu
    Manumanu
    MasculinAge : 36Messages : 71

    Lun 2 Fév 2015 - 11:19

    Ça m'intrigue, si vous trouvez un exemple je veux bien voir ça plus en détails.



    Eh.
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Lun 2 Fév 2015 - 12:17

    Okhmhaka a écrit:A-Lice : HAN ! Mais tu reviens à peine et tu nous sors une étape de Cursus ??? Sérieux ? XD
    Merci en tout cas c'est super x)

    Yeah Wink Je t'ai dit que je suis plus productive quand j'ai autre chose à faire Razz 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
    De rien et puis il faut bien que quelqu'un s'en occupe et j'aime faire ça *-*

    Manu : Ta première remarque, c'est un point que Jack m'avait dit de mettre donc je le laisse. Pour le reste, j'ai modifié en fonction de ce qui devait être changé et ce qui ne dérangeait pas x) Mais surtout en fonction de ce que les gens disent aussi. D'où mon
    les « class » et les « id » ne sont pas des balises à proprement parlé
    .

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 4 Mar 2015 - 15:36

    Merci encore une fois de cette étape Alice, même si je le dis avec retard! ^^

    Je n'ai rien à ajouter, donc je classe! :hug:



    Hakuna Patata
    Hakuna Patata
    FémininAge : 31Messages : 73

    Lun 22 Mai 2017 - 19:25

    Ce tuto est vraiment super. J'ai avais lu plusieurs autres mais à chaque fois je comprenais jamais la même choses et quand j'essayais je n'arrivais à rien de bien concluant ! Maintenant je pense vraiment avoir compris, mais ça je verrais quand j'aurais essayé ! :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:36