-
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édiaDans 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.
- 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...
-
Commentaires
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é ^^
Si ça t'intéresse toujours, voici l'article mieux expliqué:
=> http://fanstasy-graph.eklablog.net/le-b-a-ba-a21373151
C'est plus clair déjà!Merci ! Donc si j'ai bien compris pour les propriétés , on peut en mettre plisieurs
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 :)
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 ? >_<13sepho15
Mercredi 7 Mars 2012 à 15:28Oui.
Fais
#header {background-url: url("Prend l'URL du Header);}
Après tu peux changer la position, les coins et tout ça.
15NovaliaMercredi 14 Mars 2012 à 13:48les espace (" "<= ceci est un espace u_u) changent-t-il quelque chose ou pas ? (pour une présentation aérée ;)
16NovaliaMercredi 14 Mars 2012 à 13:5817NovaliaMercredi 14 Mars 2012 à 14:04
ç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*/
19NovaliaMercredi 14 Mars 2012 à 18:18
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é
Il y a un ans, je comprennais strictement rien ;) Il faut juste s'y mettre un petit peu, ça devient automatique après
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...)
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 ? :/
29Candiz
Mardi 31 Juillet 2012 à 20:06
Mimille, je t'engage comme co-explicatrice de code ;)
Pas grand chose à rajouter moi... Tu vas me mettre au chomage XD
31Shuchu
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.32Shuchu
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)33Candiz
Jeudi 2 Août 2012 à 20:20
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 ;)
35Candiz
Vendredi 3 Août 2012 à 17:0337Shuchu
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//38Candiz
Vendredi 3 Août 2012 à 19:0939Shuchu
Vendredi 3 Août 2012 à 19:2440Shuchu
Vendredi 3 Août 2012 à 19:3441Shuchu
Vendredi 3 Août 2012 à 19:3642Shuchu
Vendredi 3 Août 2012 à 19:4443Candiz
Vendredi 3 Août 2012 à 20:0944Candiz
Vendredi 3 Août 2012 à 21:2845Bsaplainant
Vendredi 31 Août 2012 à 18:56Est-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...
46nakita1208
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
47ϒυ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?
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... ^^'
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
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à ^^
@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;
}
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
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
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog
On doit remplacer les "propriété et valeurs"?