Finestra di dialogo Generatore di stile
Aggiornamento: novembre 2007
The Style Builder dialog box provides options that make it possible for you to define cascading style sheet (CSS) style attributes. Uno stile CSS combina singoli attributi di formattazione e posizionamento in un insieme di attributi che è possibile applicare contemporaneamente.
La finestra di dialogo Generatore di stile è suddivisa in due riquadri. Nel riquadro sinistro sono elencate otto categorie generali (Tipo di carattere, Sfondo, Testo, Posizione, Layout, Bordi, Elenchi e Altro). Quando si seleziona una categoria, nel riquadro di destra sono visualizzate le opzioni per la categoria selezionata. Quando si selezionano le opzioni di stile, la finestra di dialogo Generatore di stile consente di creare automaticamente le definizioni degli stili CSS.
È possibile applicare gli attributi di stile CSS direttamente a singoli elementi HTML su un'unica pagina Web oppure alle regole di stile CSS memorizzate in fogli di stile esterni. I fogli di stile esterni consentono di definire un aspetto comune per diverse pagine Web.
Per visualizzare la finestra di dialogo Generatore di stile
Scegliere Formato dal menu principale, quindi fare clic su Stile.
Verrà visualizzata la finestra di dialogo Generatore di stile.
Selezionare un'opzione dal riquadro sinistro per definire gli attributi di stile CSS.
Creazione di stili CSS inline nella visualizzazione Progettazione
Quando si formatta un elemento HTML selezionato nella visualizzazione Progettazione, gli attributi di stile vengono inseriti inline nel markup dell'elemento. Passare alla visualizzazione HTML per visualizzare e modificare i nuovi attributi di stile inseriti.
Per applicare gli attributi di stile CSS direttamente agli elementi HTML presenti sulla pagina Web
Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML.
Aprire la finestra Struttura documento per selezionare un elemento da formattare, quindi scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.
Selezionare un'opzione dal riquadro sinistro per definire gli attributi di stile CSS.
Il titolo della finestra di dialogo Generatore di stile includerà il nome dell'elemento selezionato. Gli stili CSS possono essere applicati a elementi inclusi nell'elemento <BODY> del documento HTML.
Markup di stile CSS nella visualizzazione HTML
Quando si aggiunge uno stile inline a un elemento HTML nella visualizzazione Progettazione, il markup HTML viene aggiunto al tag di apertura, che può quindi essere visualizzato e modificato nella visualizzazione HTML, come illustrato nell'esempio di codice riportato di seguito.
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
In alternativa, è possibile creare un blocco STYLE all'interno dell'elemento <HEAD> del documento HTML. Esempio:
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
Stili CSS in fogli di stile esterni
È anche possibile creare stili in un documento foglio di stile separato con estensione css.
Per creare stili in un documento foglio di stile separato con estensione css
Aprire un foglio di stile esterno (documento css) per la modifica oppure crearne uno se non ve ne sono disponibili nell'applicazione Web attenendosi alla procedura riportata di seguito.
Fare clic con il pulsante destro del mouse sul sito Web e scegliere Aggiungi nuovo elemento.
Selezionare il foglio di stile dall'elenco Modelli Visual Studio installati della finestra di dialogo Aggiungi nuovo elemento e quindi scegliere Aggiungi per aggiungere un nuovo foglio di stile al sito Web.
Fare doppio clic sul foglio di stile per aprirlo in modo che sia possibile modificarlo.
Scegliere Aggiungi regola di stile dal menu Stili per inserire una nuova definizione di stile vuota.
Posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore della regola di stile, fare clic su Stili e quindi scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile e aggiungere attributi alla definizione di stile.
.gif "Nota") Nota: |
|---|
Il menu Stili, le cui opzioni comprendono Aggiungi regola di stile e Compila stile, viene visualizzato all'apertura di un foglio di stile CSS esterno per la modifica. L'opzione Compila stile del menu Stili diventa disponibile quando si posiziona il punto di inserimento tra le parentesi graffe che seguono il selettore di una regola di stile. |
Per rendere disponibili per gli elementi HTML di una pagina Web gli stili definiti in un foglio di stile esterno, creare un collegamento a un foglio di stile esterno all'interno dell'elemento <HEAD> della pagina, come illustrato nell'esempio di codice seguente:
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
Applicazione delle definizioni di stile a elementi con CLASS e ID
Per definire la proprietà CLASS di uno stile, far precedere una definizione di stile da un punto, come illustrato nell'esempio di codice riportato di seguito.
.term { font-size:9pt; font-weight:bold; color:darkblue;}
È possibile applicare la proprietà CLASS di uno stile definito a un elemento della pagina Web dalla visualizzazione Progettazione o dalla visualizzazione HTML della finestra di progettazione HTML. Nella visualizzazione Progettazione è possibile selezionare testo o elementi nell'editor WYSIWYG oppure utilizzare la finestra Struttura documento per selezionare elementi. Selezionare uno stile dal menu a discesa Stile nella barra degli strumenti Formato. Tale stile verrà applicato all'elemento selezionato.
Nella visualizzazione HTML è possibile utilizzare la finestra Struttura documento per selezionare l'elemento, quindi aprire la finestra Proprietà, scorrere verso il basso fino alla proprietà CLASS dell'elemento selezionato e immettere il selettore per lo stile CSS desiderato (senza il punto). In tal modo una proprietà CLASS verrà inserita nel markup HTML dell'elemento. Esempio:
<DIV CLASS="term">World Wide Web</DIV>
Utilizzando la definizione precedente per lo stile "term", le parole "World Wide Web" verranno visualizzate con un tipo di carattere a 9 punti, in grassetto e in blu scuro.
È inoltre possibile definire stili univoci da utilizzare in una sola posizione sulla pagina. Far precedere il nome di uno stile univoco da un simbolo di cancelletto (#), come nell'esempio di codice riportato di seguito.
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
Per applicare uno stile univoco a un elemento della pagina Web
Aprire la pagina nella visualizzazione HTML della finestra di progettazione HTML.
Utilizzare la finestra Struttura documento per selezionare l'elemento e quindi aprire la finestra Proprietà.
Per la proprietà ID di questo elemento, immettere il selettore dello stile desiderato.
In tal modo nel markup dell'elemento verrà inserito un attributo ID. Esempio:
<P ID="bigdeal">Happy Birthday</P>
- Utilizzando la definizione precedente per lo stile "term", le parole "Happy Birthday" verranno visualizzate in un tipo di carattere a 24 punti, sottolineato e rosso.
Attività
Procedura dettagliata: modifica HTML di base in Visual Web Developer
Procedura dettagliata: creazione e modifica di un file CSS
Elementi di interfaccia
Per ulteriori informazioni sulle opzioni per |
Vedere |
|---|---|
Tipi di carattere |
|
Sfondi |
|
Testo |
|
Posizione degli elementi su una pagina |
|
Controllo del flusso, overflow, area di visualizzazione e stampa di interruzioni di pagina |
|
Bordi, margini e spaziatura |
|
Elenchi |
|
Interfaccia utente, tabelle ed effetti visivi |
Vedere anche
Concetti
Cenni preliminari sull'utilizzo di CSS