Définition des propriétés CSS

Vous pouvez définir des propriétés pour les règles CSS, telles que les propriétés de police de caractères, d’image et de couleur d’arrière-plan, d’espacement et de mise en page ainsi que l’aspect des éléments de la liste. Créez d’abord une nouvelle règle, puis définissez les propriétés suivantes.

Nous allons décrire certaines des propriétés de type CSS que vous pouvez définir.

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, utilisez en premier une police Windows. Cet attribut est pris en charge par les deux navigateurs.

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.

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.

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.

Applique aux caractères un niveau d’épaisseur spécifié en valeur relative ou absolue. Normal équivaut à une valeur de 400 ; Gras équivaut à une valeur de 700. Cet attribut est pris en charge par les deux navigateurs.

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.

Permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer l’ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux navigateurs.

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

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 fonctionnent correctement pour empêcher la déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs.

Définition des propriétés d’arrière-plan de style CSS

Les propriétés d’arrière-plan s’appliquent à tout élément d’une page web. Rien ne vous empêche d’assortir un élément de page d’une couleur ou d’une image d’arrière-plan (derrière le texte, la page, un tableau, etc.). Il vous est également possible de définir la position d’une image d’arrière-plan.

Nous allons décrire certaines des propriétés d’arrière-plan CSS que vous pouvez définir.

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

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 permet de redéfinir la balise body et de définir une image d’arrière-plan sans mosaïque ni répétition.

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.

Spécifient la position initiale de l’image d’arrière-plan par rapport à l’élément. Cette propriété peut être utilisée pour aligner une image d’arrière-plan sur le centre de la page, verticalement (X) et horizontalement (Y). Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre de document, pas à l’élément.

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

Définition des propriétés de bloc de style CSS

Vous pouvez définir les paramètres d’espacement et d’alignement des balises et des propriétés.

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.

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 de niveau bloc. Cet attribut est pris en charge par les deux navigateurs.

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>.

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

Détermine la gestion des espaces au sein de l’élément. Choisissez parmi les trois 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 le texte peut uniquement ê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.

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

Définit l’espace devant séparer les mots. 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 contextuel, 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.

Définition des propriétés de boîte de style CSS

La catégorie Boîte de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises et des propriétés pour le positionnement des éléments sur la page.

Vous pouvez appliquer des paramètres aux différents côtés d’un élément lors de la définition du remplissage et des marges ou utiliser l’option Idem pour tous pour appliquer le même paramètre à tous les côtés d’un élément.

Spécifie le côté autour duquel autres éléments entourent l’élément flottant. L’élément flottant est fixé du côté de flottement et le reste du contenu l’entoure du côté opposé.

Par exemple, une image qui flotte sur la droite est fixe du côté droit et le contenu que vous ajoutez par la suite entoure le côté gauche de l’image.

Pour plus d’informations, voir http://css-tricks.com/all-about-floats/

Spécifie les côtés d’un élément qui n’autorisent pas d’autres éléments flottants.

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.

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

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 de niveau 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.

Définissent la largeur et la hauteur de l’élément.

Définition des propriétés de bordure de style CSS

Le panneau Bordure de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des bordures des éléments, par exemple leur épaisseur, leur couleur et leur style.

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.

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

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.

Définit l’aspect de la bordure. L’affichage du style dépend du navigateur. 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.

Définition des propriétés de liste de style CSS

La catégorie Liste de la boîte de dialogue Définition des règles CSS vous permet de définir les paramètres des balises de liste, tels que la taille et le type des puces.

Détermine l’aspect des puces ou des numéros. Cet attribut est pris en charge par les deux navigateurs.

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).

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.

Définition des propriétés de positionnement de style CSS

Les propriétés de style Positionnement déterminent la façon dont le contenu associé au style CSS sélectionné est positionné dans la page.

Laissez les propriétés suivantes vides si elles ne sont pas importantes pour ce style :

Détermine la façon dont le navigateur doit positionner l’élément sélectionné, avec les options suivantes :

• La propriété Absolu place le contenu en fonction des coordonnées indiquées dans les zones Emplacement par rapport à l’ancêtre PA ou relatif le plus proche, et à défaut, par rapport au coin supérieur gauche de la page.

• Relatif place le bloc de contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport à la position du bloc dans le flux de texte du document. Par exemple, si vous définissez pour un élément une position relative et des coordonnées d’origine (en haut à gauche) de 20 px chacune, l’élément sera déplacé de 20 px vers la droite et de 20 px vers le bas par rapport à sa position normale dans le flux. Les éléments peuvent aussi être positionnés de manière relative, avec ou sans coordonnées haut, gauche, droite ou bas, afin d’établir un contexte pour les enfants PA.

• Fixe place le contenu en fonction des coordonnées indiquées dans les zones Emplacement, par rapport au coin supérieur gauche du navigateur. Le contenu restera fixé dans cette position tandis que l’utilisateur fera défiler la page.

• Statique place le contenu à son emplacement dans le flux de texte. Il s’agit de la position par défaut de tous les éléments HTML positionnables.

Détermine l’ordre de superposition du contenu. Les éléments ayant une valeur d’index Z supérieure s’affichent par dessus les éléments ayant une valeur d’index Z inférieure (ou aucune valeur d’index Z). Les valeurs peuvent être positives ou négatives. (Si votre contenu est à position absolue, il est plus facile de modifier l’ordre de superposition à l’aide du panneau Eléments PA).

Détermine ce qui se passe si le contenu d’un conteneur (par exemple, une balise DIV ou P) dépasse la taille de ce dernier. Ces propriétés contrôlent l’extension de la manière suivante :

• Visible augmente la taille du conteneur pour que tout son contenu soit visible. Le conteneur s’agrandit vers le bas et vers la droite.

• Masqué conserve la taille du contenu et coupe tout contenu dépassant la taille. Aucune barre de défilement n’est affichée.

• Défilement ajoute des barres de défilement au conteneur, que le contenu dépasse ou non la taille du conteneur. 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. Dreamweaver n’affiche pas cette option dans la fenêtre de document.

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

Définit la partie du contenu 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 Java Script 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 le comportement Changer la propriété.

Définit l’emplacement et la taille du bloc de contenu. 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 bloc de contenu excède la taille spécifiée.

Les unités par défaut pour l’emplacement et la taille sont les pixels. Vous pouvez également choisir 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étermine la condition de l’affichage initial du contenu. Si vous ne spécifiez pas de propriété de visibilité, le contenu hérite par défaut de la valeur de cette propriété pour l’objet parent. La visibilité par défaut de la balise body est visible. Sélectionnez l’une des options de visibilité suivantes :

• L’option Hériter hérite de la propriété de visibilité du parent du contenu.

• L’option Visible affiche le contenu, quelle que soit la valeur du parent.

• L’option Masqué masque le contenu, quelle que soit la valeur du parent.

Définition des propriétés d’extension de style CSS

Les propriétés de style d’extensions comprennent les filtres, les sauts de page et les options de pointeur.

Modifie l’aspect du pointeur lorsque celui-ci passe au-dessus de l’objet contrôlé par ce style. Choisissez l’option que vous voulez définir 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.

Applique des effets spéciaux, dont des effets de flou et de négatif, à l’objet contrôlé par ce style. Sélectionnez un effet dans le menu contextuel.

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 que vous voulez définir 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.