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 #00FFFF | black #000000 |
| blue #0000FF | fuchsia #FF00FF |
| gray #808080 | green #008000 |
| lime #00FF00 | maroon #800000 |
| navy #000080 | olive #808000 |
| purple #800080 | red #FF0000 |
| silver #C0C0C0 | teal #008080 |
| white #FFFFFF | yellow #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
Warning: include(/footer.php): failed to open stream: No such file or directory in /var/www/sda/2/2/latarteauchips/css/css-style-texte.php on line 167
Warning: include(): Failed opening '/footer.php' for inclusion (include_path='/var/www/sda/2/2/latarteauchips/include:.:/usr/php5.6.34/lib/php') in /var/www/sda/2/2/latarteauchips/css/css-style-texte.php on line 167