Bonjour à tous,

Vous avez surement remarqué que le blog a un peu été laissé à l'abandon, je n'ai plus le temps de m'en occuper, mais Yume-chan, une personne qui avais été très emballée par l'idée à décider de reprendre le principe sur un nouveau blog qui ouvrira bientôt, je vous conseille donc d'aller tous faire un tour sur son profil >>>.

Merci à tous :)

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'

Avant de vous aidez, j'aurai besoin que vous remplissiez ce petit questionnaire afin de voir votre niveau en anglais, et de mieux vous aider:

IDENTITY CARD

Pseudo:

Age:

Classe:

Depuis combien de temps faites vous de l'anglais ?:

Votre moyenne d'anglais durant les trois trimestres l'année dernière:  T1: T2: T3:

Comment révisez-vous votre anglais ?:

Passez-vous un examen cette année, du type brevet/bac? : 

Hey mes petits élèves (oui, introduction originale), comme dit le titre *regarde le titre pour être sûr* ici c'est ma présentation.

Donc je propose cette matière car "Psychologie" et "Étude de la guitare" étaient déjà prises.

Je suis donc Mr. Jackson, quelqu'un de tout à fait banal qui s'est inscrit sur eklablog en mai 2014 pour se divertir.  

J'ai choisis d'apprendre cette matière packe jan é mar d gan qi parl cm sa 1 ke c chian on é daquore ?

Donc je ferais dans cette rubrique des tutoriels divers, des études de texte traduit ou français, je vous ferai pratiquer, etc.

Si vous avez des questions : COMMENTAIRES

Kisses

Voici un jeu très sympa qui nous a été proposée par petit lu.

Le principe est simple le premier joueur va proposer un "si toi aussi ..." et le jour suivant va alors dire "si lui aussi..." et proposer un autre "si toi aussi"

Aucune je suis vraiment nulle pour les explication alors on voici un exemple qui sera plus clair ( car l'explication l'est pas du tout ^^)

Joueur 1 : Si toi aussi tu pousse la porte d'une boulangerie quand il y a écrit "tirez"

Joueur 2 : Moi aussi je tire la porte d'une boulangerie quand il y a écrit "tirez"

                    Si toi aussi tu ...

Je pense que vous avez compris le principe.

Je commence : Si toi aussi tu marche seulement sur les rayures blanches des passages piétons