• Propriétés Texte

    Personnalisez le texte sur votre blog avec du CSS (et HTML).  La police, la taille, le style et l'alignement...

    /!\ À savoir : évidemment, à la place de #selecteur, vous mettez votre sélecteur.

    1- Le code :

    #sélecteur {font-family: NOM DE LA POLICE;}

    Note 1: Toutes les polices ne sont pas lues par tous les navigateurs, vous pouvez donc en mettre plusieurs. Exemple: {font-family: Arial, calibri, georgia;}, si le navigateur ne peut pas lire la première police, il utilisera la deuxième, ou la troisième etc. Cette méthode est plus utile pour les polices standards, arial, calibri, times new roman etc.

    Note 2: Pour les polices un peu plus "spéciales/particulières", je vous recommande de suivre ce tuto afin que votre police soit visible par tous vos visiteurs quel que soit le navigateur utilisé.

     

    2- La taille 

    #sélecteur {font-size: Xpx;}

     

    3- La couleur

    #sélecteur {color: #000000;}

    Note: Pour la couleur, vous avez le choix entre mettre le nom de la couleur en anglais, (red, green, grey etc.), ou pour des couleurs plus spécifiques/précises, les codes HTML: #000000, #333333 etc.

     

    4- Le style

    #sélecteur {font-style : italic;} /*- en italique -*/

    #sélecteur {font-style : underline;} /*- souligné -*/

     

    #sélecteur {font-weight: bold;}  /*- gras -*/

    #sélecteur {font-variant: small-caps;}  /*- en lettre capitale -*/

     

    #sélecteur { text-transform: uppercase;}  /*- Majuscule -*/

    Note: J'ai tout mis dans le même point, mais vous pouvez voir que pour mettre du texte en gras ou en majuscules, la propriété n'est pas la même que pour mettre en italique.

     

    5- Espacement des lettres

    #sélecteur { letter-spacing: Xpx;} 

     

    6- Alignement

    #sélecteur {text-align: left;} /*- texte à gauche -*/

    #sélecteur {text-align: right;}  /*- texte à droite -*/

    #sélecteur {text-align: center;}  /*- texte centré-*/

    #sélecteur {text-align: justify;} /*- texte justifié-*/

     

    8 - Mise en page

    Afin d'embellir votre mise en page et la rendre plus harmonieuse, vous avez aussi la possibilité de jouer sur la mise en page. Par exemple, ajouter un alinéa, rendre la première lettre de paragraphe plus grand, etc.

    • Alinéa

    #selecteur {

        text-indent15px

    }

     

    • Première lettre du paragraphe personnalisée

    p::first-letter {
        color: red;
        font-size: 130%;
    }

    9- NOTE :

    Si par exemple, vous souhaitez personnaliser un tableau sur votre blog, vous pouvez également utiliser les propriétés données ci-dessus (font-family, font-size etc.). Les propriétés sont les mêmes en HTML.


    Tags Tags : , ,
  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter