• Cours #1 -Introduction.

    Hellow ♥

    Aujourd'hui je vous retrouve pour mon premier cours ici.  Ce sera un article d'Introduction au CSS (qu'est-ce qu'un code CSS, de quoi est t-il composé ect...) donc si vous avez déjà ces bases là, vous pouvez passer cet article.

     Bonne lecture :3


     

     On parle de CSS, de codages, tout ça c'est bien beau mais au final; qu'est-ce que c'est?

    Pour ceux qui ne le savent pas, le véritable nom de CSS est "Cascading Style Sheets" ("feuilles de style" en français...c'est tout de suite moins classe c'est vrai.)

    Le CSS est un langage sous forme de codes permettant de donner telle ou telle apparence à une page web. (au même titre que l'HTLM ect...)

    Vu comme ça, ça paraît compliqué, c'est sûr, le secret c'est de connaître la méthode de construction/structure d'un code.

    Un code est composé de trois parties distinctes:

    Un sélecteur, une propriété et une valeur. Ce qui nous donne:

    #sélecteur {propriété : valeur;}

    /!\ Il ne faut surtout pas oublier les symboles tels que "#" "{ et }" et ";" sinon, le code sera faux.

    Prenons un exemple concret:

    Je veux coder mon infobulle (le texte dans le rectangle qui s'affiche quand on passe sa souris sur un avatar des derniers visiteurs.) Sur ce blog, l'infobulle n'est pas codée.

    On va tout d'abord commencer le code avec le sélecteur (sans oublier le hashtag qui va devant). Un sélecteur, c'est le nom de la partie du design que tu veux coder (ici l'infobulle.)

    Notre sélecteur se nomme "help_bubble" ce qui nous donne:

    #help_bubble {propriété: valeur;}

    On oublie surtout pas le crochet "{" qui va nous permettre de séparer le sélecteur de l'autre partie du code et d'ouvrir cette dernière.

    Ensuite, on va s'occuper de la propriété.

    La propriété désigne la propriété (nan, sans blague) de l'élément que l'on veut modifier (par exemple la couleur, la forme, le cadre, la couleur du texte, l'opacité ect...)

    Ici, on va modifier trois critères: la couleur du fond, la couleur du texte et l'opacité.

    1. La couleur du fond:

    La propriété pour changer la couleur du fond est la suivante: "background-color "

    2. La couleur du texte:

    La propriété pour changer la couleur du texte est la suivante: "color"

    3. L'opacité:

    La propriété pour changer l'opacité est la suivante: "opacity"

    Comme vous l'avez surement remarqué, les propriétés sont le plus souvent en anglais.

    Pour l'instant, notre code ressemble à cela:

    #help_bubble {background-color: valeur; color: valeur; opacity: valeur; }

     Il nous manque donc le dernier élément de notre code, la valeur.

    La valeur, c'est plus complexe à expliquer (pour ceux qui savent, aidez moi), je vais donner des exemples pour que ce soit plus clair: la valeur d'une couleur de fond ou de texte, c'est la couleur elle même (rouge, vert, bleu, rose ect...) pour une bordure, c'est le nombre de pixels (px) de cette dernière, pour les coins arrondis, c'est le degrés d'arrondissement ect...

    Pour la couleur de fond, notre valeur sera donc une couleur.

    Il y a deux façons de coder une couleur:

    → de manière "vaste" : en prenant la couleur et en mettant son nom en anglais (exemple: rouge/red, vert/green, jaune/yellow ect...)

    → ou de manière "ciblée" en prenant le code précis correspondant à la couleur (exemple: blanc/#ffffff, rouge/#fe000a ect...) pour cela, on utilise une palette de couleur. (présente dans la personnalisation de thème.)

    On va prendre directement la seconde méthode: notre couleur de fond sera la couleur de l'header de ce blog:  #beb1a8 (merci photoshop.)

    Pour la couleur du texte, la valeur sera aussi une couleur, celle du fond de ce blog: #faf2e7

    Il nous manque désormais plus que l'opacité:

    L'opacité est une valeur allant de 0 à 1 (la plus petite étant 0 → invisible et la plus grande 1 → totalement opaque. Plus on s'approche de 1, plus cela sera opaque.)

    Pour ce code, on va choisir une valeur de 0,8.

    Désormais, notre code est comme ça:

    #help_bubble {background-color: #beb1a8; color: #faf2e7; opacity: 0,8; }

    Notre code est désormais terminé et notre cours touche à sa fin.

    Voilà Maiily, je t'ai offert un code. (Je suis tellement généreuse.)

    J'espère que mes explications étaient claires, si elles ne l'étaient pas, dites moi ce qui ne va pas en commentaires et je réexpliquerais. Soyez indulgents, c'est mon premier cours ici et le CSS est un langage simple à comprendre mais chiant à expliquer. Respectez mon travail, ne plagiez pas.

    Sur ce, je pense faire un article dans le courant de la semaine prochaine. Laissez moi vos impressions et n'oubliez pas, j'ai passé du temps sur cet article, un petit merci fait toujours plaisir.

    Kisses ♥

    Wea'

     

     


  • Commentaires

    1
    Lundi 14 Septembre 2015 à 18:08

    Merci beaucoup ! Pour l'instant j'ai tout compris ! ^^

    Merci m'dame ! 

    2
    Lundi 14 Septembre 2015 à 18:23

    Héé c'est trop génial j'ai aussi tout compris! En plus je savais pas tout ça! Je faisais juste "copier/coller" un code sans vraiment détailler. Donc merciiiii. c:

    3
    Lundi 14 Septembre 2015 à 18:32

    Super cours j'ai tout compris bravo :3

    4
    Lundi 14 Septembre 2015 à 19:07

    Wouaw ! Quand je mettrai des codes va falloir que je revienne parce que là, y a trop d'info d'un coup pour mon cerveau ! xD Mais c'est vraiment cool !

    5
    Lundi 14 Septembre 2015 à 20:44
    @Poplo : Je suis trop contente là x)
    De rien m'dame.
    @Nioola: De rien, c'est le but, moi aussi avant je faisais ça x)
    @Miss:De rien et merci.
    @Aca : C'est sur, même moi j'ai du mal à tout assimiler mais tu verras à un ça viendra tout seul :)
    6
    Lundi 14 Septembre 2015 à 20:52

    Ahah ^^

    7
    Lundi 14 Septembre 2015 à 21:03

    T'es la plus gentille prof au monde ! ♥ 8D

    8
    Lundi 14 Septembre 2015 à 21:05

    Oh oui 8D

    9
    Lundi 14 Septembre 2015 à 21:10
    Je suis la plus gentille du monde tout court u_u
    10
    Lundi 14 Septembre 2015 à 21:12
    11
    Lundi 14 Septembre 2015 à 21:31

    Très bon article! On voit que tu cherches vraiment à faire au mieux, et merci beaucoup pour toutes ces petites infos :)

    12
    Lundi 14 Septembre 2015 à 22:13

    Ah, j'ai une question. Pourquoi ici :

    #sélecteur {propriété : valeur;}

    Il n'y a pas d'espace entre "valeur;" et "}" mais il y en a un entre "propriété" et ":" alors que ici :

    #help_bubble {background-colorvaleurcolorvaleuropacityvaleur; }

    C'est le contraire ?

    13
    Mardi 15 Septembre 2015 à 15:17

    Merci pour ce petit "cours" même si je savais presque tout! ^^

    14
    Mardi 15 Septembre 2015 à 18:41
    Sname : Merci beaucoup.
    Miss: Les espaces n'ont pas d'importance entre les crochets, ce serait chiant sinon ^^
    Yume: Bah tant mieux
    15
    Mardi 15 Septembre 2015 à 19:37

    Ah, ouf ^^

    16
    Mardi 19 Juillet 2016 à 19:03
    Wouaaah merci beaucoup j'ai enfin compris !! Ton cour est bien construit et clair ! C'était super merci vraiment ^^
    17
    Lundi 31 Octobre 2016 à 18:45

    Super résumé.

    Perso, j'aurai juste ajouté la distinction entre "#" et "." avant le sélecteur (l'un pour une balise id et l'autre pour une simple div) parce que mettre .footer et #footer c'est pas pareil et ça aura pas le même effet. (Je dis ça comme ça parce qu'à mes débuts j'ai eu du mal avec les deux, je faisais pas attention).

    Bref, merci!

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :