• Introduction

    "Css veut dire "Cascading Style Sheets" soit "feuilles de style en cascade". Il permet la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Cette séparation permet de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document."
    Wikipédia

    Dans EklaBlog, le CSS se trouve dans :
    "apparence => Modifier le thème => Css"

    La structure de base d'un code CSS est la suivante :

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

     

    • Sélecteur : C'est le nom de votre élément. Certains sélecteurs sont définit par défaut, tel les liens, les paragraphes, les images... Les autres sont créé pour gérer plus facilement l'apparence d'un site web. Sur EklaBlog par exemple, nous avons l'en-tête, les articles... 
      Vous pouvez également en créer de nouveaux.
    • Propriété : C'est le nom de l'effet à appliquer sur un élément. Leur nom est en anglais, sans caractères spéciaux excepté un tiret dans certains cas. Elles permettent de gérer la taille, la couleur, des bordures...
    • Valeur : La valeur dépend de la propriété, elle permet d'expliquer exactement l'effet rechercher. Par exemple, pour une propriété "couleur" on va mettre comme valeur "rouge". Pour une propriété "hauteur" on va mettre 200px...


    La ponctuation est extrêmement importante. Toutes les propriété concernant un sélecteur se trouvent entre accolades "{" "}". Les propriété et les valeurs sont séparées par deux points ":", et les propriétés doivent être séparées d'un point virgule ";"
    Dans Eklablog, si vous oubliez les accolades, un message d'erreur vous le signalera. Par contre, si votre code ne fonctionne qu'a moitier, il y a de grande chance pour que vous ayez oublier un point virgule. Relisez vous bien.

    Les retours à la ligne et les espaces entre les signes de ponctuation ne changerons pas le code. Mais il est fortement recommandé d'aérer votre présentation pour pouvoir vous y retrouver.


  • Commentaires

    1
    Shuchu Profil de Shuchu
    Samedi 24 Septembre 2011 à 23:05

    On doit remplacer les "propriété et valeurs"?

    2
    Samedi 24 Septembre 2011 à 23:11

    Tout est à remplacer.

    Tu trouve les sélecteur ici:

    => http://fanstasy-graph.eklablog.net/selecteur-eklablog-a5092805

    Pour les propriété, je fais des articles différent pour bien les expliquer. Pour l'instant, il y a les ombres, les fonds, les bordure, les textes et les arrondis

    3
    Lundi 26 Septembre 2011 à 17:31

    Nagalia comment tu as fait pourr qu'à des endroits ce soi en blanc s'il te plait ...

    4
    Lundi 26 Septembre 2011 à 18:39

    Il faut créer un sélecteur en css, par exemple "code" et tu met comme propriété un fond blanc. Ensuite, quand tu écris ton article, tu vas dans le html et tu met ça <div class="code">Ton texte</div>

    Mais je vais faire un article un peu plus détaillé ^^

    5
    Lundi 26 Septembre 2011 à 19:02
    6
    Dimanche 30 Octobre 2011 à 19:02

    Si ça t'intéresse toujours, voici l'article mieux expliqué:

    => http://fanstasy-graph.eklablog.net/le-b-a-ba-a21373151

    7
    Jeudi 17 Novembre 2011 à 03:24

    C'est clair,c'est cool,c'est tip-top,c'est quoi..? ton blog bien sur.."Je reviendrais"

     

    8
    Lundi 21 Novembre 2011 à 01:40

    P'tit coucou en passant

    9
    Mardi 21 Février 2012 à 08:51

    C'est plus clair déjà!Merci ! Donc si j'ai bien compris pour les propriétés , on peut en mettre plisieurs 

    10
    Mardi 21 Février 2012 à 09:55

    Exactement, du moment qu'elles sont séparéer par ; tu peux en mettre autant que tu veux =)

    11
    Mardi 21 Février 2012 à 09:58

    Ok , merci^^

    12
    Mardi 6 Mars 2012 à 00:06

    C'est cool car c'est bien détaille et bien expliquer, pour le moment j'ai très bien compris, je n'ai aucune question :)

    13
    Mardi 6 Mars 2012 à 00:15

    Ryfia bonne chance pour la suite ... c:

    14
    Mardi 6 Mars 2012 à 00:37

    Merci =D *je progresse, je progresse!!*

    15
    Mercredi 7 Mars 2012 à 14:59

    Il m'avait semblée voir qu'on pouvait utiliser les codes CSS pour mettre un header qui dépasse le poids autorisé.
    Quelqu'un peut m'aider ? >_<

    16
    sepho15 Profil de sepho15
    Mercredi 7 Mars 2012 à 15:28

    Oui.

    Fais

    #header {background-url: url("Prend l'URL du Header);}

    Après tu peux changer la position, les coins et tout ça.

    17
    Mercredi 7 Mars 2012 à 15:31

    Merci beaucoup =)

    18
    Mercredi 7 Mars 2012 à 15:32

    C'est moi Mimille511 sur Sepho15, sans faire exprès chu allée sur le compte de ma pote.

    19
    IlLouminati Profil de IlLouminati
    Mercredi 14 Mars 2012 à 13:48

    les espace (" "<= ceci est un espace u_u) changent-t-il quelque chose ou pas ? (pour une présentation aérée ;)

    20
    Mercredi 14 Mars 2012 à 13:54
    Oui ...
    21
    IlLouminati Profil de IlLouminati
    Mercredi 14 Mars 2012 à 13:58

    donc si j'en met alors qu'il en faut pas, ça va gaché tout mon css ?

    22
    Mercredi 14 Mars 2012 à 14:00

    Mwé ... Ca dépend parfois ... J'ai déjà eu des bugs cause des espaces ...

    23
    IlLouminati Profil de IlLouminati
    Mercredi 14 Mars 2012 à 14:04

    merde é_è

    24
    Mercredi 14 Mars 2012 à 14:11

    Mais bon peut être que pour toi ça ira ... C'est que mon PC bug à mort ... Et j'ai des problèmes d'affichage.

    25
    Mercredi 14 Mars 2012 à 18:14

    ça dépend ou tu met tes espaces. Pour aérer, je te conseil d'aller à la ligne pour chaque autre propriété, et de sauter des ligne quand tu change de sélecteur.

    Pour mieux t'y retrouver, tu peux également mettre du texte entre /*TON TEXTE*/

     

    26
    IlLouminati Profil de IlLouminati
    Mercredi 14 Mars 2012 à 18:18

    okey ^^ merci =P

    27
    Jeudi 26 Avril 2012 à 18:20

    je n'ai pas tout compris ^^'

    28
    Samedi 16 Juin 2012 à 15:35

    J'AI RIEN COMPRIS!!!!!

    29
    Samedi 16 Juin 2012 à 15:50

    Il n'y a pas grand chose à comprendre sur cet article, il faut juste se rappeler de la structure

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

    pour pouvoir appliquer les codes que je donne. Si dans un article tu vois ce code:

    img {opacity: 0.5}

    tu peux en déduire que:
    -img c'est le sélecteur qui permet d'appliquer un effet aux images
    -opacity c'est la propriété qui permet de modifier l'opacité
    -0.5 c'est la valeur de la propriété. Ici, on diminu l'opacité de moitié 

    30
    Samedi 16 Juin 2012 à 15:54

    Pour toi c'est facile mais pour pas pour moi. ^^' Je verrai après. ;)

    31
    Samedi 16 Juin 2012 à 18:51

    Il y a un ans, je comprennais strictement rien ;) Il faut juste s'y mettre un petit peu, ça devient automatique après

    32
    Samedi 16 Juin 2012 à 20:25

    Il y a quoi comem valeurs ?

    33
    Samedi 16 Juin 2012 à 20:35

    Les valeurs dépendent de la propriété que tu utilise. Pour reprendre l'exemple de l'opacité, tu peux mettre un chiffre entre 0 et 1. 0 étant invisible et 1 totalement visible.

    Si tu utilise la proprité "color" pour changer la couleur du texte, tu mettra une couleur comme valeur (black, white, red...)

    34
    Samedi 16 Juin 2012 à 20:37

    Ah OK ! :) Mais regarde sur mon blog, j'ai rentré le code HTML de mon iPod et il y a de l'écriture dessus, je comprends pas ? :/

    35
    Samedi 16 Juin 2012 à 20:39

    Ah non j'avais créé un module qui portait le nom du code HTML xD

    36
    Candiz Profil de Candiz
    Mardi 31 Juillet 2012 à 20:06

    Nagalia j'ai pas compris qu est ce qu on doit mettre dans propriété et valeur...

    37
    Mardi 31 Juillet 2012 à 20:11

    Tu dois remplacer propriété par, par exemple "box-shadow:", et la valeur, par (par exemple) "0px 0px 5px white;".

    #menubar {box-shadow: 0px 0px 5px white;}

    Donc on va mettre au Menubar, une ombre blanche de 5 de flou
    Compris ? 

    38
    Mardi 31 Juillet 2012 à 20:57

    Mimille, je t'engage comme co-explicatrice de code ;)

    Pas grand chose à rajouter moi... Tu vas me mettre au chomage XD

    39
    Mardi 31 Juillet 2012 à 23:23
    40
    Shuchu Profil de Shuchu
    Mardi 31 Juillet 2012 à 23:46

    Mini Lulu-Explication:
    Le sélécteur, c'est "l'objet", càd, le truc où on veut ajouter un effet. Par exemple, le sélecteur de l'en-tête, c'est #header. "propriété", c'est l'effet qu'on veut ajouter à l'objet. Par exemple, arrondir les bords, c'est un effet.  La proriété pour arrondir les bords, c'est border-radius  et la valeur, c'est la "quantité". càd, combien l'effet sera "profondi". Et c'est toujours des chiffres.


    41
    Shuchu Profil de Shuchu
    Mercredi 1er Août 2012 à 14:51

    Mal expliqué pour la valeur.. La valeur, c'est "le détail" de l'effet.  Par exemple, je veux une ombre, blanche et qui a la valeur de 5 px.:

    #menubar {box-shadow: 0px 0px 5px white;} (code de Mimille)
    #menubar est le sélecteur (objet)
    Box-shadow est la propriété (effet)
    0px 0px 5px white est la valeur (détail)

    42
    Mercredi 1er Août 2012 à 17:25

    Shuchu explique mieux que moi.. /partpleurer/

    43
    Candiz Profil de Candiz
    Jeudi 2 Août 2012 à 20:20

    toujours rien compris >.<

    Comment vous faites!?

    44
    Jeudi 2 Août 2012 à 21:22

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

    C'est le schéma de base en css, les codes sont toujours construit de cette façon.
    Le CSS permet de personnaliser l'apparence d'un site en appliquant un effet à toutes les pages en même temps. Pour que le navigateur sache ce qu'il doit interpréter, on utilise toujours ce shéma. En indiquant d'abord à quel élément de ta page tu veux appliquer un effet (le texte, les images, les titres, les articles...), c'est le sélecteur. Ensuite, il faut dire quel effet tu veux lui appliquer (une ombre, des contours arrondis...), on dit que c'est une propriété. Et enfin, le détail de la propriété, pour savoir exactement quel effet cela va produire (une ombre rouge, un arrondi de 10px, une bordure blanche...)

    Le mieux c'est peut être que tu vois sur ton blog. Met ce code dans ton css:

    a {color: blue;
        font-family: impact;
        font-size: 15px;
        text-shadow: 0 0 5px black;}

    Tes liens seront écrits en bleu, dans la police "impact" avec une ombre noire. Essaie de changer les valeurs pour comprendre comment ça fonctionne. Par exemple, tu peux remplacer "blue" par "red" et ton texte sera écrit en rouge. Tu peux aussi changer la taille de la police en remplaçant le "15" de font-size par un autre chiffre...

    J'espère que ça sera un peu plus clair après ;) 

    45
    Candiz Profil de Candiz
    Vendredi 3 Août 2012 à 17:03

    oui merci je voulais mettre des bordures arrondi mais j'y arrive pas >.<

    46
    Vendredi 3 Août 2012 à 17:17

    Ou est-ce que tu veux mettre un arrondi?

    47
    Shuchu Profil de Shuchu
    Vendredi 3 Août 2012 à 18:06

    Nagalia, j'ai eu une idée en bouffant une sucette *^*
    J'ai une sucette, je veux lui ajouté 10 kg de sucre bleu.
    Sucette: sélecteur
    Sucre: Propriété
    10 KG BLEU: valeur
    //PAF//

     

    48
    Vendredi 3 Août 2012 à 18:43

    Mais oui Shuchu... Mais oui.
    On va partir en vacance à dans un centre spécialisé d'accord ? (: 

    Candiz. Où veux-tu mettre des bords arrondis ?

    49
    Candiz Profil de Candiz
    Vendredi 3 Août 2012 à 19:09

    les bordures de la page

    50
    Vendredi 3 Août 2012 à 19:23

    #background {border-radius: Xpx;}

    Tout les sélecteurs >ici<

    51
    Shuchu Profil de Shuchu
    Vendredi 3 Août 2012 à 19:24

    Oh oui Mimi /o\
    PS: on se c' sur Transfo' maintenant au salon 1?

    52
    Vendredi 3 Août 2012 à 19:29

    Là suis co, et je t'ai ajouté en ami.

    53
    Shuchu Profil de Shuchu
    Vendredi 3 Août 2012 à 19:34

    Moi aussi /o

    54
    Vendredi 3 Août 2012 à 19:34

    Là suis co, et je t'ai ajouté en ami.

    Va dans le salon Survivor3

    55
    Shuchu Profil de Shuchu
    Vendredi 3 Août 2012 à 19:36

    Euké. :3

    56
    Shuchu Profil de Shuchu
    Vendredi 3 Août 2012 à 19:44

    Mon look .o. PTDR.

    57
    Candiz Profil de Candiz
    Vendredi 3 Août 2012 à 20:09

    mimille et shuchu vous aimez bien chater en direct sur le blog de nagalia xD

    58
    Vendredi 3 Août 2012 à 20:25

    Oui... Mais la déesse Nagalia ne doit pas le découvrir. *Zbaf*

    Donc, Candiz, le code a marché?

    59
    Candiz Profil de Candiz
    Vendredi 3 Août 2012 à 21:28

    oui ca marche merciii ^^

    60
    Bsaplainant Profil de Bsaplainant
    Vendredi 31 Août 2012 à 18:56

    Est-ce que quelqu'un sait comment mettre des rubriques sur le haut de la page? -je m'exprime mal...-

    Comme ça:

    Désolée pour la qualité de la photo, je l'ais prise a l'instant avec ma ds...

    61
    Vendredi 31 Août 2012 à 23:22

    Pour poser une question "Comment on fait" va plutôt Ici.
    http://fanstasy-graph.eklablog.net/comment-on-fait-forum28752

    Ca évite de mettre des commentaires Hors-Sujet. 

    62
    nakita1208 Profil de nakita1208
    Mardi 9 Avril 2013 à 08:50

    Hay merci pour a tuto mais est ce que tu peut me donne un Exmp pour mieu comprender j'ai beaucoup essayer mais j'ai pus réssy PLZ

    63
    ϒυyυκι_⊂hΔη√ Profil de ϒυyυκι_⊂hΔη√
    Jeudi 11 Juillet 2013 à 22:07

    pour la valeur, qu'est ce qu'on doit  ecrire pour rendre les images flou, et quand tu passe la souris dessus, ca devient clair?

    64
    Vendredi 9 Mai 2014 à 19:51

    on rentre quoi dans la propriété je comprend pas trop :( ?

    65
    Vendredi 9 Mai 2014 à 20:36

    Lino, par exemple, si tu veux que les coins d'un menu soit arrondis, tu va mettre pour la propriété ce qui fait que les coins soient arrondis, et pour la valeur, tu mettra à quel point ils sont arrondis, tu vois ? C'est un peu flou, mais bon... ^^'

    66
    Samedi 10 Mai 2014 à 13:19

    oui j'ai compris merci :)

    67
    Samedi 10 Mai 2014 à 13:26

    J'espère t'avoir aidé ^^

    68
    Samedi 10 Mai 2014 à 13:42

    Oui merci mais j'ai encore une question (et oui je suis pas très douée u_u) comment on fait pour mettre un fond en entier sans qu'il se répète je veux dire. Parce que quand je mets un code sans répétition, mon image ne prend pas tout le fond

    69
    Samedi 10 Mai 2014 à 19:31

    Comment ça ?

    Quand tu met une image en background, elle se répète par défaut, et tu sais pas comment faire pour pas qu'elle se répète, c'est ça ?

    Sélecteur {background-repeat: no-repeat; }

    Pour le sélecteur, tu met celui que tu a utilisé pour mettre ton image, et voilà ^^

    70
    Dimanche 11 Mai 2014 à 00:56

    @Linoo : il faut utiliser la propriété background-size avec la valeur cover :

    sélecteur { background-image : url(URL);
          background-size : cover;
    }

    Si tu utilise la propriété général background, la valeur de background size se place avec un slash / après la position :

    sélecteur { background: url(URL) repeat POSITION_Xpx POSITION_Ypx / SIZE_Xpx SIZE_Ypx;
    }

    71
    Mercredi 14 Mai 2014 à 13:30

    c'est la même chose sy je met #body dans  le selecteur??

    72
    Mercredi 14 Mai 2014 à 13:48

    non en fait j'ai réussi merci beaucoup vous m'avez sauver!!

    73
    Vendredi 11 Juillet 2014 à 22:32

    C'est vraiment gentil, en vrai, de faire des cours de CSS.
    Alors, merci :)

    Sinon...Comment fais-tu pour te souvenir de tout ça ? :o

    74
    Mardi 17 Mars 2015 à 11:20

    Merci pour ce petit cours d'intro! 

    75
    Mercredi 3 Août 2016 à 18:52

    Bonjours,

    mon code css ne marche pas, pourrais tu me dire ce qui cloche?

    #header {
        Border radius: 20xp 20xp 20xp 20xp;
    }

      • Mercredi 3 Août 2016 à 23:29

        le bon code est: #header {border-radius20px 20px 20px 20px;}

        il manquait un tiret entre border et radius, et tu écris xp au lieu de px

    76
    Jeudi 4 Août 2016 à 08:14

    Merci beaucoup, maitenant il marche très bien!

    bonne continuation a toi Nagalia, et un grand merci a Nasu ;)

      • Jeudi 4 Août 2016 à 20:45

        pas de souci ;)

    77
    Dimanche 9 Octobre 2016 à 13:50

    Excuser moi... Je voudrais juste savoir pourquoi l'article ">>détailler<<" de la fenêtre d'information est protégée par un mot de passe^^

    PS: merci pour tout vos codes ils sont géniaux! Bonne continuation^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :