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'

Hey tout le monde! Ici Weana (ancienne Miss Shadow). J'ai décidé de créer mon propre cours ici pour vous explquer les bases du CSS et du Design (de blog).

Cette rubrique n'est pas destinée à vous fournir des codes à copier/coller (même si il y en aura) mais à vous expliquer le fonctionnement de base du CSS.

Aussi, je vous apprendrais à réaliser des thèmes harmonieux (en vous montrant ce qu'il faut faire -et ne pas faire-).

Je ne suis pas une experte mais je voulais vous faire partager mes connaissances pour vous aider à progresser.

Voilà, je pense avoir fait le tour, si vous avez des questions, n'hésitez pas.

Sur ce, Tchuss ♥

Wea'.