23 août 2010

(OverBlog) Découvrir le CSS

Le CSS sert à effectuer des modifications générales de design : couleurs, background, police, marges, encadrements ...

Pour accèder au CSS : Design  > Mode CSS.

Si vous êtes en mode classique, vous avez un seul CSS et les modifications, que vous y ferez, agiront sur tout le blog.
Si vous avez choisi de passer en mode avancé, vous avez 3 CSS à disposition :
  • Accueil
  • Articles
  • Pages
Les modifications n'agiront que sur la zone concernée.

La première fois que vous effectuez une modification dans le CSS, vous devez cliquer sur Mon style, puis cocher Aplliquer ma feuille de style personnalisée et, enfin, enregistrer.


Important : contrairement à d'autres plateformes (tels que Blogger) les CSS OverBlog ne contiennent que du CSS, ni HTML, ni javascript

Bon à retenir :  
  • Une modification effectuée en HTML prend toujours le pas sur une modification effectuée dans le CSS
  • Les lignes situées le plus bas dans le CSS prennent le pas sur les lignes plus hautes.
Voici quelques termes utilisés couramment en CSS :

Mise en forme de la police
Font-family : Propriété pour choisir la police.
Font-size : Propriété pour le corps (taille de la police).
Font-style : Propriété pour l'italique.
Font-weight : Propriété pour la graisse de la police
Mise en forme du texte
Color : Propriété pour définir la couleur du texte.
Text-decoration : Propriété pour souligner, surligner, barrer, clignoter.
Mise en forme du fond
Background-color : pour la couleur du fond de page (couleur d'arrière-plan).
Background-image : pour placer une image en fond de page ou d'élément (image d'arrière-plan).
Background-repeat-x : propriété pour répétition horizontale d'une image.
Background-repeat-y : propriété pour répétition verticale d'une image.
Background-attachment : pour définir une image fixe lors du défilement de la page.
Background-attachment y : définir si une image reste fixe verticalement lors du défilement de page.
Background-position : pour définir la position d'une image dans la page ou le bloc.
Marge distance entre le cadre et l'extérieur
margin-top : marge supérieure
margin-right : marge de droite
margin-bottom : marge inférieure
margin-left : marge de gauche
Marge distance entre le cadre et l'intérieur
padding : Propriété raccourcie qui spécifie la valeur de la marge interne pour les quatre côtés à la fois.
padding-top : Valeur de la marge supérieure
padding-bottom : Valeur de la marge inférieure
padding-right : Valeur de la marge droite
padding-left : Valeur de la marge gauche
Bordure
border : Raccourci vers les propriétés de bordure
border-top : Valeur de la bordure supérieure
border-right : Valeur de la bordure de droite
border-bottom : Valeur de la bordure inférieure
border-left : Valeur de la bordure de gauche
border-width : Raccourci pour les propriétés d'épaisseur de la bordure
border-top-width : Epaisseur de la bordure supérieure
border-right-width : Epaisseur de la bordure droite
border-bottom-width : Epaisseur de la bordure inférieure
border-left-width : Epaisseur de la bordure gauche
border-style : Raccourci pour les styles de la bordure
border-top-style : Style de la bordure supérieure
border-right-style : Style de la bordure droite
border-bottom-style : Style de la bordure inférieure
border-left-style : Style de la bordure gauche
border-color : Raccourci pour la couleur de la bordure
border-top-color : Couleur de la bordure supérieure
border-right-color : Couleur de la bordure droite
border-bottom-color : Couleur de la bordure inférieure
border-left-color : Couleur de la bordure gauche
Pensez à ordonner votre CSS, pour vous y retouver plus facilement ensuite.

Les données concernant l'ensemble du blog doivent être placées en haut et plus elles deviennent précises se situer vers le bas.
Lorsque vous rajoutez des lignes concernant une partie précise du blog, pensez à leur mettre un titre sous cette forme :
/* ------------------------ Module Newsletter ---------------------------- */
Vous ne modifiez seulement ce qui est en rouge.

5 commentaires:

  1. Bonjour Anna,
    Pouvez-vous m'aider à augmenter la largeur de ma colonne principale "articles", jusqu'à 800 px, sans affecter la présentation de la colonne de droite ?
    Mon blog me plaît si ce n'est la taille des photos que je montre. Je demande à mes visiteurs de cliquer pour les agrandir mais je sais que peu le font alors, je voudrais les présenter directement agrandies.
    Pouvez-vous m'aider ? Je crains de toucher à ma feuille de style personnalisée et de faire des dégâts.
    D'avance, je remercie la professionnelle que vous êtes.

    RépondreSupprimer
  2. Bonjour Anna,

    Ce blog est vraiment une mine d'or pour moi qui démarre dans ce type de blog.

    Je voudrai savoir si vous pourriez me donner m'aider à construire un sommaire en page une avec des rubriques et des sous rubriques. Je suis un peu perdue.

    Avec mes remerciement et bravo pour tout ce que vous faites là.

    Elodie

    RépondreSupprimer
  3. ce blog m'as bien aider merci!
    mais j'ai encore quelques petits soucis!!!

    RépondreSupprimer
  4. Merci pour ce tuto, je n'avais pas tout lu avant de modifier ma feuille de style, à présent, j'arrive à fixer le fond d'écran.

    RépondreSupprimer
  5. je pensais découvrir le css dans kiwi ka nouvelle version d'ob sniff

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)