Feuilles de styles CSS

Référence HTML

Toutes les commandes HTML commencent par <XXX>,  XXX représente la commande, et finissent par </XXX>. Entre les deux balises, se trouve le texte concerné par la commande ou d'autres balises. Les commandes peuvent s'écrire en majuscules ou en minuscule.
Dans la suite du document les commandes sans < > sont liées à la commande précédente, exemple : <XX yy zz> <XX> est la commande principale, yy est une première option et zz est une deuxième option.

<HTML> début de document HTML, avant cette balise il n'y a rien. A fin de document il y aura une balise </HTML>, après cette balise il n'y aura plus rien.
<HEAD> début de l'en-tête. Se trouve dans cette zone des informations concernant le document HTML et qui ne s'affichent pas.
<meta http-equiv="refresh" content="6; url=xxxx"> cette commande rafraîchit la page web toutes les 6 secondes et, si l'adresse xxxx est présente, charge la page correspondant à l'adresse xxxx. Pas de balise </meta>.
<base> Indique le fonctionnement des liens de la page. Pas de balise </base>.
href="xxx" tous les liens relatifs de la page utiliseront xxx comme référence d'adresse.
target="_blank" ouvre tous les liens dans une nouvelle fenêtre.
<TITLE> texte qui s'affichera dans la barre titre de la fenêtre. </TITLE>.
<bgsound src="Midi3.mid" loop="1"> joue une musique au chargement du document. Cette balise n'est pas reconnue par Netscape. Il faut utiliser la balise <embed> à la place.
</HEAD> fin de l'entête.
<BODY> début du corps du document. Se terminera par </BODY> en général juste avant la balise </HTML>.
background="fond3.gif" option de la commande <body> qui affiche une image en fond de page. Si l'image est plus petite que le document, elle sera répétée autant de fois que nécessaire.
text="#333333" couleur du texte par défaut.
bgcolor="#66FFFF" couleur du fond par défaut. Attention si une image de fond est définie, c'est elle qui est prioritaire.
link="#FF6600" couleur des liens.
vlink="#009900" couleur des liens visités.
alink="#660000" couleur des liens actifs ?

<!-- début de commentaire qui ne s'affichera pas dans la page.
--> fin du commentaire. Tout ce qui se trouve entre ces deux balises et invisible dans le document. Il peut y avoir plusieurs lignes entre ces deux balises.
<SPAN> balise sans action sur le document et qui sert de conteneur pour des options de style.

Le texte.
<P> changement de paragraphe. La balise </P> n'est pas obligatoire.
Align=left center right
<BR> changement de ligne. La balise </BR> n'existe pas.
<CENTER> centre le texte.
<STRONG> texte en gras.
<B> texte en gras.
<EM> texte en italique.
<I> texte en italique.
<U> texte souligné.
<TT> texte à espacement constant, non proportionnel.
<PRE> texte pré formaté, qui s'affichera sans la moindre modification. La police sera de type non proportionnelle. Les navigateurs remplacent systématiquement les espaces consécutifs par un seul espace, sauf avec la commande <pre>
<Hx> taille du texte, x représente une valeur de 1 (texte le plus gros) à 6 (texte le plus petit).
<FONT> balise de gestion de la fonte du texte.
size="+2" texte plus gros de 2, valeur possible de 1 à 7. Avec "-4" le texte sera plus petit de 4. Peut aussi être donné en valeur absolue ("2").
color="#FF0000" change la couleur du texte ou des bordures, FF0000 représente dans l'ordre les couleurs rouge vert bleu de 00 (pas de couleur) à FF (toute la couleur).
<BIG> texte plus gros.
<SMALL> texte plus petit.
<STRIKE> texte rayé. Ex: texte barré.
<SUB> texte plus bas, en indice.
<SUP> texte plus haut, en exposant.
<BLINK> texte clignote. Pas reconnue par I.E.

<blockquote> introduit un retrait à gauche comme <ul> ou <ol>

mais uniquement pour la partie contenu dans la balise.
Placé au milieu d'un paragraphe cette balise crée un nouveau paragraphe décalé à gauche. Indentation d'un paragraphe.
<DL> début de zone définition.
<DT> terme à définir.
<DD> définition du terme. En fait cela provoque un retrait à droite de la ligne jusqu'à la prochaine balise <dt>. Il n'y a pas de commande </dd> ou </dt>.
<DIV> Balise sans action sur le document et servant à contenir des options qui auront des effets sur le document. Peut aussi contenir des options de style.
align="left" texte aligné à gauche, "right" à droite, "center" au centre et "justify" texte justifié.

<NOSCRIPT> tout ce qui se trouvera dans cette balise ne sera affiché que si le navigateur ne reconnaît pas javascript ou si javascript n'est pas activé dans les options du navigateur.

Les listes.
<UL> début de zone à puce. Il existe 3 types de puce, rond, cercle ou carré, à chaque commande <ul> le type de puce suivante sera choisi sauf si dans la commande on spécifie un type de puce, ex: <ul type=disc ou circle ou square>. La commande <ul> par elle-même n'affiche pas de puce, c'est la commande <li> qui marque la puce.
 La commande <ul> provoque un retrait, plus il y a de commande <ul> plus le retrait est important. La commande </ul> réduit le retrait.
<LI> affiche une puce en début de ligne, pas besoin de commande <br>. Pas de commande </LI>.
<OL> même chose que la commande <ul> mais c'est des numéros qui s'afficheront avec la commande <li>. Les types que peut prendre la commande <ol> sont : a (pour a, b), I (pour I, II, III), i (pour i, ii), 1 (pour 1, 2), A (pour A, B).
<CITE> source de citation à utiliser avec <Q> ou <BLOCKQUOTE>.
<SAMPLE> exemple.
<KBD> texte à taper au clavier.
<CODE> programme.
<VAR> variables.

Les caractères spéciaux
Dans le texte ils sont remplacés par une chaîne de caractères commençant pas & est finissant par ; . La lettre après le & représente la lettre à "accentuer" et la suite de caractères avant le ; le type "d'accent". Si la lettre est majuscule c'est la majuscule qui est accentuée.
acute accent aigu &eacute; remplace le é
grave accent grave &agrave; remplace le à
circ accent circonflexe &icirc; remplace le î
uml trémas &uuml; remplace le ü
cedil cédille &ccedil; remplace le ç
tilde ~ &ntilde; remplace le ñ
ring ° &Aring; remplace le Å
slach / &Oslach; remplace le Ø

Autres caractères spéciaux:
&nbsp; remplace l'espace &plusmn; remplace le ± &brvbar;  remplace le ¦
&amp;  remplace le & &deg; remplace le ° &iexel; remplace le ¡
&sect;  remplace le § &cent; remplace le ¢ &iquest; remplace le ¿
&pound; remplace le £ &yen; remplace le ¥ &mdash; remplace le —
&lt; remplace le < &curren; remplace le ¤ &ndash; remplace le –
&gt; remplace le > &ordm; remplace le º &macr; remplace le ¯
&quot; remplace le " &sup1; remplace le ¹ &not; remplace le
&laquo; remplace le << &sup2; remplace le ² &bull; remplace le ·
&raquo; remplace le >> &sup3; remplace le ³ &hellip; remplace le ··
&aelig; remplace le æ &frac14; remplace le ¼ &szlig; remplace le ß
&oelig; remplace le œ &frac12; remplace le ½ &thorn; remplace le þ
&copy; remplace le © &frac34;  remplace le ¾ &THORN; remplace le Þ
&reg; remplace le ® &micro; remplace le µ &eth; remplace le ð
&trade; remplace le ™ &para; remplace le &ETH; remplace le Ð

Les unités.
Pour définir des dimensions on se sert d'unité. Par défaut c'est le pixel qui est utilisé. Dans certain cas on peut préciser une autre unité, par exemple le pourcentage pour la taille d'un tableau. Dans ce cas le chiffre est suivit du signe %.
px
%
in
cm
mm		 Pixel
Pourcentage
Inch
Centimètre
Millimètre

Les images.
<img src="image.gif"> insert une image dans le texte. On peut la compléter avec les commandes suivantes. Pas de balise </img>
align=top texte en haut de l'image.
align=middle texte au centre de l'image.
align=left hspace=x laisse un espace horizontal de x à gauche pour le texte
height=x hauteur de l'image. L'image sera de cette dimension quelle que soit sa taille réelle.
width=x largeur de l'image. L'image sera de cette dimension quelle que soit sa taille réelle.
border=x ajoute ou enlève une bordure, x de 0 = pas de bordure, à pas plus grand que le document.
nosave commande (de Netscape?) indiquant de ne pas chercher à déplacer le fichier lors de l'enregistrement avec N. Composer.
lowscr="image.gif" adresse d'une image basse résolution chargée en premier?
name="xx" nom de l'image. Utile pour Javascript.
alt="xxx" affiche le message "xxx" si l'image n'est pas accessible ou avant que celle-ci n'apparaisse.

Les layers
Les images sont figées, en taille et en position, dans le document une fois affichées, Les layer, eux, peuvent bouger grâce à un script.
pour Netscape 4.x
<layer>  la commande layer encadre une balise <img ...> et/ou du texte qui permet d'afficher une image sans tenir compte de ce qui est afficher sur la page. L'image s'affiche par-dessus le reste et, si on efface l'image, le reste réapparaît (genre sprit) elle se termine par la balise </layer>.
name="x" nom du layer dans le document.
left="x" position de l'image par rapport à la gauche du document (en pixel).
top="x" position de l'image par rapport au haut du document (en pixel).
width="x" largeur du layer. Si l'image est plus petite que le layer, elle sera placée en haut à gauche du layer. Si elle est plus grande, elle débordera du layer et cela n'a pas l'air d'avoir une grande importance.
height="x" hauteur du layer.
bgcolor="x" couleur de fond du layer.
visibility="show" l'image est visible, avec "hide" elle est invisible.
Cette balise n'est pas compatible avec netscape 6x ou 7x.

pour I.Explorer
style="x;y;z"  l'option style est ajoutée dans la balise <img> pour la transformer en "layer". x y et z sont des options complémentaires de style. Elles sont toutes contenues entre les guillemets et séparées par un point-virgule.
id=toto nom de l'image dans le document.
position:absolute type de coordonnés de l'image. Autre option relative ou static.
left:y position de l'image par rapport à la gauche du document (en pixel).
top:x position de l'image par rapport au haut du document (en pixel).
width:x largeur de l'image.
height:y hauteur de l'image.
z-index:x ordre d'empilement des images. Le plus grand numéro au dessus. La valeur de z-index peut être modifiée dans le script pour amener une image au-dessus.
visibility:inherit (hérité), visible, hidden (invisible).

Pour Netscape 6x et 7x
<DIV> cette balise encadre une balise <img ...> et/ou du texte et permet d'afficher une image sans tenir compte de ce qui est afficher sur la page. L'image s'affiche par-dessus le reste et, si on efface l'image, le reste réapparaît (genre sprit) elle se termine par la balise </DIV>.
style="x;y;z"  la commande style est ajouter dans la balise <div>. x y et z sont des options de style. Elles sont toutes contenues entre les guillemets et séparées par un point-virgule.
id=toto nom de l'image dans le document.
position:absolute type de coordonnés de l'image. Autre option relative ou static.
left:y position de l'image par rapport à la gauche du document (en pixel).
top:x position de l'image par rapport au haut du document (en pixel).
width:x largeur de l'image.
height:y hauteur de l'image.
z-index:x ordre d'empilement des images. Le plus grand numéro au dessus. La valeur de z-index peut être modifiée dans le script pour amener une image au-dessus.
visibility:inherit (hérité), visible, hidden (invisible).
La balise <div> est reconnue par I.E. et on n'a pas besoin d'utiliser l'option style dans la balise <img ...> dans ce cas.

Image réactive
Image découpée en zone permettant d'accéder à diverse adresse.
<MAP name="x"> début de définition des zones de l'image. A la fin de toutes les commandes <area> on fermera avec la balise </map>
<area> nom de la zone, doit être au moins complétée avec les deux options suivantes et répétée autant de fois qu'il y aura de zone.
Shape="rect" forme de la zone. Autres valeur "circle" défini par "x,y,rayon", "polygon" défini par "x1,y1,x2,y2,x3,y3 etc".
coords="x1,y1,x2,y2" position de la zone dans l'image. La zone est défini par ses coins supérieurs gauches et inférieurs droits en pixel, et par rapport au coin supérieur gauche de l'image. Le coin supérieur gauche de l'image correspondre toujours à 0, 0 et le coin inférieur droit dépend de la taille de l'image. Attention si les zones sont plus grandes que l'image on n'aura pas accès aux adresses hors de l'image, mais si c'est l'image est plus grande que les zones seul les zones définies pointent vers quelque chose. Les coordonnés peuvent être en %.
href="adresse" adresse du lien ver le quel on pointe. Cela peut pointer vers un script si on donne comme adresse "javascript:toto()", toto() est le nom d'une fonction définie dans un script.
name="x" nom de la zone <area>.
usemap="#x" option ajoutée à <img src> pour indiquer que cette image utilise les zones <map> de nom x précédemment défini.

Les lignes horizontales.
<HR> affiche une ligne horizontale. On peut compléter cette balise par les commendes suivantes. Il n'y a pas de commande </hr>.
width=x% longueur de la ligne = x% de l'écran. Si le % n'est pas présent c'est en pixel que sera la longueur de la ligne.
size=x épaisseur de la ligne de x pixel (de 1 à pas plus grand que l'écran si possible).
align=left la ligne est à gauche de l'écran. Avec right elle sera à droite et avec center elle sera au centre.
Noshade ligne sans ombrage.

Les liens.
<A HREF="xxx"> lien vers une autre page Html ou autre chose (fichier son, vidéo etc.). xxx donne l'adresse en absolue (http://www.easynet.fr) ou en relatif (index.htm). Tout ce qui se trouvera (texte ou image) après cette balise et jusqu'à la balise </a> pointera vers cette adresse. Si xxx commence par mailto: et est suivit d'une adresse Email cela pointera vers un nouveau message Email , s'il commence par news: et est suivi du nom d'un forum, cela pointe vers un news groupe.
target="y" dans un document contenant des frames "y" donne le nom du cadre dans le quel le lien doit s'afficher. Si target="_blank" alors le lien s'ouvre dans une autre fenêtre.
<A name="yy"> insert un signet à l'intérieur d'un document. Href pourra y faire référence pour créer un lien vers ce signet sous la forme <a href="#yy">.

Les colonnes
<multicol> crée des colonnes dans un document netscape. Fin des colonnes avec </multicol>.
Les colonnes sont séparées par la balise <P>.
cols=2 nombre de colonnes.
gutter=30 espace entre les colonnes en pixels.
width=100 largeur de la colonne en pixels ou %.
class="xxx" nom de la classe donné à la feuille de style.
id="xxx" nom des colonnes.
style="xxx" nom de la feuille de style intra ligne.

Les tableaux.
<TABLE> début d'une zone tableau. Cette zone se finira avec la commande </table> qui indiquera la fin du tableau.
border=x défini la taille de la bordure du tableau.
Les commandes suivantes sont à ajouter à la commande border (elle-même ajouté à la commande <table>).
cols=x nombre de colonnes du tableau
width="x%" largeur du tableau en %. Si % n'est pas mis c'est en pixel que la taille sera donné.
cellspacing=x définit la largeur de la bordure des cellules.
cellpadding=x définit l'espacement du texte par rapport au bord des cellules.
background="fond4.jpg" définit une image de fond dans le tableau

<CAPTION> définit le titre du tableau.
align="top" place le titre en haut du tableau, avec "bottom" il serait en bas du tableau.

<TR> début d'une ligne dans le tableau. Elle se finit par </tr>.
<TH> titre de colonne (identique à <td>) mais tout ce qui s'affichera sera en gras et au centre de la cellule.
<TD> contenu d'une cellule. Chaque commande <td> </td> définissent une cellule du tableau. L'ensemble des commandes <td> </td> entre les commandes <tr> </tr> définissent le nombre de cellules d'une ligne. Les cellules s'alignent verticalement les unes sur les autres.
Toutes les options de <td> (enfin presque toutes) peuvent être utilisé avec <th> ou <tr>.
nowrap indique que le texte dans la cellule doit être sur une seule ligne.
colspan="x" indique que la cellule doit avoir la taille de x cellules horizontalement.
rowspan="x" identique colspan mais verticalement.
width="x%" indique la largeur d'une cellule en %. Si % n'est pas mis c'est en pixel que la taille sera donné.
height="x" indique la hauteur d'une cellule.
align="left" place les données à gauche de la cellule, avec "right" elles seraient à droite, et avec "center" au milieu.
A l'intérieur d'une cellule on peut trouver des images, des adresses ou d'autres balises de formatage du texte.

Les zones texte.
<textarea> balise qui prépare une zone texte dans un document en vue de son utilisation dans un script.
name="xx" nom de la zone texte.
cols=yy nombre de caractères (horizontal) de la zone texte.
rows=zz nombre de lignes de la zone texte.

Les formulaires.
<FORM> zone formulaire accueillant des instructions <input> ou <textarea>.
name="xx" nom de la zone formulaire.
Method="x" ?
Action="y" adresse ou il faudra envoyer le formulaire.
<INPUT> balise qui prépare une zone dans un document en vue de son utilisation dans un script.
name"w" nom de la balise <input>.
type="text" zone texte.
 size=xx taille du texte en caractères.
type="button" bouton à cliquer.
 value="go" valeur affiché par button.
type="radio" bouton rond à cocher, un seul à la fois.
 Value="1" regroupe les boutons entre eux (value identique).
type="checkbox" bouton carré à cocher, plusieurs à la fois.
Checked bouton sélectionné par défaut.
Type="submit" bouton pour envoyer le formulaire
 Value="Envoyer"
Type="reset" bouton pour rétablir le formulaire d'origine.
 Value="Rétablir"

<SELECT> crée une liste à choix multiple avec ascenseur si la liste est plus longue que la fenêtre de choix. La largeur de la fenêtre dépend du texte qui sera affiché.
Multiple sélection multiple.
name="xx" nom de l'objet.
size=x hauteur de la fenêtre.
<option value=x> affecte à chaque position dans la liste le texte affiché. <option selected value=x> donne la valeur par défaut. La valeur x n'a pas l'air d'avoir une importance. Pas de balise </option>.
<TEXTAREA> zone texte de saisie.
Cols="30" largeur de la zone texte en caractères.
Rows="4" hauteur de la zone texte en lignes.
 

Les frames
Les frames, ou cadres en français, permette de diviser un document maître en plusieurs documents qui s'afficheront tous en même temps dans des cadres, ou frames en anglais, différent. Le document maître ne contient pas de section <body> mais une section <frameset> qui définit les cadres et dans la quelle on va lister les documents Html de chaque cadre. Le contenu de chaque cadre sera un document Html ordinaire.
<NOFRAME> texte à destination des navigateurs ne reconnaissant pas les cadres. Ce texte se trouve dans des balise <body></body> avant la balise </noframe>
<FRAMESET> définit les cadres dans le document maître. Se termine par une balise </frameset>. A l'intérieur de chaque <frameset> on peut définir d'autres <frameset>.
border="10" épaisseur des bords du cadre (ou "false").
bordercolor="#FF0000" couleur des bords.
frameborder="no" pas de bordure aux cadres.
framespacing="5" espace entre les cadres.
rows="60%,*" définit la taille d'un cadre horizontal. Pour définir 3 fenêtres horizontales il faut donner comme valeur "120,20%,*". Le premier cadre fera 120 pixels, le deuxième fera 20% de la fenêtre, le troisième fera le reste de la fenêtre. Si on entre la valeur "*,*,*" les trois cadres se partageront équitablement la fenêtre. Attention un cadre ne peut réellement exister qui si on met quelque chose dedans avec la balise <frame>. L'ordre des cadres est toujours de haut en bas.
cols="50%,*" définit la taille du cadre vertical. Ex: <frameset rows="20%,30%,*" cols="40%,*">. L'ordre des cadres est toujours de gauche à droite.
<FRAME> définit le contenu d'un cadre. Il n'y a pas de balise </frame>.
src="x.htm" définit le nom du fichier qui s'affichera dans ce cadre. Si on marque "about:blank" on obtiens un cadre vide.
name="y" donne un nom à ce cadre. A l'intérieur d'un cadre si dans un lien on précise target="y" alors le lien s'affichera dans le cadre de nom y.
scrolling="no" supprime les ascenseurs pour faire défiler le document (autre valeurs yes, auto).
marginwidth=x largeur de la marge du document.
marginheight=x hauteur de la marge du document.
noresize interdit de modifier la taille du document.
frameborder=0 absence du bord de séparation des cadres. Attention chaque cadre a ses bords de séparation, si on les supprime à un cadre et pas au cadre adjacent c'est comme si on n'avait rien fait.
Target="toto"par défaut la zone ou doivent s'afficher les liens?
 
Exemple:
<frameset col="25%,50,*> définit 3 cadres verticaux sur le document.
<frame src="toto1.htm> définit le contenu de la première colonne.
<frameset row=100,*,30%> définit dans la 2éme colonne 3 cadres horizontaux
<frame src="riri1.htm> définit le contenu du 1er cadre de la 2éme colonne.
<frame src="riri2.htm> définit le contenu du 2éme cadre de la 2éme colonne.
<frame src="riri3.htm> définit le contenu du 3éme cadre de la 2éme colonne.
</frameset> fin de définition des 3 cadres horizontaux de la deuxième colonne.
<frame src=toto2.htm> définit le contenu de la 3éme colonne.
</frameset> fin de définition des 3 cadres verticaux.

Les lecteurs externe ou plug-in
<embed> permet de lire des fichiers autre que ceux habituellement utilisés en Html. Se termine par </embed>.
src='Midi3.mid' adresse du fichier. N'a pas l'air de vouloir marcher lorsqu'on travail en local.
height=14 hauteur pour l'affichage du lecteur.
width=145 largeur pour l'affichage du lecteur.
autostart=true lecture automatique.
hidden=true lecteur caché.
loop=true lecture en boucle.

Feuilles de styles CSS