{"id":19,"date":"2023-12-21T21:08:17","date_gmt":"2023-12-21T21:08:17","guid":{"rendered":"https:\/\/yzaz.net\/html\/?page_id=19"},"modified":"2024-11-03T09:59:37","modified_gmt":"2024-11-03T09:59:37","slug":"css-texte","status":"publish","type":"page","link":"https:\/\/yzaz.net\/html\/css-texte\/","title":{"rendered":"CSS – Mise en forme du texte"},"content":{"rendered":"

Couleurs et arri\u00e8res-plans<\/strong>
\nLa couleur d’avant-plan : la propri\u00e9t\u00e9 ‘color’
\nLa propri\u00e9t\u00e9 color d\u00e9crit la couleur d’avant-plan d’un \u00e9l\u00e9ment.
\nPar exemple, les titres rouge fonc\u00e9. h1. <\/p>\n

\r\nh1 { color: #ff0000; } \r\n<\/pre>\n
La propri\u00e9t\u00e9 ‘background-color’<\/strong>
\nLa propri\u00e9t\u00e9 background-color d\u00e9crit la couleur d’arri\u00e8re-plan.
\nPour changer la couleur d’arri\u00e8re-plan d’une page enti\u00e8re, il faudrait l\u2019 appliquer \u00e0 l’\u00e9l\u00e9ment body<\/strong>.<\/p>\n
Exp:  Les couleurs d’arri\u00e8re-plan diff\u00e9rentes sont appliqu\u00e9es aux \u00e9l\u00e9ments body <\/strong>et h1<\/strong>.<\/p>\n
\r\nbody { background-color: #FFCC66; } \r\nh1 { color: #990000;\r\n background-color: #FC9804; } \r\n<\/pre>\n
Les images d’arri\u00e8re-plan [background-image]<\/strong>
\nbackground-image : ins\u00e9rer une image d’arri\u00e8re-plan. <\/p>\n
\r\nbody \r\n{ background-color: #FFCC66;\r\n background-image: url("butterfly.gif");\r\n } \r\nh1 \r\n{ color: #990000; \r\nbackground-color: #FC9804; \r\n} \r\n<\/pre>\n
R\u00e9p\u00e9ter l’image d’arri\u00e8re-plan [background-repeat]<\/strong>
\nLe tableau d\u00e9crit les quatre valeurs diff\u00e9rentes de background-repeat.<\/p>\n\n\n\n\n\n\n
Valeur\t\t<\/td>\nDescription<\/td>\n<\/tr>\n
Background-repeat: repeat-x\t<\/td>\nL’image se r\u00e9p\u00e8te horizontalement<\/td>\n<\/tr>\n
background-repeat: repeat-y\t<\/td>\nL’image se r\u00e9p\u00e8te verticalement<\/td>\n<\/tr>\n
background-repeat: repeat\t<\/td>\nL’image se r\u00e9p\u00e8te horizontalement et verticalement<\/td>\n<\/tr>\n
background-repeat: no-repeat\t<\/td>\nL’image ne se r\u00e9p\u00e8te pas<\/td>\n<\/tr>\n<\/table>\n
Pour \u00e9viter la r\u00e9p\u00e9tition d’une image d’arri\u00e8re-plan: <\/p>\n
\r\nbody \r\n{ \r\nbackground-color: #FFCC66; \r\nbackground-image: url("butterfly.gif"); \r\nbackground-repeat: no-repeat; \r\n}\r\n h1 \r\n{ \r\ncolor: #990000; \r\nbackground-color: #FC9804; \r\n} \r\n<\/pre>\n
background-attachment: pour  fixer ou d\u00e9filer l’image d’arri\u00e8re-plan avec l’\u00e9l\u00e9ment conteneur.<\/p>\n\n\n\n\n
Valeur<\/td>\n\n<\/tr>\n
Background-attachment: scroll<\/td>\n\n<\/tr>\n
Background-attachment: fixed<\/td>\n\n<\/tr>\n<\/table>\n
La famille de polices [font-family]<\/strong>
\nfont-family : indique la liste prioritaire des polices \u00e0 utiliser pour l’affichage d’un \u00e9l\u00e9ment donn\u00e9 ou d’une page Web. Si la premi\u00e8re police de la liste n’est pas disponible sur l’ordinateur utilis\u00e9 pour acc\u00e9der au site, la police suivante est essay\u00e9e et ainsi de suite.<\/p>\n
La  diff\u00e9rence entre les polices :<\/strong><\/p>\n
On commence par la police pr\u00e9f\u00e9r\u00e9e suivie par des polices de remplacement.
\nIl est recommand\u00e9 de terminer la liste par une famille g\u00e9n\u00e9rique. Ainsi, la page s’affichera au moins avec une police de la m\u00eame famille si aucune des polices indiqu\u00e9es n’\u00e9tait disponible.
\nExp  :<\/p>\n
\r\nh1 {font-family: arial, verdana, sans-serif;}\r\n h2 {font-family: "Times New Roman", serif;}\r\n<\/pre>\n
Le style des polices [font-style]<\/strong>
\nLa propri\u00e9t\u00e9 font-style d\u00e9finit le style de la police concern\u00e9e \u00eatre normal, italic ou oblique.
\nExp:<\/p>\n
\r\nh1 {font-family: arial, verdana, sans-serif;} \r\nh2 {font-family: "Times New Roman", serif;\r\n       font-style: italic;} \r\n<\/pre>\n
La propri\u00e9t\u00e9 font-variant sert \u00e0 choisir entre les variantes normal ou small-caps d’une police.
\nUne police small-caps utilise des lettres en capitales de taille r\u00e9duite \u00e0 la place des lettres en minuscules.
\nExp :<\/p>\n
\r\nh1 {font-variant: small-caps;}\r\nh2 {font-variant: normal;} \r\n<\/pre>\n
La graisse des polices [font-weight]<\/strong>
\nFont-weight d\u00e9crit le degr\u00e9 de graisse de  la police. Elle peut avoir une graisse normal ou bold.<\/p>\n
Exp:<\/p>\n
\r\np {font-family: arial, verdana, sans-serif;} \r\ntd {font-family: arial, verdana, sans-serif; \r\n      font-weight: bold;}\r\n<\/pre>\n
Le corps des polices [font-size]<\/strong>
\nLe corps d’une police se r\u00e8gle par la propri\u00e9t\u00e9 font-size.
\nOn peut choisir parmi beaucoup d’unit\u00e9s diff\u00e9rentes (par exemple, pixels et pourcentages) pour d\u00e9crire les corps des polices.
\nExp :<\/p>\n
\r\nh1 {font-size: 30px;} \r\nh2 {font-size: 12pt;} \r\nh3 {font-size: 120%;} \r\np {font-size: 1em;} \r\n<\/pre>\n
Il existe une diff\u00e9rence essentielle entre les quatre unit\u00e9s pr\u00e9c\u00e9dentes. Les unit\u00e9s \u00ab px \u00bb et \u00ab pt \u00bb font que le corps de la police est absolu, tandis que \u00ab % \u00bb et \u00ab em \u00bb permettent \u00e0 l’utilisateur de l’ajuster si n\u00e9cessaire. Il est souhaitable utiliser des unit\u00e9s ajustables telles que \u00ab % \u00bb ou \u00ab em \u00bb. <\/p>\n
Concision [font]<\/strong>
\nAvec la propri\u00e9t\u00e9 raccourcie font, il est possible de couvrir toutes les diff\u00e9rentes propri\u00e9t\u00e9s de police en un coup.
\nExp:<\/p>\n
\r\np {\tfont-style: italic; \r\n\tfont-weight: bold; \r\n\tfont-size: 30px; \r\n\tfont-family: arial, sans-serif; } \r\n<\/pre>\n
Avec la propri\u00e9t\u00e9 raccourcie, on peut simplifier le code :<\/p>\n
\r\np { font: italic bold 30px arial, sans-serif; } \r\n<\/pre>\n
L’ordre des valeurs de la propri\u00e9t\u00e9 font est le suivant :<\/p>\n
font-style | font-variant | font-weight | font-size | font-family<\/p>\n
L’indentation du texte [text-indent]<\/strong>
\nLa propri\u00e9t\u00e9 text-indent permet d’ajouter une touche d’\u00e9l\u00e9gance aux paragraphes de texte en appliquant une indentation \u00e0 la premi\u00e8re ligne du paragraphe.
\nExp:<\/p>\n
\r\np { text-indent: 30px; }\r\n<\/pre>\n
L’alignement du texte [text-align]<\/strong>
\nLa propri\u00e9t\u00e9 CSS text-align correspond \u00e0 l’attribut align utilis\u00e9 dans le HTML. Le texte peut \u00eatre align\u00e9 \u00e0 gauche (left), \u00e0 droite (right) ou centr\u00e9 (center). La valeur justify \u00e9tirera chaque ligne de sorte que les marges \u00e0 gauche et \u00e0 droite soient droites toutes les deux.
\nExp:<\/p>\n
\r\nth { text-align: right; } \r\ntd { text-align: center; } \r\np { text-align: justify; }\r\n<\/pre>\n
La d\u00e9coration du texte [text-decoration]<\/strong>
\nLa propri\u00e9t\u00e9 text-decoration permet d’ajouter des \u00ab effets \u00bb diff\u00e9rents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus.
\nExp:<\/p>\n
\r\nh1 { text-decoration: underline; } \r\nh2 { text-decoration: overline; } \r\nh3 { text-decoration: line-through; }\r\n<\/pre>\n
L’espacement des lettres [letter-spacing]<\/strong>
\nL’espacement entre les caract\u00e8res du texte peut \u00eatre d\u00e9fini avec la propri\u00e9t\u00e9 letter-spacing. La valeur de la propri\u00e9t\u00e9 est celle de l’espacement d\u00e9sir\u00e9.
\nExp:<\/p>\n
\r\nh1 { letter-spacing: 6px; } \r\np { letter-spacing: 3px; } \r\n<\/pre>\n
La transformation du texte [text-transform]<\/strong><\/p>\n
La propri\u00e9t\u00e9 text-transform contr\u00f4le la capitalisation du texte. On peut choisir une capitalisation initiale, une mise en majuscules ou une mise en minuscules, ind\u00e9pendamment de l’aspect du texte original dans le code HTML.<\/p>\n
Exp: le mot \u00ab titre \u00bb que l’on peut pr\u00e9senter \u00e0 l’utilisateur comme \u00ab TITRE \u00bb ou \u00ab Titre \u00bb. <\/p>\n
La propri\u00e9t\u00e9 text-transform admet quatre valeurs possibles :
\nCapitalize: Elle capitalise la premi\u00e8re lettre de chaque mot.
\nUppercase: Elle convertit toutes les lettres en majuscules.
\nLowercase: Elle convertit toutes les lettres en minuscules.
\nNone: Aucune transformation n\u2019est appliqu\u00e9e.<\/p>\n
Exp:<\/p>\n
\r\nh1 { text-transform: uppercase; } \r\nli { text-transform: capitalize; } \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Couleurs et arri\u00e8res-plans La couleur d’avant-plan : la propri\u00e9t\u00e9 ‘color’ La propri\u00e9t\u00e9 color d\u00e9crit la couleur d’avant-plan d’un \u00e9l\u00e9ment. Par exemple, les titres rouge fonc\u00e9. h1. h1 { color: #ff0000; } La propri\u00e9t\u00e9 ‘background-color’ La propri\u00e9t\u00e9 background-color d\u00e9crit la couleur d’arri\u00e8re-plan. Pour changer la couleur d’arri\u00e8re-plan d’une page enti\u00e8re, il faudrait l\u2019 appliquer \u00e0 l’\u00e9l\u00e9ment body. Exp: Les couleurs d’arri\u00e8re-plan<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/19"}],"collection":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":1,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/19\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}