Mise en forme des zones

Un article de ReseauGerontologiqueAutunois.

< retour Syntaxe

modifier Syntaxe
Créer ou corriger un article \| Objets: lettres et mots \| Objet: paragraphe \| Objet: tableau \| Objet: images \| Objet: pages \| Syntaxe \| BacAsable \| Index \| Mise en forme des zones \| ParserFunctions \| liste alphabétique des images \| liste alphabétique des modèles \| liste alphabétique des catégories

Sommaire

1 Les styles
2 Mise en forme de la police
3 Mise en forme du texte
4 Mise en forme de l'arrière-plan
- 4.1 style="Background-color" = proprièté pour la couleur de fond du texte (couleur d'arrière-plan).
5 Mise en forme des paragraphes
6 Positionnement
7 Pagination
- 7.1 Mise en forme des marges
  - 7.1.1 Définition de la marge externe
  - 7.1.2 Définition de la marge interne
- 7.2 Mise en forme des bordures

[modifier]

Les styles

Syntaxe générale des styles.

La balise SPAN (Inline-level) sert à appliquer une mise en forme différente sur des éléments du texte. Vous pouvez si besoin imbriquer des SPAN dans d'autres SPAN.

XXXXXXXXX

La balise DIV (Block-level) sert à appliquer une mise en forme différente pour des paragraphes.

<div style="propriétéA:valeurA1,valeurA2,etc; propriétéB:valeurB; etc;">XXXXXXXXX</div>

La balise d'interligne P sert aussi à appliquer une mise en forme différente en conservant les valeurs propres au navigateurs.

XXXXXXXXX

L'ensemble propriété:valeur s'appelle déclaration
L'ensemble "propriété:valeur; " s'appelle bloc
Si il y a plusieurs déclarations dans le même bloc, on parle de bloc de déclarations
" : " Les deux-points séparent la propriété de sa valeur.
" , " La virgule sépare les différentes valeurs d'une même propriété.
" ; " Le point-virgule est placé à la fin des déclarations surtout si il existe plusieurs blocs définissant le style. En plus des balises spécifiques à l'objet "paragraphe".

Pour l'utilisation des styles, à la place de la balise <span........., il faut utiliser la balise

<div.........</div> sans saut de ligne

où la balise

<p......... avec saut de ligne.

Voir aussi Les styles

[modifier]

Mise en forme de la police

[modifier]

style="font-family = la famille de polices

voir syntaxe des styles
Une famille de polices correspond à un groupe de polices, dont les caractères représentent des similitudes dans leur présentation
Deux familles distinctes
- famille classique : arial, verdana, times, ....
- famille générique :

serif,

Bodoni,
Roman,
Times,
Georgia,
"Times New Roman",
Garamond,
Etc

sans-serif,

Arial,
Helvetica,
Verdana,
Univers,
"MS Trebuchet",
Etc

cursive,

Chancery,
Script,
Brush,
Etc

fantasy,

Algerian,
Critter,
Rosewwod,
Etc

monospace,

Courier,
"MS Courier New",
Prestige,
Lucida,
"Everson Mono",
Etc

Mettre toujours une nom de famille générique en dernière position, au cas où le lecteur ne possède pas les polices choisit.

<span style="font-family:Symbol,times,sans-serif;">Citron, Clef, Ballon</span>	Citron, Clef, Ballon
<span style="font-family:times,sans-serif;">Citron, Clef, Ballon</span>	Citron, Clef, Ballon

[modifier]

style="font-style = le style de police

syntaxe des styles: XXXXX
La balise et la balise fermante

Syntaxe "style"
<i>Les trois mots à retenir dans un <span style="font-style:normal;">'''MMS''' </span>sont<span style="font-style:normal;"> Citron, Clef, Ballon.</span> Ils seront demandés plus tard.</i>
Les trois mots à retenir dans un MMS* sont Citron, Clef, Ballon. Ils seront demandés plus tard.*

[modifier]

style="font-variant = la variante de police

"font-variant" est une propriété servant à définir l'affichage d'un texte en petites capitales. A condition que la police possède ce type de casse, auquel cas, les caractères ont un aspect presque similaire aux lettres majuscules.
syntaxe des styles: XXXXX
§§§§§ = normal
§§§§§ = small-caps

[modifier]

style="font-size = la taille de police (ou corps)

voir syntaxe des styles
syntaxe : XXXXX

Taille en valeur relative
§§§§§ = larger	§§§§§ = medium	§§§§§ = smaller
Citron,	Clef,	Ballon

Taille en valeur absolue
§§§§§ = xx-large	§§§§§ = x-large	§§§§§ = large	§§§§§ = medium	§§§§§ = small	§§§§§ = x-small	§§§§§ = xx-small
Cit	ro	n, C	le	f, B	al	lon

Taille en pourcentage
§§§§§ = 250%	§§§§§ = 200%	§§§§§ = 150%	§§§§§ = 125%	§§§§§ = 100%	§§§§§ = 80%	§§§§§ = 70%
Cit	ro	n, C	le	f, B	al	lon

les nombres décimaux utilisent le point (et non la virgule) et les termes d'unités doivent coller sans espace avec les chiffres

Taille en longueur relative (em)
§§§§§ = 2.5em	§§§§§ = 2em	§§§§§ = 1.5em	§§§§§ = 1.25em	§§§§§ = 1em	§§§§§ = 0.8em	§§§§§ = 0.7em
Cit	ro	n, C	le	f, B	al	lon

[modifier]

style="font-weight" = l'épaisseur (la graisse) de la police

syntaxe : XXXXX
Les valeurs §§§§§ vont de 100 en 100, de 100 à 900, peu d'intérêt en pratique
§§§§§ = normal, cela correspond à 400
§§§§§ = bold, cela correspond à 700
Il est possible d'utiliser §§§§§ = bolder ou §§§§§ = lighter

Balises <b> et </b>
<b>Citron, Clef, Ballon</b>	Citron, Clef, Ballon

Style font-weight
100	400	600	700	900
Citron	Clef	Ballon	Clef	Citron
	normal		bold
lighter	normal	bolder

[modifier]

Mise en forme du texte

[modifier]

style="Text-transform"

Propriété pour forcer les minuscules ou les majuscules
§§§§§ = "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

Minuscules
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.
<span style="text-transform: lowercase;">Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.</span>
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.

Majuscules
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.
<span style="text-transform: uppercase;">Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.</span>
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.

Première lettre de chaque mots en majuscules
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.
<span style="text-transform: capitalize;">Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.</span>
Les trois mots à retenir dans un MMS sont CITRON, CLEF, BALLON. Ils seront demandés plus tard.

[modifier]

style="Text-decoration"

Propriété pour souligner, surligner, barrer, clignoter
§§§§§ = "overline" : surligner
§§§§§ = "line-through" : barré
§§§§§ = "underline" : souligner
§§§§§ = "blink" : clignote (avec Netscape et Firefox)
§§§§§ = "none" : soulignement annulé et valeur par défaut

Syntaxe avec le style décoration
<span style="Text-decoration:underline; ">Citron, Clef, Ballon</span>	<span style="Text-decoration:line-through; ">Citron, Clef, Ballon</span>
Citron, Clef, Ballon	Citron, Clef, Ballon
<span style="Text-decoration:overline; ">Citron, Clef, Ballon</span>	<span style="Text-decoration:blink; ">Citron, Clef, Ballon</span>
Citron, Clef, Ballon	Citron, Clef, Ballon

[modifier]

style="Color = Propriété pour définir la couleur du texte.

voir syntaxe des styles
Il s'agit de la couleur du premier plan

Citron

Citron

Pour définir le style d'une zone ou d'un paragraphe, il faut préférer la syntaxe ci-dessous.

<div style="color:#ff00ff;" >Citron</div>	Citron
<p style="color:#ff00ff;" >Citron</p>	Citron

[modifier]

style="Letter-spacing = Propriété pour définir l'espacement entre les caractères.

En Normal
<div style="letter-spacing:0mm;">Citron</div>	Citron

En cm
<div style="letter-spacing:1.5cm;">Citron</div>	Citron

En em
<div style="letter-spacing:1.5em;">Citron</div>	Citron

En px
<div style="letter-spacing:15px;">Citron</div>	Citron

En ex
<div style="letter-spacing:5ex;">Citron</div>	Citron

[modifier]

style="Word-spacing = Propriété pour définir l'espacement entre les mots.

En Normal
<div style="word-spacing:0mm;">Citron, Clef, Ballon</div>	Citron, Clef, Ballon

En cm
<div style="word-spacing:1.5cm;">Citron, Clef, Ballon</div>	Citron, Clef, Ballon

En em
<div style="word-spacing:1.5em;">Citron, Clef, Ballon</div>	Citron, Clef, Ballon

En px
<div style="word-spacing:15px;">Citron, Clef, Ballon</div>	Citron, Clef, Ballon

En ex
<div style="word-spacing:5ex;">Citron, Clef, Ballon</div>	Citron, Clef, Ballon

[modifier]

Mise en forme de l'arrière-plan

[modifier]

style="Background-color" = proprièté pour la couleur de fond du texte (couleur d'arrière-plan).

<span style="background-color: #CCFFFF;" >Citron, Clef, Ballon</span>
Citron, Clef, Ballon
<div style="background-color: #CCFFFF;" >Citron, Clef, Ballon</div>
Citron, Clef, Ballon
<p style="background-color: #CCFFFF;" >Citron, Clef, Ballon</p>
Citron, Clef, Ballon

Voir Tableau des codes couleurs

[modifier]

Mise en forme des paragraphes

[modifier]

Texte aligné à gauche

XXXXXXXXXX

Tau (Tubulin-Associated Unit) est une protéine neuronale associée aux microtubules. Elle a été initialement décrite comme le « facteur Tau », un élément capable d’induire la polymérisation de la tubuline en microtubules. En réalité, elle favorise la polymérisation et la stabilité des microtubules.

[modifier]

Texte au centre

XXXXXXXXXX

[modifier]

Texte aligné à droite

XXXXXXXXXX

[modifier]

Texte justifié

XXXXXXXXXX

[modifier]

Positionnement

[modifier]

Voir Positionnement absolu

[modifier]

Voir Positionnement relatif

[modifier]

Texte flottant

Utilisation de float et de clear
float peut prendre les valeurs left right ou none
clear peut prendre les valeurs left right both ou none
Exemple de texte sur trois colonnes

 <div style="margin: 0px 30px; ">
 <div style="float:left; width:33%; padding-right:2.5px; ">
 Tau (Tubulin-Associated Unit) est une protéine neuronale associée aux microtubules.
 </div>
 <div style="float:left; width:33%; padding: 0px 2.5px; ">
 Elle a été initialement décrite comme le « facteur Tau », un élément capable d’induire la  
polymérisation de la tubuline en microtubules.
 </div>
 <div style="float:left; width:33%; padding-left:2.5px; ">
 En réalité, elle favorise la polymérisation et la stabilité des microtubules.
 </div>
 </div><br style="clear:both;"/>
 Tau (Tubulin-Associated Unit) est une protéine neuronale associée aux microtubules. Elle a été 
initialement décrite comme le « facteur Tau », un élément capable d’induire la polymérisation 
de la tubuline en microtubules. En réalité, elle favorise la polymérisation et la stabilité des 
microtubules.

Tau (Tubulin-Associated Unit) est une protéine neuronale associée aux microtubules.

Elle a été initialement décrite comme le « facteur Tau », un élément capable d’induire la polymérisation de la tubuline en microtubules.

En réalité, elle favorise la polymérisation et la stabilité des microtubules.

[modifier]

Pagination

Pour certaines propriétés,

Une valeur
	Haut	Droite	Bas	Gauche
Valeur	Χ	Χ	Χ	Χ

Deux valeurs
	Haut	Droite	Bas	Gauche
Première valeur	Χ		Χ
Deuxième valeur		Χ		Χ

Trois valeurs
	Haut	Droite	Bas	Gauche
Première valeur	Χ
Deuxième valeur		Χ		Χ
Troisième valeur			Χ

Quatre valeurs
	Haut	Droite	Bas	Gauche
Première valeur	Χ
Deuxième valeur		Χ
Troisième valeur			Χ
Quatrième valeur				Χ

[modifier]

Mise en forme des marges

[modifier]

Définition de la marge externe

Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). La marge externe est la distance entre chaque côté et l'élément avoisinant (ou les bords du document).
Tous les objets définies précedement peuvent être concernés par la propriété margin

syntaxe: margin-top: 60px
syntaxe: margin-right: 100px
syntaxe: margin-bottom: 40px
syntaxe: margin-left: 80px

Les quatres instructions ci-dessus peuvent être synthétisées en une seule avec:
syntaxe: margin: 60px 100px 40px 80px

Voir Pagination

{| style="border: solid 1px black; margin:140px 50px 10px 100px; "
|style="padding: 20px;"|
Texte
{| style="border: solid 1px red; margin:50px;"
|style="padding: 30px;"|
texte
|}
|}
Comment utiliser Margin pour mettre en forme un paragraphe.

XXXXXXXXXX

[modifier]

Définition de la marge interne

La marge interne est la distance entre chaque bordure et le contenu de la zone (boîte).
Tous les objets définies précedement peuvent être concernés par la propriété padding
voir exemple dans définition de la marge externe.
syntaxe: padding-top: 60px
syntaxe: padding-right: 100px
syntaxe: padding-bottom: 40px
syntaxe: padding-left: 80px

Les quatres instructions ci-dessus peuvent être synthétisées en une seule avec:
syntaxe: padding: 60px 100px 40px 80px

Voir Pagination

[modifier]

Mise en forme des bordures

Syntaxe style="propriété:(style) (épaisseur) (couleur);
Il est important de laisser un espace entre chaque valeurs définies
Certains navigateurs ont besoin de définir les trois types de valeurs

Trois types de valeurs pour les bordures.: Le style

solid

dotted

dashed

double

groove

ridge

inset

outset

L'épaisseur

	cm	pixel	pouce	point
cm	1cm	32px	0,3937in	28,3634pt
px	1/32cm	1px	0,0123in	0,8856pt
in	2,54cm	81,28px	1in	72pt
pt	0,0353cm	1.1289px	1/72in	1pt

thin

medium

thick

7.2pt

8.128px

0.1in

0.254cm

La couleur

Voir, pour le choix des couleurs, la page Tableaux de correspondance

DarkMagenta

#8B008B

rgb(139,0,139)

Border définit les quatres côtés, il est possible de définir chaque côté indépendament des autres

Propriété Border

{|style="border:solid 1px red;" width="17%"
|+Propriété Border
|height="40"|
|}

Propriété Border-top

{|style="border-top:solid 1px red;" width="17%"
|+Propriété Border-top
|height="40"|
|}

Propriété Border-right

{|style="border-right:solid 1px red;" width="17%"
|+Propriété Border-right
|height="40"|
|}

Propriété Border-left

{|style="border-left:solid 1px red;" width="17%"
|+Propriété Border-left
|height="40"|
|}

Propriété Border-bottom

{|style="border-bottom:solid 1px red;" width="17%"
|+Propriété Border-bottom
|height="40"|
|}

Exemple

{|style="border-top:8px outset rgb(139,0,139); border-right:10px double black; border-bottom:2px dashed #ffff00; border-left:6px solid red;" width="30%" align="center"
|height="50"|
|}

Récupérée de « http://reseau-geronto-autun.org/wiki/index.php/Mise_en_forme_des_zones »

Catégories de la page: Syntaxe

Mise en forme des zones

Un article de ReseauGerontologiqueAutunois.

Sommaire

Les styles

Mise en forme de la police

style="font-family = la famille de polices

style="font-style = le style de police

style="font-variant = la variante de police

style="font-size = la taille de police (ou corps)

style="font-weight" = l'épaisseur (la graisse) de la police

Mise en forme du texte

style="Text-transform"

style="Text-decoration"

style="Color = Propriété pour définir la couleur du texte.

style="Letter-spacing = Propriété pour définir l'espacement entre les caractères.

style="Word-spacing = Propriété pour définir l'espacement entre les mots.

Mise en forme de l'arrière-plan

style="Background-color" = proprièté pour la couleur de fond du texte (couleur d'arrière-plan).

Mise en forme des paragraphes

Texte aligné à gauche

Texte au centre

Texte aligné à droite

Texte justifié

Positionnement

Voir Positionnement absolu

Voir Positionnement relatif

Texte flottant

Pagination

Mise en forme des marges

Définition de la marge externe

Définition de la marge interne

Mise en forme des bordures

Affichages

Outils personnels

Navigation

Rechercher

Boîte à outils