-
CSS, kézakékéko ??
“ Mais qu'est-ce que "CSS" ? ”Tout bon codeur sait que le HTML sert à former la structure d'un site et le CSS sert à lui donner son aspect.
Exemple : • Le HTML s'occupe de dire que "ce texte" est situé au dessus de "celui-ci".
• Le langage CSS lui, va s'occuper de donner la taille, le style ou encore la couleur de ce texte.1. Le langage CSSLa structure de ce langage se présente de cette façon :
.selecteur { propriete: valeur; }• selecteur désigne le nom donné à un corps ou à un élément.
• propriete, c'estl’attribut soit l'effet que l'on veut donner à notre selecteur.
• valeur désigne tout simplement la valeur que l'on donne à la propriété. Exemple : "green" pour une couleur.
• Les accolades "{" et "}" s'utilisent juste après le sélecteur et servent à enfermer les propriétés pour dire. << cette propriété est valable pour ce sélecteur >>.
• les points virgules ";" ne sont pas à négliger. Ils permettent de dire que l'on passe à une autre propriete.2. Utiliser le langage CSSIl y a différentes façons de donner un aspect à du HTML.
◘ Méthode 1On peut directement incruster le CSS dans le HTML. Voila un exemple très basique :
<div style="width: 200px; background-color: grey; color: red; font-size: 12px; text-align: center;">Je mange le matin</div>
Ici, j'ai décoré mon texte "Je mange le matin" avec du CSS ce qui donne :Je mange le matinÉtudions ce code ensemble.
Vous avez surement reconnu quelques termes qui nous viennent de nos voisins les anglais.• d'abord, "width" qui signifie largeur avec pour valeur "200px" ou autrement 200 pixels
• "background" pour arrière-plan et "color" pour couleur, Puis "grey" pour gris
• encore une fois, "color" pour couleur et "red" pour rouge
• "font" pour police, "size" pour taille et encore "12px" pour 12 pixels
• "text" pour texte, "align" pour alignement et "center" pour centre""Mais... il manque quelque chose !
" Rien ne vous échappe hein ! Eh bien oui, on retrouve aussi la balise <div>. Ladies and gentlemen, voici du HTML ! Ce langage se compose de balises dont <div>. Sachez qu'elles se ferment, autour d'un contenu (par exemple, un texte) tout comme les "{" et "}" qui se referment sur les propriete dans un code CSS.Exemple :<a>http://anotherkaneasha.eklablog.fr/css-kezakekeko-a108706650</a>Ici, j'ai utilisé la balise <a> et </a>, les balises qui servent à introduire un lien. Elles disent : “ceci est un lien”.
Puis enfin nous avons "style" qui sert à introduire le CSS au HTML. Voila comment on le présente :
<div style="propriété: valeurs;">MON TEXTE</div>Ne pas oublier les guillemets !! qui disent “ceci est une propriété”.
♣ Pour les utilisateur d'Eklablog, je recommande d'utiliser cette méthode pour rédiger des articles en utilisant ce bouton.
◘ Méthode 2Enfin, on peut utiliser une feuille de style pour rédiger notre CSS. Ce procédé s'applique principalement lorsqu'on a énormément de chose à écrire comme pour un site ou... un blog ! Quelle coïncidence ! Cette méthode sépare le CSS au HTML pour rendre la lecture moins brouillon, plus agréable à lire.
♣ Pour les Eklabloger rendez-vous dans Apparence > Modifier le thème > Ajouter du CSS
Cette fois-ci pour des raisons de pratique, on présente le CSS d'une autre façon - facultative mais extrêmement pratique pour ne pas se perdre..selecteur {
propriete: valeur;
propriete: valeur;
}On utilise le retour à la ligne pour un visuel plus agréable. Rien ne vous empêche de tout écrire sur une seule ligne.. Il n'existe aucune règles là-dessus, mais cela facilite la lecture..
<< Et HTML dans tout ça ? >> - Voila comment il se présente :<div class="selecteur">MON TEXTE</div>La façon de procéder ressemble énormément à la première. Seule différence, ici on n'utilise pas "style" mais class. Et surtout ! Il n'y a plus de propriétés. On utilise cette fois-ci le nom du sélecteur.
♣ Chez Eklablog, les noms des sélecteurs existent déjà. Pour vous, voilà quelques blogs très utiles qui vous renseignent dessus : Papasti; Le Blog Facile; Fantasy Graph' et j'en passe !
Tuto terminé ! Si ce n'est pas claire n'hésitez pas à poser des questions. Je mettrai l'article à jour si c'est nécessaire ! :D
Tags : codage, css
-
Commentaires
Hello Mia Kubo !
Bien sûr, demande-moi ce que tu veux. :) Je ne suis experte pour autant mais je peux toujours essayer. Est-ce que ce serait plutôt pour une commande ou plutôt pour un code qu'il te manque ?
En tout cas je suis heureusement que mon article te soit utile.
À bientôt ;)
^^
Eh bien je ne sais pas trop comme je te l'ai dit ... jai lu mais je n'ai pas tout compris. J'ai seulement compris que quelques unes des informations ( <~ fille qui passe pour une dinde --' ) mais je pense que c'est plutôt pour des codes CCSMerci mais je pense qu'il va servir à plus d'une personne t'en fais pas!
Merci c'est très gentil de ta part! !
Haha ! C'est très gentil :D
Même si tu n'est pas sûre, dis-moi quand même ce qui te manque. Je ferai un tuto si besoin et sinon je peux te pré-créer le code et je t'explique comment il marche pour que tu puisses le personnaliser.
D'accord c'est vraiment gentil de ta part! !
Je Peu t'en demander un ici ou tu as un article spécial ?
Suivre le flux RSS des commentaires
Ajouter un commentaire
Créer mon blog
Bonjour! J'ai lu ton article et il m'a permis de bien mieux comprendre tout ces codes étranges. Je voulais savoir si il y avait possibilité que nous te demandions un code et que tu puisses les réaliser pour nous car même si j'ai mieux compris, je n'y arriverais pas moi même...
Merci d'avoir lu et si tu ne peut pas il n'y a pas de mal car je suis consciente que c'est beaucoup demander...