Propriétés des textes - HTML et Javascript

line-height (lineHeight) - interligne

L'interligne peut être spécifié directement en points pt ou en pourcentage %. Si l'on ne donne ni l'unité ni le pourcentage, le nombre est interprété comme un multiplicateur. Ainsi, 1.2 ou 1.2em multiplie la valeur par défaut de l'interligne par 1.2 ; en revanche 20pt donnera un interligne de 20 points. Il faut noter que, d'une manière générale, lorsqu'on travaille en relatif (pourcentage), les définitions incluses héritent de la modifi cation d'interligne.

P { line-height: 20pt }

text-align (textAlign) - alignement, justification

Comme dans un traitement de texte, on peut aligner le texte à gauche avec la valeur left, à droite avec right, centrer avec center ou le justifier avec justify.

P { text-align: justify }

Les feuilles de style

text-indent (textlndent) - indentation

Le retrait du texte sur la première ligne d'un bloc se détermine en points ou en pourcen tage, de la même façon que pour l'interligne. On peut appliquer un retrait ou une indenta tion à la première ligne d'un paragraphe P d'un bloc Hn.

P { text-indent: 2em }

text-transform (textTransform) traitement de la casse

Cette option est très intéressante lorsque le texte à afficher n'est pas composé mais plutôt issu d'un traitement automatique, une base de données par exemple. On peut forcer le passage automatique en minuscules par la valeur lowercase, en capitales par la valeur

uppercase, ou mettre le premier caractère seulement en majuscules par la valeur capita- lize.

H1 { text-transform: capitalize }

Le bloc

Toute balise provoquant un espace de type paragraphe (<P>, <H1>...) définit un bloc qui peut être positionné précisément dans une page et dont on peut choisir la couleur ou l'image en fond. Ce positionnement précis permet la conception de documents avec une mise en page élaborée, très proche du document papier. Mais attention ! le positionne ment est relatif par rapport au dernier élément inscrit dans la page.

Il est possible de fixer la taille exacte du bloc en hauteur height et en largeur width ainsi que la couleur du fond background-color (backgroundColor), ou de disposer une image en fond background-image (backgroundlmage).

Les marges peuvent être choisies de façon indépendante : • la marge à droite : margin-right (marginRight) • la marge à gauche : margin-left (marginLeft) • la marge en haut : margin-top (marginTop) • le marge en bas : margin-bottom (marginBottom) On peut aussi régler le blanc autour du bloc :

• espace à droite : padding-right (paddingRight) • espace à gauche : padding-left (paddingLeft) • espace en haut : padding-top (paddingTop) • esapce en bas : padding-bottom (paddingBottom )

Programmation HTML et JavaScript

La bordure est entièrement paramétrable grâce au mot-clé border-style (borderStyle)

où le paramètre borderStyle permet d'indiquer le style du cadre : • avec la valeur none pour pas de bordure,

• avec la valeur 3D pour un effet de relief, • avec la valeur solid pour un trait plein.

Chacun des traits composant la bordure peut avoir une taille différente :

• border-top-width (borderTopWidth) pour le segment du haut,

• border-right-width (borderRightWidth) pour le segment de droite,

• border-bottom-width (borderBottomWidth) pour le segment du bas,

• border-left-width (borderLeftWidth) pour le segment de gauche, La couleur de la bordure est définie par border-color (borderColor).

RÉSUMÉ

Les styles d'une page HTML sont définis entre les balises

<STYLE>

</STYLE>.

L'attribut

TYPE

de cette balise prendra la valeur

text/css

text/javascript

selon que l'on utilisera l'une ou l'autre des deux nor mes.

Dans la norme

CSS

(<STYLE TYPE="text/css">, un style se définit par la nom de la balise (P, H1, CITE par exemple) suivi, entre accolades {} des définitions afférentes à cette balise. On peut mettre entre accola des autant de définitions que nécessaire en les séparant par un point- virgule (;). Chaque définition est constituée d'un mot-clé (font-size, color par exemple) séparé de sa valeur par deux points (:).

On peut grouper plusieurs balises sur une même définition, il suffit pour cela de séparer les balises par une

virgule.

Il est possible d'indiquer que le style ne s'applique à une balise que lorsque celle-ci est incluse dans une autre balise (sélection contex tuelle). Pour ce faire, on fait précéder la définition de la liste des bali ses, mais cette fois le séparateur n'est pas la virgule mais

l'espace.

Dans la norme

JavaScript

(<STYLE TYPE="text/javascript">), la syn taxe est plus près du nommage objet. On déclare donc pour une balise donnée le mot-clé

tags,

qui indique que l'on travaille sur une balise. On indique ensuite, derrière un point, la balise (P, H1, CITE par exem ple) ; enfin, toujours séparée par un point, la propriété de la balise (fontSize, color par exemple). L'opérateur égale = permet d'affecter une valeur.

En JavaScript la sélection contextuelle commence par le mot-clé

contextual

suivi entre

parenthèses

de la liste des balises. Chaque balise est précédée du mot clé

virgule.

Il existe une notion de classes permettant d'affecter un style à la demande. <P CLASS=laUne> permet par exemple d'affecter un style particulier (laUne) ponctuel à la balise <P>.

Une classe est définie par un nom précédé d'un point (.) en mode CSS et par le mot-clef

classes

en mode JavaScript. Les définitions sont fai tes comme pour un style de balise.

Afin d'augmenter la souplesse, il existe un niveau supplémentaire de réglage,

l'ID. Il

permet par exemple de modifier ponctuellement une valeur définie dans une classe.

En mode CSS, un ID est défini par un nom précédé du caractère dièse (#), tandis qu'en mode JavaScript l'ID est défini par le mot-clef

ids.

On peut ainsi combiner, dans une même balise, CLASS et ID.

Entre les balises

<SPAN CLASS= ... ID=...>

</SPAN>,

on peut affecter un style à un texte non standard (non balisé).

Il est possible, grâce à l'attribut

STYLE,

de définir ponctuellement un style pour une balise (<P STYLE="fontSize=50">).

Enfin, la balise

<LINK REL="stylesheet" TYPE="text/

javascript_ou_css" HREF="url_du_fichier">

permet de référencer un fichier externe contenant les styles du document.

Les propriétés permettant d'agir sur les textes sont :

Dans le document HTML et Javascript (Page 136-140)