Les tutoriaux

Débutant

Intermédiaire

Avancé

• Créér un style personnalisé (classe ).

• Redéfinir la balise HTML.

• Utiliser le sélecteur CSS

Police :

permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte en utilisant la première police installée sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie. Pour assurer la compatibilité avec Internet Explorer 3.0, utilisez une police Windows en premier. Cet attribut est pris en charge par les deux navigateurs.

Taille :

définit la taille du texte. Vous pouvez choisir une taille spécifique en cliquant sur une valeur et une unité de mesure, ou une taille relative. Les pixels en tant qu'unité fonctionnent correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs.

Style :

permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut est Normal. Cet attribut est pris en charge par les deux navigateurs.

Hauteur de ligne :

définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait généralement référence à la notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la taille de la police ou entrez une valeur fixe et sélectionnez une unité de mesure. Cet attribut est pris en charge par les deux navigateurs.

Décoration :

ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné. Si vous définissez le paramètre de lien sur aucun, vous pouvez supprimer le soulignement des liens en définissant une classe spéciale. Cet attribut est pris en charge par les deux navigateurs.

Epaisseur :

applique aux caractères un niveau d'épaisseur spécifié en valeur relative ou absolue. Le style Normal est équivalent à 400, Gras à 700. Cet attribut est pris en charge par les deux navigateurs.

Variante :

définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.

Casse :

permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer celle-ci en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.

Couleur :

définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.

Couleur d'arrière-plan :

définit la couleur d'arrière-plan de l'élément. Cet attribut est pris en charge par les deux navigateurs.

Image d'arrière-plan :

définit l'image d'arrière-plan pour l'élément. Cet attribut est pris en charge par les deux navigateurs.

Répétition :

détermine comment l'image d'arrière-plan doit être répétée, le cas échéant. Cet attribut est pris en charge par les deux navigateurs.

Pas de répétition

affiche l'image une seule fois, dans le coin supérieur gauche de l'élément.

Répéter

crée une mosaïque horizontale et verticale de l'image derrière l'élément.

Répéter-x et Répéter-y

affichent respectivement un bandeau horizontal ou vertical. Les dernières images sont coupées pour s'adapter aux dimensions exactes de l'élément.

Remarque :

La propriété Répétition vous permet de redéfinir la balise body et de définir une image d'arrière-plan sans mosaïque ni répétition.

Fixation :

détermine si l'image d'arrière-plan reste fixe par rapport à sa position d'origine ou défile avec le contenu. Notez que certains navigateurs font toujours défiler l'image avec son contenu. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.

Position horizontale et Position verticale :

spécifient la position initiale de l'image d'arrière-plan par rapport à l'élément. Ceci peut être utilisé pour aligner une image d'arrière-plan sur le centre de la page, verticalement et horizontalement. Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre de document, pas à l'élément. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.

Espacement des mots :

définit l'intermots. Pour définir une valeur spécifique, choisissez Valeur dans le menu déroulant, puis entrez une valeur numérique. Dans le deuxième menu déroulant, choisissez une unité de mesure (par exemple, pixels, points, etc.).

Remarque :

vous pouvez indiquer des valeurs négatives, mais le résultat final variera selon le navigateur.
Dreamweaver n'affiche pas cet attribut dans la fenêtre de document.

Espacement des lettres :

augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4) réduit l'espacement entre les caractères. Les paramètres d'interlettrage ont priorité sur les paramètres de justification du texte. Cet attribut est pris en charge par Internet Explorer 4, mais non par Netscape Navigator 6.

Alignement vertical :

détermine l'alignement vertical de l'élément auquel il s'applique. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué à la balise <img>.

Alignement du texte

détermine l'alignement horizontal du texte au sein de l'élément. Cet attribut est pris en charge par les deux navigateurs.

Retrait du texte :

détermine le retrait de texte sur la première ligne.
Vous pouvez utiliser une valeur négative pour créer un retrait négatif, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments au niveau du bloc. Cet attribut est pris en charge par les deux navigateurs.

Espace blanc :

détermine la gestion des espaces au sein de l'élément. Choisissez parmi les options suivantes : Normal réduit à un seul espace une suite éventuelle de plusieurs caractères d'espacement ; Pre gère les espaces comme si le texte était inséré à l'intérieur d'une balise pre (tous les caractères d'espacement, notamment les espaces, tabulations et retours chariot, sont respectés) ; Pas de retour spécifie que seul du texte peut être renvoyé à la ligne à l'apparition d'une balise br. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge par Netscape Navigator et par Internet Explorer 5.5.

Afficher :

détermine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage d'un élément.

Largeur et Hauteur :

définissent la largeur et la hauteur de l'élément.

Flottante :

détermine de quel côté les autres éléments, tels que le texte, les calques, les tableaux, etc., flottent autour d'un élément. Les autres éléments sont affichés autour de l'élément flottant, suivant la méthode habituelle. Cet attribut est pris en charge par les deux navigateurs.

Effacer :

définit les côtés sur lesquels les calques ne sont pas autorisés. Si un calque apparaît du côté marqué dans Effacer, l'élément possédant cet attribut passera sous le cadre. Cet attribut est pris en charge par les deux navigateurs.

Remplissage :

définit la marge intérieure, c'est-à-dire l'espace qui sépare le contenu de l'élément de sa bordure (ou sa marge s'il ne comporte pas de bordure). Désactivez l'option Idem pour tous si vous voulez définir un remplissage différent pour chaque côté de l'élément.

Idem pour tous :

applique le même remplissage aux bords supérieur, droit, inférieur et gauche de l'élément.

Marge

définit l'espace qui sépare la bordure d'un élément (ou son remplissage s'il ne comporte pas de bordure) d'un autre élément. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué aux éléments au niveau du bloc (paragraphes, en-têtes, listes, etc.). Désactivez l'option Idem pour tous si vous voulez définir une marge différente pour chaque côté de l'élément.

Idem pour tous

applique les mêmes attributs de marge aux bords supérieur, droit, inférieur et gauche de l'élément.

Style :

définit l'aspect de la bordure. L'affichage du style dépend du navigateur. Dreamweaver restitue tous les styles en aplat dans la fenêtre de document. Cet attribut est pris en charge par les deux navigateurs. Désactivez l'option Idem pour tous si vous voulez définir un style de bordure différent pour chaque côté de l'élément.

Idem pour tous

applique le même style de bordure aux bords supérieur, droit, inférieur et gauche de l'élément.

Largeur

détermine l'épaisseur de la bordure de l'élément. Cet attribut est pris en charge par les deux navigateurs. Désactivez l'option Idem pour tous si vous voulez définir une épaisseur différente pour chaque côté de l'élément.

Idem pour tous

applique la même épaisseur aux bords supérieur, droit, inférieur et gauche de l'élément.

Couleur

définit la couleur de la bordure. Vous pouvez indiquer une couleur différente pour chaque côté, mais le résultat final variera selon le navigateur. Désactivez l'option Idem pour tous si vous voulez définir une couleur différente pour chaque côté de l'élément.

Idem pour tous

applique la même couleur aux bords supérieur, droit, inférieur et gauche de l'élément.

Type :

détermine l'aspect des puces ou des nombres.
Cet attribut est pris en charge par les deux navigateurs.

Illustration de la puce :

permet de choisir une image personnalisée pour les puces. Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) pour sélectionner une image ou tapez le chemin d'accès à celle-ci.

Position :

détermine si le texte de l'élément de la liste est habillé et mis en retrait (extérieure) ou si le texte habille la marge de gauche (intérieure).

Type

détermine la façon dont le navigateur doit positionner le calque, avec les options suivantes :

Absolu

place le calque suivant les coordonnées indiquées dans la zone
Emplacement, par rapport au coin supérieur gauche de la page.

Relatif

place le calque suivant les coordonnées indiquées dans la zone
Emplacement, par rapport à la position de l'objet dans le flux de texte du document.
Dreamweaver n'affiche pas cette option dans la fenêtre de document.

Statique

place le calque à son emplacement dans le flux de texte.

Visibilité

détermine la condition de l'affichage initial du calque.
Si vous ne spécifiez pas de propriété de visibilité, la plupart des navigateurs l'interprètent comme Hériter
(utilisation de la valeur de cette propriété pour l'objet parent).

Sélectionnez l'une des options de visibilité suivantes :

Hériter

prend la propriété de visibilité de l'objet parent du calque. Si le calque n'a aucun parent, il est visible.

Visible

affiche le contenu du calque, quelle que soit la valeur du parent.

Masqué

dissimule le contenu du calque, quelle que soit la valeur du parent.

Index Z

détermine l'index Z, ou ordre de superposition du calque (coordonnée verticale). Plus l'index Z du calque est élevé, plus le calque se trouve au-dessus des autres calques de valeur d'index inférieure. Les valeurs peuvent être positives ou négatives. (Pour modifier l'ordre de superposition des calques, il est plus facile d'utiliser le panneau Calques ; voir Modification de l’ordre de superposition des calques.)

Débordement

(calques CSS seulement) détermine ce qui se passe lorsque le contenu d'un calque dépasse sa taille. Ces propriétés déterminent le traitement de cet excédent comme suit :

Visible

augmente la taille du calque pour que tout son contenu soit visible. Le calque s'agrandit vers le bas et vers la droite.

Masqué

conserve la taille du calque et coupe tout contenu supérieur à la taille. Aucune barre de défilement n'est affichée.

Défilement

ajoute des barres de défilement au calque, même si le contenu est supérieur à la taille du calque.
Le fait d'intégrer des barres de défilement évite la confusion causée par l'apparition et la disparition de barres de défilement dans un environnement dynamique. Cette option n'est pas affichée dans la fenêtre de document, et seuls les navigateurs qui prennent en charge les barres de défilement l'accepteront. Cet attribut est pris en charge par Internet Explorer et par Netscape Navigator 6.

Auto

ne fait apparaître les barres de défilement que lorsque le contenu du calque dépasse les limites de ce dernier. Dreamweaver n'affiche pas cette option dans la fenêtre de document.

Emplacement

définit l'emplacement et la taille du calque. La façon dont le navigateur interprète l'emplacement dépend de l'option choisie pour l'attribut Type. Les valeurs relatives à la taille ne sont pas prises en compte si le contenu du calque excède la taille spécifiée.
Les unités par défaut pour l'emplacement et la taille sont les pixels. Pour les calques CSS, vous pouvez également spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres) ou % (pourcentage de la valeur équivalente de l'objet parent). Les abréviations doivent suivre la valeur sans espace (par exemple, 3mm).

  Détourage

définit la partie du calque qui est visible. Si vous indiquez une zone de détourage, vous pouvez la gérer à l'aide d'un langage de script tel que JavaScript et modifier ces propriétés pour créer des effets spéciaux, par exemple un effet de volet à l'ouverture. Ces effets de volet peuvent être configurés via l'utilisation de scénarios et le comportement Changer la propriété.

Saut de page

force un saut de page en cas d'impression de la page, avant ou après l'objet contrôlé par ce style. Choisissez l'option qui vous convient dans le menu déroulant. Cet attribut n'est pas pris en charge par la version 4.0 des navigateurs, mais peut l'être dans les versions ultérieures.

Curseur

modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrôlé par ce style. Choisissez l'option qui vous convient dans le menu déroulant. Cet attribut est pris en charge par Internet Explorer 4.0 et versions ultérieures et par Netscape Navigator 6.

Filtre

applique des effets spéciaux, dont des effets de flou et d'inversion,
à l'objet contrôlé par ce style. Sélectionnez un effet dans le menu contextuel.