Texte Libre
Jeudi 7 février 2008
Formater un texte = Modifier l'apparence du texte
Taille du texte
La propriété CSS qui permet de changer la taille du texte est font-size.
Deux possibilités s'offrent à vous :
- Taille absolue : il s'agit d'indiquer en pixels, la hauteur exacte de vos lettres.
- Taille relative : il s'agit d'indiquer si le texte sera petit, très petit, moyen, grand, très grand...
Indiquer la taille du texte en pixels, centimètres et millimètres est très pratique et très précis. Certes. Mais il est préférable d'indiquer une taille relative afin que la taille du texte s'adapte aux choix de tout le monde (certains préfèrent avoir du texte plutôt gros, d'autres plutôt petit etc...). En effet, selon la résolution de votre écran, ce même texte n'apparaitra pas de la même façon.
Il existe d'autres moyens mais les 2 cités ci-dessus sont les plus courants.
Police du texte
Le problème c'est que, pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.
La propriété CSS qui permet d'indiquer la police est font-family.
Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général plusieurs noms de police, séparés par des virgules :
-> En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).
-> Lorsqu'un nom de police est en plusieurs mots, on l'écrit entre guillemets.
A SAVOIR : Les polices les plus utilisées, donc les plus sûres à utiliser sont :
C'est à dire, le texte sera-t-il aligné à gauche,à droite, centré ou justifié?
On utilise la propriété text-align, et on indique l'alignement désiré :
Décoration du texte
Cette propriété CSS porte bien son nom : text-decoration
Elle permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut prendre :
Couleur du texte
La propriété qui permet de changer la couleur du texte est color.
La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom en anglais.
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard" :
D'autres couleurs officieuses existent (certaines ont aussi un nom mais on utilisera plus souvent le code commençant par #):
Taille du texte
La propriété CSS qui permet de changer la taille du texte est font-size.
Deux possibilités s'offrent à vous :
- Taille absolue : il s'agit d'indiquer en pixels, la hauteur exacte de vos lettres.
| ex : .contenuArticle {font-size:16px;} |
- Taille relative : il s'agit d'indiquer si le texte sera petit, très petit, moyen, grand, très grand...
|
ex : .contenuArticle {font-size: xx-small;} .contenuArticle {font-size: x-small;} .contenuArticle {font-size: small;} .contenuArticle {font-size: medium;} .contenuArticle {font-size: large;} .contenuArticle {font-size: x-large;} .contenuArticle {font-size: xx-large;} |
Indiquer la taille du texte en pixels, centimètres et millimètres est très pratique et très précis. Certes. Mais il est préférable d'indiquer une taille relative afin que la taille du texte s'adapte aux choix de tout le monde (certains préfèrent avoir du texte plutôt gros, d'autres plutôt petit etc...). En effet, selon la résolution de votre écran, ce même texte n'apparaitra pas de la même façon.
Il existe d'autres moyens mais les 2 cités ci-dessus sont les plus courants.
Police du texte
Le problème c'est que, pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.
La propriété CSS qui permet d'indiquer la police est font-family.
| ex : .contenuArticle {font-family:police;} |
Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général plusieurs noms de police, séparés par des virgules :
| ex : .contenuArticle {font-family:police1, police2, police3, police4;} |
-> En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).
-> Lorsqu'un nom de police est en plusieurs mots, on l'écrit entre guillemets.
| ex : .contenuArticle {font-family: "Arial Black", Arial, Verdana, serif;} |
A SAVOIR : Les polices les plus utilisées, donc les plus sûres à utiliser sont :
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
C'est à dire, le texte sera-t-il aligné à gauche,à droite, centré ou justifié?
On utilise la propriété text-align, et on indique l'alignement désiré :
- left : le texte sera aligné à gauche (c'est le réglage par défaut).
- center : le texte sera centré.
- right : le texte sera aligné à droite.
- justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.
| ex : .contenuArticle {text-align: center;} |
Décoration du texte
Cette propriété CSS porte bien son nom : text-decoration
Elle permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut prendre :
- underline : souligné.
- line-through : barré.
- overline : ligne au-dessus.
- blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
- none : normal (par défaut).
| ex : .contenuArticle {text-decoration: underline;} |
Couleur du texte
La propriété qui permet de changer la couleur du texte est color.
La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom en anglais.
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard" :
| white |
|
| silver |
|
| gray |
|
| black |
|
| red |
|
| maroon |
|
| lime |
|
| green |
|
| yellow |
|
| olive |
|
| blue |
|
| navy |
|
| fuchsia |
|
| purple |
|
| aqua |
|
| teal |
|
| Couleur | Aperçu |
|---|
D'autres couleurs officieuses existent (certaines ont aussi un nom mais on utilisera plus souvent le code commençant par #):
| Ech. | Nom HTML | Traduction | RVB |
|---|---|---|---|
| aliceblue | bleu Alice | #F0F8FF | |
| antiquewhite | blanc antique | #FAEBD7 | |
| aqua | eau | #00FFFF | |
| aquamarine | aigue-marine | #7FFFD4 | |
| azure | azurin | #F0FFFF | |
| beige | beige | #F5F5DC | |
| bisque | bisque | #FFE4C4 | |
| black | noir | #000000 | |
| blanchedalmond | amande blanchi | #FFEBCD | |
| blue | bleu | #0000FF | |
| blueviolet | parme bleuté | #8A2BE2 | |
| brown | brun | #A52A2A | |
| burlywood | bois dur | #DEB887 | |
| cadetblue | pétrole clair | #5F9EA0 | |
| chartreuse | vert chartreuse | #7FFF00 | |
| chocolate | chocolat | #D2691E | |
| coral | corail | #FF7F50 | |
| cornflowerblue | bleuet | #6495ED | |
| cornsilk | jaune maïs doux | #FFF8DC | |
| crimson | pourpre | #DC143C | |
| cyan | cyan | #00FFFF | |
| darkblue | bleu sombre | #00008B | |
| darkcyan | cyan sombre | #008B8B | |
| darkgoldenrod | jaune paille sombre | #B8860B | |
| darkgray | gris cliar (!) | #A9A9A9 | |
| darkgreen | vert sombre | #006400 | |
| darkkhaki | kaki sombre | #BDB76B | |
| darkmagenta | magenta sombre | #8B008B | |
| darkolivegreen | vert olive sombre | #556B2F | |
| darkorange | orange sombre | #FF8C00 | |
| darkorchid | orchidée sombre | #9932CC | |
| darkred | rouge sombre | #8B0000 | |
| darksalmon | saumon sombre | #E9967A | |
| darkseagreen | vert océan sombre | #8FBC8F | |
| darkslateblue | bleu ardoise sombre | #483D8B | |
| darkslategray | gris ardoise sombre | #2F4F4F | |
| darkturquoise | turquoise sombre | #00CED1 | |
| darkviolet | violet sombre | #9400D3 | |
| deeppink | rose profond | #FF1493 | |
| deepskyblue | bleu ciel profond | #00BFFF | |
| dimgray | gris rabattu | #696969 | |
| dodgerblue | #1E90FF | ||
| firebrick | rouge brique | #B22222 | |
| floralwhite | blanc floral | #FFFAF0 | |
| forestgreen | vert forêt | #228B22 | |
| fuchsia | fuchsia | #FF00FF | |
| gainsboro | #DCDCDC | ||
| ghostwhite | blanc spectral | #F8F8FF | |
| gold | or | #FFD700 | |
| goldenrod | jaune paille | #DAA520 | |
| gray | gris | #808080 | |
| green | vert | #008000 | |
| greenyellow | jaune-vert | #ADFF2F | |
| honeydew | miellé | #F0FFF0 | |
| hotpink | rose chaud | #FF69B4 | |
| indianred | rouge indien | #CD5C5C | |
| indigo | indigo | #4B0082 | |
| ivory | ivoire | #FFFFF0 | |
| khaki | kaki | #F0E68C | |
| lavender | lavande | #E6E6FA | |
| lavenderblush | lavande rougeâtre | #FFF0F5 | |
| lawngreen | vert prairie | #7CFC00 | |
| lemonchiffon | jaune chiffoné ? | #FFFACD | |
| lightblue | bleu clair | #ADD8E6 | |
| lightcoral | corail clair | #F08080 | |
| lightcyan | cyan clair | #E0FFFF | |
| lightgoldenrodyellow | jaune paille clair | #FAFAD2 | |
| lightgreen | vert clair | #90EE90 | |
| lightgrey | gris clair | #D3D3D3 | |
| lightpink | rose clair | #FFB6C1 | |
| lightsalmon | saumon clair | #FFA07A | |
| lightseagreen | vert océan clair | #20B2AA | |
| lightskyblue | bleu ciel clair | #87CEFA | |
| lightslategray | gris ardoise clair | #778899 | |
| lightsteelblue | bleu acier clair | #B0C4DE | |
| lightyellow | jaune clair | #FFFFE0 | |
| lime | citron vert | #00FF00 | |
| limegreen | citron vert foncé | #32CD32 | |
| linen | blanc de lin | #FAF0E6 | |
| magenta | magenta | #FF00FF | |
| maroon | marron | #800000 | |
| mediumaquamarine | aigue-marine moyen | #66CDAA | |
| mediumblue | bleu moyen | #0000CD | |
| mediumorchid | orchidée moyen | #BA55D3 | |
| mediumpurple | lavande | #9370DB | |
| mediumseagreen | vert océan moyen | #3CB371 | |
| mediumslateblue | bleu ardoise moyen | #7B68EE | |
| mediumspringgreen | vert printemps moyen | #00FA9A | |
| mediumturquoise | turquoise moyen | #48D1CC | |
| mediumvioletred | rouge violacé moyen | #C71585 | |
| midnightblue | bleu nuit | #191970 | |
| mintcream | blanc mentholé | #F5FFFA | |
| mistyrose | rose voilé | #FFE4E1 | |
| moccasin | beige mocassin | #FFE4B5 | |
| navajowhite | blanc navarro | #FFDEAD | |
| navy | bleu marine | #000080 | |
| oldlace | vieux blanc | #FDF5E6 | |
| olive | vert olive | #808000 | |
| olivedrab | vert olive terne | #6B8E23 | |
| orange | orange | #FFA500 | |
| orangered | rouge orangé | #FF4500 | |
| orchid | orchidée | #DA70D6 | |
| palegoldenrod | jaune paille pâle | #EEE8AA | |
| palegreen | vert pâle | #98FB98 | |
| paleturquoise | turquoise pâle | #AFEEEE | |
| palevioletred | rouge violacé pâle | #DB7093 | |
| papayawhip | papaye délavé | #FFEFD5 | |
| peachpuff | pêche passé | #FFDAB9 | |
| peru | pérou | #CD853F | |
| pink | rose | #FFC0CB | |
| plum | prune | #DDA0DD | |
| powderblue | bleu poudré | #B0E0E6 | |
| purple | violet | #800080 | |
| red | rouge | #FF0000 | |
| rosybrown | bois de rose | #BC8F8F | |
| royalblue | bleu roi | #4169E1 | |
| saddlebrown | cuir | #8B4513 | |
| salmon | saumon | #FA8072 | |
| sandybrown | brun sable | #F4A460 | |
| seagreen | vert océan | #2E8B57 | |
| seashell | coquillage | #FFF5EE | |
| sienna | terre-de-sienne | #A0522D | |
| silver | argent | #C0C0C0 | |
| skyblue | bleu ciel | #87CEEB | |
| slateblue | bleu ardoise | #6A5ACD | |
| slategray | gris ardoise | #708090 | |
| snow | blanc neigeux | #FFFAFA | |
| springgreen | vert printemps | #00FF7F | |
| steelblue | bleu acier | #4682B4 | |
| tan | brun tané | #D2B48C | |
| teal | sarcelle | #008080 | |
| thistle | chardon | #D8BFD8 | |
| tomato | rouge tomate | #FF6347 | |
| turquoise | turquoise | #40E0D0 | |
| violet | parme | #EE82EE | |
| wheat | blé | #F5DEB3 | |
| white | blanc | #FFFFFF | |
| whitesmoke | blanc fumée | #F5F5F5 | |
| yellow | jaune | #FFFF00 | |
| yellowgreen | vert jaunâtre | #9ACD32 |
|
ex : .contenuArticle {color:red;} .contenuArticle {color:#9ACD32;} .contenuArticle {color:#FFFFFF;} équivaut à écrire .contenuArticle {color:white;} |
Commentaires
Top bien sympa ça. Tu sais ce qui serait bien c'est de nous donner quelques polices à caractères qui puissent se lire partout ou sous IE de façon certaine. Je suis preneuse moi.
commentaire n° : 1
posté par :
Chuipala
(site web)
le: 07/02/2008 19:54:25
Malheureusement, en dehors des polices citées ci dessus, rien n'est garanti !
réponse de : [dd] (site web)
le: 07/02/2008 20:22:40
On fera avec alors ;)
commentaire n° : 2
posté par :
Chuipala
(site web)
le: 07/02/2008 23:19:34
Je note qu'il y a ça là pour mon prochain design (et ouais... je planche déjà dessus... sera pas pas rouge, sera pas rose, sera pas marron... sera blleeeeeeuuuuuuu!!! Ouais y a jamais eu vraiment de bleu sur le blog, il est temps de remédier à ça... puis j'ai vu une peinture chinoise qui m'a inspirée... raahhh je voudrais l'avoir chez moi 
)
J'ai déjà prospecté les fonds, les motifs... humm...
)J'ai déjà prospecté les fonds, les motifs... humm...
commentaire n° : 3
posté par :
Chen Jie 
(site web)
le: 09/02/2008 11:45:26
(site web)
le: 09/02/2008 11:45:26
Ah !! Interessant !!! C'est pour quand ???
réponse de : [dd] (site web)
le: 09/02/2008 12:16:19
Humm... quand j'aurai de déclic... pour le moment je laisse les choses se faire, trouver mes idées...
Mais en faite je pense que ça sera dans les couleurs du logo Paris-Beijing qui dans le message de bienvenue en page d'accueil... le bleu c'est certain, pour le vert, peut-être plus acidulé...
Mais je ne trouve pas encore les fonds de mes rêves pour monter un premier essai!
Et puis le fond du nouvel an restera au moins jusqu'à la fête des lanternes... donc pas avant la fin du mois quoi... (aller, ne t'impatiete pas, ça va venir vite!!)
commentaire n° : 4
posté par :
Chen Jie
(site web)
le: 09/02/2008 13:13:59
(site web)
le: 09/02/2008 13:13:59
Vivement !!!
réponse de : [dd] (site web)
le: 09/02/2008 19:15:04
Il y a actuellement
1 personne(s)
sur ce blog !!!
1 personne(s)
sur ce blog !!!
En vente !
Liens
Publicité
Recherche
Pub !
