Procedura dettagliata: creazione e modifica di un file CSS
Aggiornamento: novembre 2007
In questa procedura dettagliata vengono illustrate le funzionalità dei fogli di stile CSS in Visual Studio 2008. Viene descritto come creare un layout di pagina a tre colonne fornendo le tecniche di base per la creazione di una nuova pagina Web e di un nuovo foglio di stile.
In questa procedura dettagliata vengono illustrate le attività seguenti:
Creazione di un sito Web di file system.
Personalizzazione del sito Web utilizzando le funzionalità CSS.
Creazione di un layout della pagina a tre colonne utilizzando CSS.
Prerequisiti
Per completare la procedura dettagliata, è necessario disporre dei seguenti elementi:
Visual Studio 2008 o Visual Web Developer 2008 Express Edition. Per informazioni su come eseguire il download, visitare il sito Web .NET Framework Developer Center (informazioni in lingua inglese).
.NET Framework versione 3,5.
Creazione di un sito Web
In questa parte della procedura dettagliata è possibile creare un sito Web a cui aggiungere una pagina. Nella sezione successiva è possibile aggiungere un file CSS e quindi eseguire la pagina in un browser Web.
Se è già stato creato un sito Web, ad esempio seguendo i passaggi della Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare alla sezione "Aggiunta di elementi di pagina e applicazione di stili", più avanti in questa procedura dettagliata. In caso contrario, creare un nuovo sito Web nuovi attenendosi alla seguente procedura.
Per creare un nuovo sito Web di file system
In Visual Web Developer scegliere Nuovosito Web dal menu File.
Nella finestra di dialogo Nuovo sito Web fare clic su Sito Web ASP.NET in Modelli Visual Studio installati.
Nella casella Percorso fare clic su File system e digitare il nome della cartella in cui salvare le pagine del sito Web.
Digitare ad esempio il seguente nome della cartella C:\CSSWebSite.
Nell'elenco Linguaggio selezionare Visual Basic o Visual C#, quindi fare clic su OK.
.gif "Nota")
Nota:Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web; tuttavia è possibile impostare il linguaggio di programmazione per ogni pagina singolarmente.
In Visual Web Developer viene creata la cartella e una nuova pagina denominata Default.aspx.
Aggiunta di elementi di pagina e applicazioni di stili
Per consentire di concentrarsi sugli strumenti di formattazione e applicazione di stili invece di creare elementi a cui applicare gli stili, in questa sezione viene fornito un insieme di elementi di pagina. È possibile copiare e incollare questi elementi in una pagina. Il codice include sezioni create con gli elementi div che contengono un'intestazione, sezioni di intestazione laterale sinistra e destra, una sezione di contenuto principale e un piè di pagina. Questi semplici elementi contengono il testo da utilizzare e gli ID degli elementi. In alcuni casi, gli elementi contengono classi CSS che è possibile utilizzare per applicare uno stile a specifici elementi di una pagina.
Aggiunta di elementi di pagina
Nella procedura descritta di seguito verranno copiati gli elementi di pagina da utilizzare con gli strumenti CSS. Gli elementi di pagina sono costituiti da un'intestazione contenente testo e una casella di ricerca, un piè di pagina e tre sezioni di testo. Il contenuto principale della pagina è presente nell'ultima sezione di testo.
Per aggiungere gli elementi di pagina alla pagina predefinita
Aprire o passare alla pagina Default.aspx.
Nota:È possibile utilizzare qualsiasi pagina disponibile nel sito Web.
Passare alla visualizzazione Origine.
Aggiungere il codice riportato di seguito dopo il tag <form>:
<div id="pagecontainer"> <div id="banner"> <h1>AdventureWorks Styling Page</h1> <h2>Making CSS Styling Easier in Design View</h2> <div id="search">Find:<input id="searchbox" type="text" /> <input id="searchbutton" type="button" value="Go" /> </div> </div> <div id="leftsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra tincidunt.</p> <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, convallis venenatis, auctor vitae, justo. In at massa.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p> </div> </div>Salvare la pagina.
Passare alla visualizzazione Progettazione per vedere la formattazione predefinita.
Applicazione di stili nella visualizzazione Progettazione
Mediante la visualizzazione Progettazione, è possibile applicare gli stili agli elementi di pagina e controllare immediatamente i risultati. Non è necessario scrivere il CSS e passare quindi alla pagina per controllare se è stato applicato lo stile desiderato.
In visualizzazione Progettazione è possibile applicare gli stili ai singoli elementi di una pagina in diversi modi. È possibile utilizzare gli stili in linea, scritti come attributo style di un singolo elemento. Queste regole di stile possono essere applicate solo a un determinato elemento.
È possibile scrivere le regole di stile in un elemento style nell'elemento head HTML della pagina. Queste regole di stile possono essere applicate agli elementi della pagina corrente. Infine, è possibile scrivere regole di stile in un file CSS esterno. In tal caso, le regole di stile possono essere applicate a tutte le pagine del sito Web.
Per questa procedura dettagliata le informazioni di formattazione e applicazione di stili verranno scritte nella sezione dell'elemento style della pagina e come stili in linea. Sarà possibile successivamente spostare le informazioni CSS in un foglio di stile esterno per utilizzare le altre funzionalità di Visual Studio 2008.
Formattazione di un'intestazione della pagina
Il primo elemento da formattare è la sezione intestazione che include gli elementi racchiusi nel tag <div ID="banner">. In questo esempio verrà utilizzata la barra degli strumenti Applicazione diretta stile per modificare lo stile e la posizione dell'intestazione. Verrà inoltre impostata la dimensione dell'area dell'intestazione e aggiunto un colore di sfondo.
Per formattare il testo dell'intestazione
In visualizzazione Progettazione fare clic sul testo di intestazione nella sezione intestazione contenente "AdventureWorks Styling Page".
La selezione viene delimitata da un riquadro blu e contrassegnata da una scheda in cui viene indicato che è stato selezionato l'elemento h1.
Nella barra degli strumenti Applicazione stili fare clic su Applica nuovo stile nell'elenco Regola di destinazione .
Viene visualizzata la finestra di dialogo Nuovo stile.
Il valore predefinito dell'opzione Applicazione diretta stile è impostato su Manuale, pertanto sarà necessario applicare lo stile manualmente.
Nell'elenco Selettore fare clic su h1 in modo da poter creare uno stile da applicare a tutti gli elementi h1.
L'elenco Definisci in è impostato su Pagina corrente, ovvero la regola di stile viene creata in un elemento style della pagina corrente.
Nell'elenco famiglia di caratteri selezionare un tipo di carattere spesso, ad esempio Impact.
Nella casella dimensioni del carattere immettere o selezionare grandissimo.
Nella casella variante del carattere immettere o selezionare maiuscoletto.
Scegliere OK.
Per controllare la regola di stile creata, passare alla visualizzazione Origine e scorrere fino all'elemento style che si trova all'interno dell'elemento head.
È possibile verificare che la regola di stile CSS è stata creata per l'elemento h1.
Utilizzare i passaggi seguenti per applicare uno stile all'elemento h2 nell'intestazione in modo analogo:
Aprire la finestra di dialogo Nuovo stile come nel passaggio 2.
Selezionare l'elemento h2.
Impostare il valore Selettore nella casella Nuovo stile su h2.
Impostare la famiglia di caratteri su Comic Sans MS e impostare le dimensioni del carattere su piccolo.
Selezione degli elementi di pagina
In Visual Studio 2008 è possibile selezionare gli elementi della pagina in diversi modi. È possibile utilizzare la barra dei tag che si trova nella sezione inferiore del riquadro di visualizzazione Progettazione. Quando si posiziona il punto di inserimento in un punto qualsiasi di una pagina, nella barra dei tag viene visualizzato un tag che mostra il codice HTML sottostante per tale area. I tag che contengono il tag corrente vengono visualizzati a sinistra del tag nella barra dei tag. Ad esempio, se il punto di inserimento è in una cella della tabella, il tag td viene visualizzato nella barra dei tag preceduto da un tag tr per la riga della tabella e da un tag table per la tabella.
Quando si sposta il puntatore su un tag nella barra dei tag, il contenuto del tag viene evidenziato nella visualizzazione Progettazione e viene visualizzata una freccia sul tag. È possibile fare clic su questa freccia per selezionare un tag e il relativo contenuto, selezionare solo il contenuto del tag, modificare o rimuovere il tag, aprire la finestra di dialogo Editor di tag o aprire la finestra di dialogo Proprietà per un elemento.
È inoltre possibile utilizzare il tasto ESC per passare al livello superiore nella gerarchia degli elementi. Ad esempio, l'elemento h1 è nidificato all'interno dell'elemento div dell'intestazione. Per selezionare l'intero elemento div, fare clic sull'elemento h1 per selezionarlo, quindi utilizzare il tasto ESC per selezionare l'elemento div dell'intestazione. Notare che la prima volta che si preme il tasto ESC, viene evidenziato l'elemento h1 e vengono visualizzati la spaziatura interna e i margini dell'elemento. Per questi valori vengono utilizzate le impostazioni predefinite. Quando si preme di nuovo il tasto ESC, viene selezionato l'intero elemento div. Quando si seleziona l'elemento, nel tag viene visualizzato div#banner.
Ridimensionamento dell'intestazione e posizionamento del relativo contenuto
È possibile ridimensionare e posizionare l'intestazione e il relativo contenuto in visualizzazione Progettazione utilizzando la barra degli strumenti Applicazione diretta stile. Le regole di stile vengono scritte nella pagina corrente, ovvero nella stessa posizione in cui sono state scritte le regole di stile precedenti.
| Nota: |
|---|
È possibile utilizzare il tasto CTRL e i tasti di direzione per modificare il valore dimensione degli elementi che sono già stati impostati. Ad esempio, se si trascina la larghezza dell'intestazione a 785 pixel, è possibile utilizzare la combinazione di tasti CTRL + freccia SINISTRA per ridurre la larghezza a 780 pixel. |
Per ridimensionare l'intestazione
Passare alla visualizzazione Progettazione.
Fare clic sul testo h1 ("AdventureWorks Styling Page") per selezionarlo, quindi premere il tasto ESC due volte per selezionare l'elemento che lo racchiude, ovvero l'elemento div dell'intestazione.
Trascinare il quadratino di ridimensionamento sull'angolo inferiore destro per ridimensionare l'elemento div dell'intestazione.
Notare che durante il trascinamento, viene visualizzata una descrizione comandi con i valori di larghezza e altezza. Questi valori sono indicati anche nella barra di stato che si trova nella sezione inferiore della finestra di visualizzazione Progettazione.
Ridimensionare l'elemento fino a raggiungere approssimativamente le dimensioni di 780 pixel di larghezza e 100 pixel di altezza.
Per verificare la regola di stile creata, passare alla visualizzazione Suddivisa e scorrere fino all'elemento style.
È possibile verificare la creazione di una regola di stile per l'elemento div dell'intestazione mediante il selettore #banner.
In visualizzazione Progettazione verificare che l'elemento div dell'intestazione sia selezionato (nella struttura tag dovrebbe essere ancora selezionato div#banner).
Scegliere Colore di sfondo dal menu Formato.
Verrà visualizzata la finestra di dialogo Selezione colori.
Selezionare un colore per l'intestazione, quindi fare clic su OK.
È inoltre possibile applicare le regole di stile per centrare il testo nelle intestazioni. A tale scopo, impostare i valori della spaziatura interna.
Per posizionare gli elementi all'interno dell'intestazione
In visualizzazione Progettazione selezionare l'elemento div dell'intestazione.
Scegliere Paragrafo dal menu Formato.
Verrà visualizzata la finestra di dialogo Paragrafo.
Poiché la lunghezza dell'elemento h1 è uguale a quella dell'elemento div dell'intestazione, è possibile posizionare il testo all'interno dell'elemento h1 per centrarlo nell'area dell'intestazione.
Nella casella Paragrafo selezionare Al centro nell'elenco a discesa Allineamento, quindi fare clic su OK.
Selezionare l'elemento h2, quindi ripetere i passaggi 2 e 3.
Selezionare l'elemento div dell'intestazione.
Posizionare il puntatore del mouse sul bordo dell'elemento div tenendo premuto il tasto MAIUSC finché non viene visualizzata una descrizione comandi con il valore della spaziatura interna corrente.
Trascinare il bordo della spaziatura interna finché non è adiacente al bordo superiore dell'elemento div.
Trascinare fino a quando i due elementi di testo non risultano centrati (approssimativamente 30 pixel).
Per completare l'intestazione, è necessario posizionare l'elemento div di ricerca e i relativi elementi nell'intestazione. A tale scopo, è possibile utilizzare un'altra funzionalità di Visual Studio 2008, la griglia di posizionamento.
Per posizionare l'elemento div di ricerca all'interno dell'intestazione
In visualizzazione Progettazione selezionare l'elemento div di ricerca (div#search).
Scegliere Imposta posizione dal menu Formato, quindi selezionare Assoluto.
Trascinare l'elemento div di ricerca dalla scheda contenente div#search in una posizione all'interno dell'intestazione e a destra degli elementi di testo.
Dalla selezione si estendono due linee blu che indicano il valore di posizionamento superiore e di sinistra.
Rilasciare l'elemento div di ricerca non appena si trova nella posizione desiderata.
Creazione di un layout flessibile a tre colonne
È possibile utilizzare Visual Web Developer per creare regole di stile formattando gli elementi di pagina in visualizzazione Progettazione. È anche possibile utilizzare questi stessi strumenti per creare il layout della pagina.
In questa procedura dettagliata verrà creato un layout a tre colonne utilizzando la regola di stile Mobile. Verranno innanzitutto impostate le dimensioni e la posizione delle intestazioni laterali sinistra e destra, quindi verrà regolata la spaziatura interna nella sezione di contenuto principale per creare un layout flessibile a tre colonne.
| Nota: |
|---|
Per verificare il corretto posizionamento degli elementi in visualizzazione Progettazione, può essere necessario nascondere la Barra degli strumenti in modo da disporre di più spazio per verificare la posizione degli elementi di pagina. |
Creazione di colonne per l'intestazione laterale
È possibile ridimensionare le colonne laterali nel layout della pagina come per l'intestazione. Quando si ridimensionano le colonne dell'intestazione laterale, impostare solo il valore della larghezza, non il valore dell'altezza, in modo da estendere la lunghezza della colonna in base al testo. Per impostare solo la larghezza dell'elemento div, è possibile trascinare il lato destro dell'elemento div anziché trascinare l'elemento div dall'angolo, come nell'esempio precedente.
Per ridimensionare e posizionare gli elementi div dell'intestazione laterale sinistra e destra
In visualizzazione Progettazione selezionare l'elemento div dell'intestazione laterale sinistra. A tale scopo, selezionare div.column#leftsidebar nella struttura tag.
Trascinare il bordo destro dell'elemento div dell'intestazione laterale sinistra per ridimensionare l'elemento fino a raggiungere approssimativamente le dimensioni di 200 pixel di larghezza.
Durante il trascinamento, viene visualizzato il valore dell'altezza in parentesi, a indicare che non è stato impostato.
Scegliere Posizione dal menu Formato.
Verrà visualizzata la finestra di dialogo Posizione.
In Disposizione testo selezionare A sinistra, quindi fare clic su OK.
Selezionare l'elemento div dell'intestazione laterale destra e trascinarne il bordo destro fino a raggiungere approssimativamente la larghezza di 250 pixel.
Scegliere Posizione dal menu Formato.
In Disposizione testo selezionare A destra, quindi fare clic su OK.
Creazione della colonna centrale
Per creare la colonna centrale, è possibile impostare i margini e la spaziatura interna in modo da allontanare il contenuto dalle colonne sinistra e destra. Verrà innanzitutto creato un bordo sinistro, quindi mediante la spaziatura interna il contenuto verrà allontanato dal bordo.
Per applicare uno stile alla colonna centrale
In visualizzazione Progettazione selezionare l'elemento div del contenuto principale.
Trascinare il margine destro dell'elemento div del contenuto principale tenendo premuto il tasto CTRL per impostare il margine destro su 260 pixel. Trascinare il margine sinistro impostando un valore di 210 pixel.
Selezionare l'elemento div del contenuto principale, quindi scegliere Bordi e sfondo dal menu Formato.
Verrà visualizzata la finestra di dialogo Bordi e sfondo.
In Impostazioni selezionare Personalizzata.
Nell'elenco Stile selezionare Tinta unita e in Anteprima fare clic sul pulsante del bordo sinistro.
Nella casella di testo Larghezza immettere 1px.
In Spaziatura interna immettere 10px nella casella A sinistra
Scegliere OK.
Regolazione del piè di pagina
Se gli utenti ridimensionano la pagina o se la pagina viene visualizzata su uno schermo di grande formato, il piè di pagina può andare a capo ed essere visualizzato sul bordo di una delle colonne. Per evitare questo problema, è possibile impostare la regola di stile Cancella.
Per regolare l'elemento div del piè di pagina
In visualizzazione Progettazione selezionare l'elemento div del piè di pagina.
Scegliere Nuovo stile dal menu Formato.
Verrà visualizzata la finestra di dialogo Nuovo stile.
Nella casella Selettore immettere o selezionare #footer.
Nell'elenco Categoria fare clic su Layout.
Nell'elenco cancella selezionare entrambi.
Scegliere OK.
Creazione e utilizzo di un foglio di stile
Per utilizzare CSS in modo efficiente, inserire le regole di stile in un foglio di stile. In questo modo è possibile fare riferimento agli stili da tutte le pagine definendo un aspetto omogeneo.
È anche possibile utilizzare i fogli di stile CSS con i temi ASP.NET. Per utilizzare un foglio di stile con un tema, è necessario inserirlo nella cartella corretta. Per ulteriori informazioni sui temi e CSS, vedere Cenni preliminari su temi e interfacce ASP.NET.
Per creare un foglio di stile, utilizzare le stesse tecniche adottate per creare una nuova pagina.
Per creare un foglio di stile e associarlo a una pagina
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.
In Modelli Visual Studio installati selezionare Foglio di stile.
Nella casella Nome digitare Layout.css, quindi scegliere Aggiungi.
L'editor viene aperto con un nuovo foglio di stile che contiene una regola di stile body vuota.
Aprire o passare alla pagina Default.aspx e passare alla visualizzazione Progettazione.
Scegliere Stili CSS dal menu Formato, quindi fare clic su Gestisci stili.
Verrà visualizzata la finestra Gestisci stili. Per impostazione predefinita, questa finestra è ancorata.
Fare clic su Associa foglio di stile.
Viene visualizzata la finestra di dialogo Seleziona foglio di stile.
Selezionare il file Layout.css, quindi fare clic su OK.
Una nuova scheda denominata Layout.css viene creata nella finestra Gestisci stili.
È possibile assegnare un foglio di stile a una pagina in diversi modi. Il modo più semplice è trascinare il file da Esplora soluzioni sull'elemento Head della pagina in visualizzazione Origine.
Spostamento delle regole di stile da una pagina a un foglio di stile
È possibile utilizzare il riquadro Gestisci stili per spostare gli stili da una pagina all'altra o per verificare l'applicazione delle regole di stile in una pagina.
Fino a questo punto nella procedura dettagliata, le regole di stile create sono state salvate nell'elemento style della pagina Default.aspx. È possibile spostare queste regole di stile nel nuovo foglio di stile creato.
Per spostare le regole di stile mediante il riquadro Gestisci stile
Nella scheda Pagina corrente della finestra Gestisci stili, selezionare tutti gli stili. È possibile selezionarli mediante MAIUSC+CLIC.
Trascinare gli stili selezionati nella scheda Layout.css della finestra Gestisci stili.
Le regole di stile vengono rimosse dalla pagina Default.aspx e spostate nel file Layout.css. È possibile verificarlo visualizzando la pagina Default.aspx in visualizzazione Origine e passando alla pagina Layout.css nell'editor.
È inoltre possibile modificare l'ordine degli stili nel foglio di stile utilizzando la finestra Gestisci stili. Ad esempio, è possibile trascinare la regola di stile di ricerca sotto la regola di stile dell'intestazione.
Passaggi successivi
In questa procedura dettagliata sono state illustrate le tecniche di base per l'utilizzo degli stili CSS mediante l'interfaccia utente di Visual Studio 2008. È inoltre possibile esplorare le modalità riportate di seguito per controllare l'aspetto delle pagine Web:
Utilizzo di un foglio di stile esistente. Per ulteriori informazioni, vedere Procedura dettagliata: utilizzo di un file CSS esistente.
Impostazione delle informazioni sullo stile a livello di codice per elementi HTML. Per ulteriori informazioni, vedere Procedura: impostare le proprietà dei controlli server HTML a livello di codice.
Creazione di temi e interfacce che consentono di specificare non solo gli stili CSS, ma una qualsiasi proprietà di un controllo ASP.NET. Per informazioni dettagliate, vedere Cenni preliminari su temi e interfacce ASP.NET.
Vedere anche
Attività
Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer