Controlli server Web ASP.NET e stili CSS
Aggiornamento: novembre 2007
È possibile controllare l'aspetto dei controlli server ASP.NET impostando diverse proprietà dell'aspetto come ForeColor, BackColor, Height e Width. Alcuni controlli supportano inoltre gli oggetti di stile che espongono impostazioni aggiuntive relative allo stile.
.gif "Nota") Nota: |
|---|
Le pagine Web ASP.NET funzionano come pagine HTML in fase di esecuzione. È quindi possibile utilizzare fogli di stile CSS per impostare l'aspetto di tutti gli elementi della pagina diversi dai controlli server Web. È inoltre possibile definire temi ASP.NET che includono impostazioni per i fogli di stile CSS e applicare quindi tali temi alle pagine o al proprio sito. Per informazioni dettagliate, vedere Temi e interfacce ASP.NET. |
Nelle sezioni riportate di seguito vengono fornite informazioni sull'impostazione diretta degli stili e viene illustrato l'utilizzo di questi ultimi sia in fase di progettazione che a livello di codice.
Esecuzione del rendering delle proprietà relative all'aspetto sul browser
Al momento dell'esecuzione di una pagina, il rendering delle proprietà relative all'aspetto viene eseguito in base alle funzionalità del browser. Se i fogli di stile CSS sono supportati dal browser dell'utente, viene eseguito il rendering delle proprietà relative all'aspetto come attributi di stile degli elementi HTML che costituiscono il controllo. Ad esempio, quando si definisce un controllo server Web HyperLink impostandone la proprietà ForeColor su Red, la proprietà Bold su true e la proprietà Size su xx-small, se il browser dell'utente supporta i fogli di stile il rendering del controllo viene eseguito come indicato di seguito:
<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>
Se invece il browser dell'utente non supporta gli stili, il rendering del controllo viene eseguito utilizzando altri metodi, ad esempio un elemento <font>. Nell'esempio riportato di seguito viene illustrato il rendering dell'esempio fornito in precedenza, ma per un browser che non supporta gli stili:
<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>
Altri esempi di proprietà il cui rendering viene eseguito in modo differente a seconda del tipo di browser sono BorderWidth e BorderColor.
Non è possibile eseguire il rendering di alcuni tipi di proprietà dell'aspetto, come BorderStyle, senza utilizzare gli stili. Queste proprietà vengono pertanto ignorate nei browser che non supportano gli stili. Per ulteriori informazioni, vedere Controlli server Web ASP.NET e funzionalità del browser.
Oggetti di stile dei controlli
Oltre alle proprietà relative all'aspetto, come ForeColor e BackColor, i controlli espongono uno o più oggetti di stile che incapsulano proprietà aggiuntive relative all'aspetto. Un esempio è rappresentato dalla proprietà dello stile Font che espone un oggetto di tipo FontInfo contenente singole proprietà relative al tipo di carattere, come Size, Name e Bold.
Alcuni controlli espongono gli oggetti di stile utilizzabili per impostare l'aspetto di porzioni specifiche del controllo. Ad esempio, il controllo server Web Calendar contiene oggetti di stile come DayStyle (singoli giorni), SelectedDayStyle (un giorno, una settimana o un mese selezionato dall'utente) e WeekendDayStyle. Grazie all'oggetto di stile SelectedDayStyle, ad esempio, è possibile impostare le proprietà BackColor e ForeColor del giorno selezionato dall'utente.
La maggior parte degli oggetti di stile è di tipo Style o TableItemStyle, in quanto consente di impostare gli attributi delle celle delle tabelle. La proprietà Font è di tipo FontInfo.
Precedenza ed ereditarietà degli oggetti di stile
Nei controlli di tipo complesso, gli oggetti di stile ereditano spesso le caratteristiche di altri oggetti di stile. Ad esempio, nel controllo Calendar l'oggetto SelectedDayStyle si basa sull'oggetto DayStyle. Se non si impostano in modo esplicito le proprietà di SelectedDayStyle, questo eredita le proprie caratteristiche dall'oggetto DayStyle.
L'ereditarietà significa che le proprietà dell'oggetto di stile impostate hanno un ordine di precedenza. Nell'elenco seguente, ad esempio, viene illustrato l'ordine delle proprietà dell'oggetto di stile per il controllo Calendar, dove le impostazioni dell'oggetto che si trova in fondo all'elenco hanno il livello di precedenza più elevato.
Proprietà relative all'aspetto del controllo base Calendar.
Oggetto di stile DayStyle.
Oggetto di stile WeekendDayStyle.
Oggetto di stile OtherMonthDayStyle.
Oggetto di stile TodayDayStyle.
Oggetto di stile SelectedDayStyle.
Si possono verificare difficoltà con gli stili quando questi ultimi vengono suddivisi tra un elemento contenitore e un elemento di testo. Ad esempio, si supponga di disporre di un foglio di stile per un controllo e che si desideri applicare le proprietà dello stile del testo a un collegamento e il resto dello stile a un contenitore. Questa operazione è possibile se si impostano gli stili utilizzando le proprietà di stile del controllo, ad esempio MenuItemStyle per un controllo menu o TodayDayStyle per un controllo di calendario. Ciò risulta tuttavia più difficile se si utilizzano stili definiti da una proprietà CssClass in quanto ASP.NET non è in grado di conoscere i contenuti della classe sul server. ASP.NET applica gli stili definiti nella proprietà CssClass sia agli elementi di testo che agli elementi del contenitore e aggiunge uno stile inline per eliminare gli effetti di questa doppia applicazione (bordi doppi, moltiplicazione dei tipi di carattere proporzionali e così via).
Il modo migliore di applicare stili a un controllo consiste nell'utilizzare le proprietà dello stile definite dal controllo e utilizzare un foglio di stile o stili inline per apportare regolazioni di lieve entità ai singoli elementi, se necessario. Per ignorare uno stile definito dalle proprietà dello stile di un controllo, utilizzare la regola CSS !important in un foglio di stile o negli stili inline.
Nell'esempio di codice seguente viene utilizzata la proprietà CssClass per l'elemento hovernodestyle. Questa classe è definita due volte come myclass e a.myclass:visited in modo che ignori la definizione 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>
Se si utilizzano fogli di stile CSS per personalizzare l'aspetto di un controllo, utilizzare stili inline o un file CSS separato, ma non entrambi. In caso contrario, si potrebbero ottenere risultati imprevisti.
Controllo diretto di stili CSS e classi
Oltre alle proprietà relative all'aspetto e agli oggetti di stile, i controlli espongono due proprietà che consentono modificare più direttamente gli stili CSS CssClass e Style. La proprietà CssClass consente di assegnare una classe di fogli di stile al controllo. Grazie alla proprietà Style è invece possibile impostare una stringa di attributi relativi allo stile da scrivere così come sono nel controllo. Tramite la proprietà Style è possibile impostare gli attributi di stile che non vengono esposti mediante altre proprietà. La proprietà Style espone un insieme di cui è possibile chiamare i metodi Add e Remove per impostare gli stili direttamente.
Le impostazioni configurate nella proprietà Style non sono riflesse nella proprietà corrispondente relativa all'aspetto individuale. Se, ad esempio, si imposta una stringa background-color:red nella proprietà Style, la proprietà BackColor non viene impostata sul rosso, anche se il rendering del controllo prevede uno sfondo rosso. Inoltre, se si impostano entrambe le proprietà relative all'aspetto e la proprietà Style, le proprietà individuali relative all'aspetto avranno la precedenza sulla proprietà Style.
Vedere anche
Concetti
Controlli server Web ASP.NET e funzionalità del browser