Contrôles serveur Web ASP.NET et styles CSS
Mise à jour : novembre 2007
Vous pouvez contrôler l'apparence des contrôles serveur ASP.NET en définissant plusieurs propriétés d'apparence, telles que ForeColor, BackColor, Height et Width. De plus, certains contrôles prennent en charge les objets style qui exposent des paramètres de style supplémentaires.
.gif "Remarque") Remarque : |
|---|
Les pages Web ASP.NET fonctionnent comme des pages HTML au moment de l'exécution. Vous pouvez utiliser par conséquent des feuilles de style en cascade (CSS) pour définir l'apparence de tous les éléments de la page différents des contrôles serveur Web. De plus, vous pouvez définir des thèmes ASP.NET qui incluent des paramètres de feuille de style en cascade, puis appliquer les thèmes aux pages ou à votre site. Pour plus d'informations, consultez Thèmes et apparences ASP.NET. |
Les sections suivantes fournissent des informations concernant la définition directe de styles, et notamment l'utilisation de ces styles au moment du design et par programme.
Rendu des propriétés d'apparence dans le navigateur
Lorsque la page s'exécute, les propriétés d'apparence sont rendues en fonction des fonctionnalités du navigateur de l'utilisateur. Si le navigateur de l'utilisateur prend en charge les feuilles de style en cascade (CSS), les propriétés d'apparence sont rendues sous la forme d'attributs de style des éléments HTML qui constituent le contrôle. Par exemple, si vous définissez un contrôle serveur Web HyperLink et affectez la valeur Red à sa propriété ForeColor, la valeur true à sa propriété Bold et la valeur xx-small à sa propriété Size, le contrôle est restitué comme suit, si le navigateur de l'utilisateur prend en charge les feuilles de style :
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
En revanche, si le navigateur de l'utilisateur ne prend pas en charge les styles, le contrôle est rendu à l'aide d'autres moyens, tels qu'un élément <font>. Ce qui suit illustre le rendu de l'exemple ci-dessus, mais dans le cas d'un navigateur qui ne prend pas en charge les styles :
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
BorderWidth et BorderColor sont d'autres exemples de propriétés rendues différemment en fonction du navigateur.
Certaines propriétés d'apparence, telles que BorderStyle, ne peuvent pas être rendues sans l'aide des styles. Ces propriétés sont par conséquent ignorées dans les navigateurs qui ne prennent pas en charge les styles. Pour plus d'informations, consultez Fonctionnalités des contrôles serveur Web ASP.NET et du navigateur.
Objets style de contrôle
En plus des propriétés d'apparence, telles que ForeColor et BackColor, les contrôles exposent un ou plusieurs objets style qui encapsulent des propriétés d'apparence supplémentaires. La propriété de style Font qui expose un objet de type FontInfo contenant des propriétés individuelles relatives à la police (Size, Name et Bold, par exemple) en est un exemple.
Certains contrôles exposent les objets style que vous pouvez utiliser pour définir l'apparence de parties spécifiques du contrôle. Par exemple, le contrôle serveur Web Calendar contient des objets style tels que DayStyle (jours individuels), SelectedDayStyle (un jour, une semaine ou un mois sélectionné par l'utilisateur) et WeekendDayStyle. À l'aide de l'objet style SelectedDayStyle, par exemple, vous pouvez définir les propriétés BackColor et ForeColor du jour sélectionné par l'utilisateur.
La plupart des objets style sont de type Style ou TableItemStyle, car ils définissent les attributs des cellules de tableau. La propriété Font est de type FontInfo.
Priorité et héritage des objets style
Dans les contrôles complexes, les objets style héritent souvent des caractéristiques d'autres objets styles. Par exemple, dans le contrôle Calendar, l'objet SelectedDayStyle est basé sur l'objet DayStyle. Si vous ne définissez pas explicitement de propriétés pour SelectedDayStyle, il hérite de ses caractéristiques de l'objet DayStyle.
Cet héritage signifie que les propriétés de l'objet style que vous définissez ont un ordre de priorité. Par exemple, la liste suivante montre l'ordre des propriétés de l'objet style pour le contrôle Calendar, avec la priorité la plus haute donnée aux paramètres du dernier objet de la liste.
Propriétés d'apparence du contrôle Calendar de base
Objet style DayStyle
Objet style WeekendDayStyle
Objet style OtherMonthDayStyle
Objet style TodayDayStyle
Objet style SelectedDayStyle
Des problèmes peuvent se poser avec les styles lorsqu'ils sont fractionnés entre un élément conteneur et un élément de texte. Par exemple, supposez que vous avez une feuille de style pour un contrôle et que vous souhaitez que les propriétés du style du texte soient appliquées à un lien et le reste du style à un conteneur. Cela est possible si vous définissez les styles à l'aide des propriétés de style du contrôle, telles que MenuItemStyle pour un contrôle de menu ou TodayDayStyle pour un contrôle Calendrier. En revanche, cette opération est plus difficile à l'aide de styles définis par une propriété CssClass, car ASP.NET n'a aucun moyen de connaître le contenu de la classe sur le serveur. ASP.NET applique les styles définis dans la propriété CssClass à la fois au texte et aux éléments conteneurs, et ajoute un style inline pour supprimer les effets de cette application double (bordures en double, multiplication proportionnelle des polices, etc.).
La meilleure façon d'appliquer un style à un contrôle consiste à utiliser les propriétés de style définies par le contrôle et à utiliser une feuille de style ou des styles inline pour apporter des réglages mineurs aux éléments individuels si nécessaire. Pour substituer un style défini par les propriétés de style d'un contrôle, utilisez la règle CSS !important dans une feuille de style ou des styles inline.
L'exemple de code suivant utilise la propriété CssClass sur l'élément hovernodestyle Cette classe est définie deux fois en tant que myclass et en tant que a.myclass:visited pour substituer la définition a:visited.
<%@ Page Language="C#" %>
<html>
<head >
<asp:sitemapdatasource id="SiteMapSource" />
<style type="text/css">
a:visited
{
color: #000066
}
myclass, a.myclass:visited {
color: #FF0000
}
</style>
</head>
<body>
<form >
<a href="https://www.Contoso.com">Contoso</a>
<asp:treeview id="treeview1"
initialexpanddepth="1"
datasourceid="SiteMapSource"
forecolor="#444444"
font-names="Verdana"
font-size="0.8em">
<nodestyle font-bold="true" />
<hovernodestyle cssclass=myclass />
</asp:treeview>
</form>
</body>
</html>
Si vous utilisez des feuilles de style en cascade (CSS) pour personnaliser l'apparence d'un contrôle, utilisez des styles inline ou un fichier CSS séparé, mais pas les deux. L'utilisation à la fois des styles inline et d'un fichier CSS séparé peut provoquer des résultats inattendus.
Contrôle direct des styles CSS et des classes
En plus des propriétés d'apparence et des objets style, les contrôles exposent deux propriétés qui vous permettent de manipuler les styles CSS plus directement : CssClass et Style. La propriété CssClass vous permet d'assigner une classe de feuille de style au contrôle. La propriété Style vous permet de définir une chaîne d'attributs de style à écrire tels quels dans le contrôle. L'utilisation de la propriété Style vous permet de définir les attributs de style qui ne sont pas exposés via d'autres propriétés. La propriété Style expose une collection dont vous pouvez appeler les méthodes, par exemple Add et Remove, pour définir directement des styles.
Les options définies dans la propriété Style ne sont pas répercutées dans la propriété d'apparence correspondante. Par exemple, si vous définissez une chaîne background-color:red dans la propriété Style, la valeur rouge n'est pas attribuée à la propriété BackColor, même si le contrôle est rendu avec une couleur d'arrière-plan rouge. En outre, si vous définissez les propriétés d'apparence et la propriété Style, les propriétés d'apparence sont prioritaires par rapport à la propriété Style.
Voir aussi
Concepts
Fonctionnalités des contrôles serveur Web ASP.NET et du navigateur