Typographie et CSS

Publié le par PêUR

Savez-vous qu'avec de simples propriétés CSS de mise en forme de texte, vous pouvez obtenir de très jolies pages HTML sans encombrer votre site (blog) d'images inutiles ?

Dans cette article, vous allez appréhender les moyens à mettre en oeuvre pour obtenir de beaux textes formatés.

Sommaire:

Propriétés: La fonte des caractères
Propriétés: La couleur des caractères
Propriétés: La décoration du texte
Propriétés: Les pseudo-éléments
Exemple: (1) (2) (3) (4) (5) (6) (7) (8) (9)

Imprimer l'article

 

Les propriétés à utiliser

La fonte des caractères: La fonte est un terme typographique qui fait référence à l'apparence de la police, sa graisse, sa largeur et son inclinaison. Les propriétés associées à ces caractéristiques sont les suivantes:

  • Font-family permet de choisir la police ou la famille de police qui va être appliquée au texte. Sachez que seules les polices installées sur l'ordinateur de votre visiteur pourront être vues par ce dernier. Evitez donc les polices exotiques et veillez à choisir une famille générique de substitution. Detail de la propriété sur mediabox 
  • Font-style représente l'inclinaison de la police. La valeur italic permet d'afficher la version italique de la police, tandis que la valeur oblique impose à la police de s'incliner (subtile nuance).Detail de la propriété sur mediabox 
  • Font-weight caractérise la graisse, l'épaisseur d'une police. Le W3C détermine dans ses recommandations 9 valeurs pour cette propriété. Toutefois, la plupart des navigateurs ne peuvent afficher que les valeurs normal ou bold. Detail de la propriété sur mediabox 
  • Font-stretch se réfère à la largeur de la police. Lorsque la police est condensée, les caractères sont plus étroits que si la police était étendue. Malheureusement, aucun navigateur ne prend en charge cette propriété.

La couleur des caractères, décrit la teinte générale d'un bloc de texte. Les propriétés associées à cette caractéristique sont les suivantes:

La décoration du texte:

Les pseudo-éléments: ce ne sont pas des éléments déterminés par le code de votre page HTML comme <p>, <h1>, <a>, <em>... Mais des éléments crées par le CSS

  • :first-letter permet d'appliquer un style particulier à la première lettre de l'élément qualifié.
    p {color: black;}
    p:first-letter {color: red;}

    Dans cet exemple, la première lettre de votre paragraphe sera rouge alors que le reste du texte sera noir. Detail de la propriété sur mediabox 
  • :first-line se comporte comme:first-letter, mais comme son nom l'indique, cette propriété s'applique à la première ligne de l'élément qualifié. Detail de la propriété sur mediabox 

 

Ci-dessous quelques exemples avec le code utilisé. Vous pouvez faire la même chose en mettant le code CSS avec la class .article si vous voulez qu'il s'applique à tous vos articles, ou bien créer une classe particulière dans votre CSS, par exemple .monstyle et l'appeller dans votre article pour un paragraphe spécifique comme ceci:

<p class="monstyle">votre paragraphe</p>

 

Exemple 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 12px; line-height: 14px; text-align: left;}

p.monstyle:first-letter {font-family: Georgia; font-size:56px; font-weight:normal; line-height:100%; float: left; margin-right: 10px;  color: #B8C087; font-style: italic;}

p.monstyle:first-line {color: #B8C087; font-style: italic; }

 

Exemple 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 14px; line-height: 16px; text-align: left; font-style: italic; font-family: Georgia; letter-spacing: 1px;}

p.monstyle:first-letter {font-family: Georgia; color: #fff; font-size:120px; float: left; line-height: 90%; padding: 5px; border:1px solid #eee; background: #fff url(http://idata.over-blog.com/0/08/58/81/skin/bg.gif); font-style: normal; margin: 0 10px 0 0; }

 

Exemple 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 12px; line-height: 16px; text-align: left; background: #363; color: #fff; padding: 5px;}

p.monstyle:first-letter {color: #fff; font-size:56px; font-weight:normal; line-height:80%; float: left; margin-right: 5px; }

 

Exemple 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 10px; line-height: 10px; text-align: left;  padding: 5px; letter-spacing: 2px; word-spacing: 8px;}

p.monstyle:first-letter {font-size:56px; font-weight:normal; line-height:80%; float: left; margin-right: 5px; color: #ddd; border:1px solid; padding: 5px;}

Exemple 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 12px; line-height: 14px;  text-align: left; background: #eee url(http://idata.over-blog.com/0/08/58/81/skin/quotequest.gif) no-repeat 0% 0%; padding: 10px 15px; }

p.monstyle:first-letter {font-size: 60px; float: left; line-height: 80%; padding-left: 45px ; padding-right: 10px; color: #bbb;}

 

Exemple 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 24px; line-height: 20px; text-align: left; font-weight: bold; letter-spacing: -1px;}

p.monstyle:first-letter {color: #f00; }

 

Exemple 7

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 12px; line-height: 13px; text-align: left;  letter-spacing: 1px;}

p.monstyle:first-letter {float: left; border:1px solid #bbb; padding: 2px; margin: 1px; }

 

Exemple 8

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 12px; line-height: 26px; text-align: center;  letter-spacing: -1px; }

p.monstyle:first-line {font-size: 22px; color: #bbb;}

 

Exemple 9

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu tellus id dui consequat tempor. Duis ipsum odio, semper a, lacinia vel, mattis a, metus. Maecenas varius nunc quis neque nec mauris convallis vestibulum. Aliquam vitae lorem.

Curabitur ut massa. Curabitur volutpat quam sed neque consequat sem vel ante. Aliquam tempus. Quisque vehicula felis id libero. Duis elementum nulla non orci dictum pulvinar. Fusce quam metus, facilisis sodales, fringilla non, mollis lobortis, libero.

 

CSS

p.monstyle {font-size: 14px; line-height: 16px; text-align: left; font-style: italic; font-family: Georgia; letter-spacing: 1px;}

p.monstyle:first-letter {font-family: Georgia; color: #c33; font-size:120px; float: left; line-height: 90%; padding: 5px; border:1px solid; background: #fff url(http://idata.over-blog.com/0/08/58/81/skin/bg.gif) center; font-style: normal; margin: 0 10px 0 0; }</style>

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

tiffany 08/12/2006 23:46

pour repondre au commentaire 26 j'aimerais faire l'exemple 1 pour mes article le hic c'est que j'ai reussi une fois en faisant la methode htlm (mais prend trop de temps faire un article un par un)et j'ai vu que quelqu'un avait essait de faire en css avec .article et ca n'a pas marché tout comme moi ensuite coté calendrier je voudrais qu'il se fond dans le decor de mon blog comme dans certains blogs donc ne plus voir le petit cadrillage ne plus avoir aujourd'ui comme barre et plus ces vilaines couleur dommage que je retrouve pas de blog pour montrer un exemple mais des que j'en ai un je passe le lien

et pour le commentaire 27
bah je crois que je vais chercher dans le forum d'over blog c'est ca, merci tout de meme de m'aider et de m'avoir repondu

PêUR 09/12/2006 18:53

 

tiffany 07/12/2006 15:47

encore pardon de vous derranger mais comment cela se fait il que mon compteur n'indique pas le chiffre que j'ai dans mes statistique car comparé a elle celui de mon blog est en retard et j'ai encore une autre question oui je sais je suis lourde, comment fait ton pour mettre une image a coté des titre de chaque categorie de module et aussi comment fait on pour mettre une ptite image qui differencie ma reponse de celle des autres commentaires desolé je m'exprime tres mal j'espere que vous voyez ce que j'essaie de dire

PêUR 08/12/2006 21:56

Les compteurs ne se basent pas tous sur les même critère de durée (24H, 12H) et de comptage (visiteurs uniques, visiteurs, pages....) bref tu n'aura jamais le même chiffre entre over-blog et le compteur d'un service en ligne.Pour tes autres questions, ça se passe dans le css et leurs réponses se trouvent couramment abordées sur le foum d'over-blog.Bonne continuation.

tiffany 07/12/2006 15:43

ras la casquette car j'essaie depuis deux semaine de faire un blog sympa avec tes conseil et ceux de zoelie et rien ni fais

je ni arrive pas je commence a craquer et j'ai les larmes aux yeux je vais finir par croire que je suis bonne a rien

explication je souhaite modifier mon calendrier je ni arrive pas je souhaite modifier mes article je ni arrive pas non plus je souhaite faire une belle banniere je ni arrive pas je souhaite faire comme dans certain blog "exemple:http://www.calista.biz/archive-11-2006.html" des photos en forme de photo polaroide bah ca aussi je y arrive pas bon sens je sers a quoi moi.....

j'en peux plussssssssss et de meme je souhaiterais mettre des petites videos et je sais pas comment on fait

pardon de vous poluer votre blog avec mon stress car la ca me stresse a mort et je vais peter un cable au secourssss

PêUR 08/12/2006 21:49

Il est très bien ton blog comme ça.Que veux-tu faire exactement comme modif sur ton calendrier et tes articles?

@nne marie 29/03/2006 12:15

Bonjour,
Tout d'abord, je voulais te féliciter pour ton superbe blog qui a du servir à de nombreux bloggeurs dont je fais partie.
Mais là, je coince: j'essaie depuis hier soir de mettre dans mes articles l'exemple 9 en bleu arial et j'ai tenté toutes les solutions sans succès.
Te serait-il possible de me donner un petit coup de main sachant que mon pavé articles est ainsi.
/*------------------- Articles ----------------------------------*/

.article { margin-top:0px; padding:0px; background: url(http://idata.over-blog.com/0/25/70/80/fondpapyrus.gif) ;color:#F9F8FA; border:1px solid #ff33ff; margin-bottom:5px; }


#articleAccueil h2{color:#ff33ff;}

.article p { padding:0px 0px 5px 5px ;margin:0px; }

#articleAccueil h2{color:#ff33ff ; }
.commentMessage { padding:5px; border:1px dotted #FF33CC;background:#000000; margin:0px;color : #ffffff; }


.listArticles a {color: #ff33ff ;}

.Date {margin-right:10px;}

.listArticles a {color: #ff33ff ;}
.categorieArticle {} /*categorie de l'article*/

.categorieArticle a {text-transform:lowercase;}

Merci d'avance

Bizz du pays des pharaons

PêUR 29/03/2006 23:23

Bonsoir et merci,
tout d'abord tu dois supprimer ceci:
p.monstyle {font-size: 14px; line-height: 16px; text-align: left; font-style: italic; font-family: Georgia; letter-spacing: 1px;}p.monstyle:first-letter {font-family: Georgia; color: #c33; font-size:120px; float: left; line-height: 90%; padding: 5px; border:1px solid; background: #fff url(http://idata.over-blog.com/0/08/58/81/skin/bg.gif) center; font-style: normal; margin: 0 10px 0 0; }
Et rajouter ceci EN PLUS en dessous ton .article p :
.article p  { padding:0px 0px 5px 5px ;margin:0px; }.article p  {font-size: 14px; line-height: 16px; text-align: left; font-style: italic; font-family: Georgia; letter-spacing: 1px;}.article p:first-letter {font-family: Georgia; color: #c33; font-size:50px; float: left; line-height: 90%; padding: 5px; border:1px solid; background: #fff url(http://idata.over-blog.com/0/08/58/81/skin/bg.gif) center; font-style: normal; margin: 0 10px 0 0; }
Dernière chose:
ATTENTION, l'image de fond que tu veux utiliser en fond de première lettre est sur mon espace de stockage, si je la supprimes ou la déplace cela ne fonctionnera plus chez toi. Récupère la, upload la sur ton espace de stockage et fait référence à TON image dans le CSS ;-)

sugi 19/03/2006 13:49

Oups j'ai honte ^///^
d'habitude je fais justement attentioin...oups oups oups oups!!!
Pardon pour le dérangement...
Euh pleins de bisous pour me faire pardonner ^o^

sugi la fourmiz

PêUR 19/03/2006 13:50

;-)