Mise en forme de texte

Alignement horizontal d'un texte avec text-align

La propriété de feuille de style css text-align permet de spécifier l'alignement horizontal du texte (alignement d'un contenu en-ligne dans un élément de type bloc) et peut prendre les valeurs suivantes :
- left, alignement du texte gauche,
- center, alignement du texte au milieu,
- right, alignement du texte à droite,
- justify, alignement du texte à droite et à gauche.
- chaîne, spécifie une chaîne sur laquelle les cellules d'un tableau vont s'aligner. Utilisée seulement pour le cellules d'un tableau (reconnue par aucun navigateur).
- inherit, hérite de la propriété du son parent(css2).

Syntaxe :
text-align: left;
text-align : center;
text-align : right;
text-align : justify;
text-align : ".";

Alignement vertical

Il se peut que vous ayez besoin de centrer verticalement du texte. Il convient alors d'imbriquer un bloc "contenu" dans un bloc "contenant" à l'aide de deux div.
C'est le principe du café dans la tasse, si pas de tasse, pas de café... ça marche moins bien sans la tasse... forcément.
Explication :

Pour cela, vous devez spécifier les marges droite et gauche du contenu en auto.
Feuille de style CSS :

#contenant{
border: 1px solid red;
width: 350px;
height: 160px;
}
#contenu{
width: 150px;
height: 150px;
border: 1px solid white;
margin-right: auto;
margin-left: auto;
}

Code HTML :

<div id="contenant">
<div id="contenu">Mon bloc centré horizontalement</div>
</div>
NB : Sous Internet Explorer un simple text-align: center dans les propriétés de style du contenant permet de centrer le bloc contenu. Cependant pour Firefox cela ne fonctionne pas.

Définir la couleur d'un texte

Définir la couleur d'un texte avec l'attribut color vous autorise à choisir entre différents types de valeurs.
La syntaxe employée ici concerne la feuille de style séparée du code html et non pas celle imbriquée dedans.(Par souci de légèreté, ce que les utilisateurs de logiciels WYSWYG {What you see is what you get} ne peuvent comprendre d'ailleurs...)
Il n'existe pas de couleur par défaut, sauf celle du navigateur qui en principe est "noir". L'élément enfant hérite de la couleur de l'élément parent. Quelle famille ! Sic.

Color Propriété pour définir la couleur du texte.
- valeur hexadécimale : #FFFFFF , #FF00FF, autres couleurs.
- nom de la couleur : white, black, blue...
- code RGB (Red, Green, Blue = rouge, vert, bleu) de 0 à 255
	Exemple :
	h1 { color: #0000FF ; }
	ou : h1 {color: rgb(0,0,255) ; }
	ou enfin en pourcentage : h1 {color: rgb(0%,0%,100%) ;}
	

Norme W3C CSS

Seulement 16 noms de couleur sont valables pour être en conformité avec la norme de W3C CSS (définis dans la spécification HTML 4.0) :

aqua/cyan #00FFFFblack #000000
blue #0000FFfuchsia #FF00FF
gray #808080green #008000
lime #00FF00maroon #800000
navy #000080olive #808000
purple #800080red #FF0000
silver #C0C0C0teal #008080
white #FFFFFFyellow #FFFF00

Pour toutes les autres nuances de couleurs, il est préférable d'employer la valeur hexadécimale. Veillez aussi à ne pas afficher de couleurs qui risquent de perturber l'oeil du visiteur. Par souci de confidentialité, je ne citerai pas de site genre "parking à boulet" mais sachez que cela existe... si... si !

Letter-spacing

Letter-spacing Propriété pour définir l'espacement entre les caractères.
Rien ne sert de courir, il faut partir à point : espacement "letter-spacing : -1px".
Rien ne sert de courir, il faut partir à point : espacement "letter-spacing : 1px".
Rien ne sert de courir, il faut partir à point : espacement "letter-spacing : 3px".

Word-spacing

Word-spacing Propriété pour définir l'espacement entre les mots.
Comme l'on pouvait s'y attendre, et pas forcément pour les adeptes des problèmes de vue, mais tout bonnement pour des raisons esthétiques, il est possible de régler l'espacement des mots.
Rien ne sert de courir, il faut partir à point : espacement "word-spacing : 3px".
Rien ne sert de courir, il faut partir à point : espacement "word-spacing : 13px".

Text-transform

text-transform Propriété pour forcer les minuscules ou les majuscules.
Peut prendre les valeurs :
	none : cette valeur est sans effet sur le texte... non sans blague !
lowercase : toutes les lettres de chaque mot sont en minuscules
uppercase : toutes les lettres de chaque mot sont en majuscules
capitalize : la première lettre de chaque mot seulement est en majuscule
^^- ne génère pas de revenu supplémentaire pour autant ! -


Text-decoration

text-decoration Propriété pour souligner, surligner, barrer, clignoter.
Peut prendre les valeurs :
	underline  souligne dessous
overline souligné dessus
line-through texte barré
blink texte clignote (avec Netscape et Firefox)
none soulignement annulé et valeur par défaut


Text-shadow

text-shadow Propriété pour ajouter un effet d'ombrage à du texte.
Cette propriété accepte une liste de valeurs, séparées par une virgule, représentant des effets d'ombrage à appliquer au texte d'un élément. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ne recouvriront jamais le texte lui-même. Les effets d'ombrage ne modifient pas la taille d'une boîte, mais peuvent s'étendre au-delà des limites de celle-ci.

Mode opératoire : ici on spécifie une liste d'effets d'ombrage.
- Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur grise et sans effet de flou.
- Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur verte et un effet de flou.
- Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété color de l'élément concerné qui sera utilisée :

Exemple :

	H2 { text-shadow: gray 3px 3px, green -3px 3px 2px, 3px -3px }
	

Syntaxe :

	Property {text-shadow:([shadow-color] [x-offset] [y-offset]
[blur-radius]? ",")*([shadow-color] || [x-offset] [y-offset] [blur-radius]?)}
NB : la cerise sur le sunday, c'est que text-shadow qui fait partie des css 2 ne sert pas à grand chose : c'est une propriété qui n'est reconnue par aucun navigateur. Sic! On aime encore bien développer avec des trucs qui servent à rien... LoL

© latarteauchips 2024
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries
Valid HTML 4.01 Transitional