Cascade & Paragraphes.
Cascade & Paragraphes.
1.Cascading.
Les différends styles peuvent se combiner entre-eux.
On peut affecter un style au tag Body pour donner les conditions de défaut de
la page et ensuite formater un mot, une phrase ou un paragraphe par un span.
Exemple : Condition de défaut, Fonte Arial, Taille 20pt,
couleur noir pour le texte, Image de fond, lighttex.jpg, couleur de fond blanc.
<Body background="images/lighttex.jpg"
bgcolor="#FFFFFF" style="font-family:Arial;font-size:20pt;color:
black">
Mettre un groupe de mots en bleu sur fond jaune et en
italique.
<span style="color : blue ;
background-color : yellow ; font-style: italic"> groupe de mots
</span>
Exercice : Changer la taille ou la famille de la fonte dans
le style du tag Body, observer que cela se répercute à l'intérieur de
l'espace délimité par le span.
Exercice : Changer dans le style du span la couleur blue à
red, rajouter la mise en gras. Corrigé
Exercice : Remplacer le texte dans le corps de la page par un
autre, encadrer un groupe de mots par un span de style, color navy,
background-color silver, gras. Corrigé
2.Paragraphe
Un bon moyen de coder un paragraphe est d'employer le tag
<Div>, il s'emploie de la même façon que le <span>. C'est un bon
tag pour appliquer une série de commandes telles que :
Indentation de
la première ligne
text-indent Cette commande provoque
indentation, (comme la touche Tab sur un traitement de texte), de la première
ligne du texte formaté. La manière la plus pratique de donner la valeur
d'indentation est en pourcentage tel que : text-indent : 25%.
Cliquez sur Exemple
d'indentation, observez le code dans la fenêtre ci-dessous, donnez
différentes valeurs en pourcentage à l'indentation.
Hauteur de ligne
line-height Permet de faire varier la
hauteur entre deux lignes. Cette hauteur peut être écrite de deux façons.
En pourcentage 100% donne la hauteur normale, la valeur peu
être supérieure ou inférieure a 100%. Exemple
de variation de hauteur, ici la signature a une hauteur entre lignes de 30% la
valeur normale, créant un effet intéressant. Pour décaler le nom par rapport
au prénom, on insère des points, pour cacher ces points à l'écran on passe
la couleur de ces points à celle du fond, (blanc), par <span
style="color:white">.......</span> Faire varier ce
pourcentage.
Appliquer au texte surmontant la signature la commande
line-height : 150%, faire varier ce pourcentage. Correction.
En valeur numérique tel que line-height : 1.2 donnant 120%
de la hauteur normale. Exemple sur le même texte que précédemment. faire
varier ce chiffre.
Alignement du
texte
text-align Cette commande fixe la manière
dont le texte est aligné dans l'élément, (dans les exemples dans le tag Div),
valeurs possibles, left, right, center, justify
Ces exemples s'appliquent à la zonez de texte ci-dessous.
Exemple : alignement à
droite
Exemple : alignement au
centre
Exemple : justifier
Exemple : alignement à
gauche (condition par défaut)
Cliquez sur les liens ci-dessus, observez la syntaxe et les
résultats.
Decoration
text-decoration Cette commande permet
d'afficher des textes soulignés, barrés ou clignotant, Valeurs possibles,
none, underline, line-through, blink
exemple : text-decoration : underline dans les exemples
suivant on emploiera un tag Span pour modifier un groupe de mots.
Exemple : Souligné
underline
Exemple : Barré
line-through
Exemple : Clignotant
blink Ne fonctionne pas sous Internet Explorer 4 et 5.
Exemple : Suppression
none, cette valeurs permet de supprimer la décoration hérité par la cascade.
dans l'exemple on voit que le span le plus intérieur permet de supprimer le
soulignement pour le groupe de mots "de défaut".
Transformation
Ces exemples s'appliquent à la zone de texte ci-dessus.
text-transform Cette commande permet la capitalisation, mise
en majuscules ou en minuscules, valeur possible, capitalize, uppercase,
lowercase, none.
Exemple : Capitalisation
capitalize met en capitales la première lettre des mots.
Exemple : Majuscules
uppercase convertit le texte en majuscules, on peut avoir des
problèmes pour mettre en majuscule les lettres accentuées sous Netscape.
Exemple : Minuscules
lowercase convertit le texte en minuscules
Exercice : créer un span avec le style majuscules sur un
groupe de mots, inclure un autre span à none pour supprimer la mise en
majuscules d'un groupe de mots.
Corrigé : rien
none suppression de la transformation
Marges
Cette commande entoure le
paragraphe de marges invisibles, comme si on définissait un espace
rectangulaire, sur un des cotés du paragraphe On peut spécifier la
valeur de ces marges coté par coté.
 |
Les marges sont en jaune, les paragraphes en bleu |
Syntaxe, margin-top margin-rigth margin-bottom margin-left
Haut
droit
bas
gauche
exemple, margin-left : 50pt ou margin-left : 20%
Ou en une seule instruction suivant l'ordre précédent
margin : 10pt 20pt
30pt 40pt
 |
Moyen mnémotechnique, vous avez surement remarqué que l'ordre des valeurs de marges est prise en tournant autour d'un rectangle dans le sens des aiguilles d'une montre. |
Exercice : Modifier les valeurs de marge, observer les décalages qui s'ensuivent. Pour la marge droite, (deuxième chiffre), ou la marge de gauche, (dernier chiffre), pour des faibles valeurs, <100pt vous n'observerez rien, > 100 à 200 pt, vous verrez la longueur des lignes diminuer, en effet vous définissez une marge entre le paragraphe concerné et un autre paragraphe ou le bord de la fenêtre. Si la marge définit est trop importante la largeur du paragraphe diminue donnant des effets pas toujours désirés. Moralité, prévoir des marges raisonnables.
Alignement du paragraphe
La commande float permet d'aligner le paragraphe à droite ou à gauche à l'intérieur du contenant. Ce contenant peut être un autre paragraphe ou l'écran lui même. |
Sommaire |  |
| Précédent |  |
Suivant |