Procedura dettagliata: creazione e modifica di un file CSS

In questa procedura dettagliata vengono illustrate le funzionalità di Visual Studio che consentono di utilizzare i fogli di stile CSS. Viene descritto come creare un layout di pagina a tre colonne illustrando le tecniche di base relative alla creazione di una nuova pagina Web e di un nuovo foglio di stile.

Vengono illustrate le attività seguenti:

• Creazione di un sito Web di tipo 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 o Visual Studio Express per il Web installato nel computer.

  Nota

  Se si utilizza Visual Studio, nella procedura dettagliata si presuppone che sia stata selezionata la raccolta di impostazioni Sviluppo Web al primo avvio di Visual Studio.Per ulteriori informazioni, vedere Procedura: selezionare le impostazioni dell'ambiente di sviluppo Web.

• Informazioni generali sull'utilizzo di Visual Studio.

  Per informazioni preliminari sulla creazione di pagine Web Form in Visual Studio, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Studio.

Creazione di un sito Web

In questa parte della procedura dettagliata è possibile creare un sito Web a cui aggiungere una pagina Web Form. Nella sezione successiva è possibile aggiungere un file CSS e quindi eseguire la pagina in un browser.

Se è già stato creato un sito Web, ad esempio seguendo i passaggi in Procedura dettagliata: creazione di una pagina Web di base in Visual Studio, è possibile utilizzare tale sito e passare ad "Aggiunta di elementi di pagina e applicazioni di stili" più avanti in questa procedura dettagliata. In caso contrario, creare un sito Web attenendosi alla seguente procedura.

Per creare un sito Web di tipo file system

1. Aprire Visual Studio o Visual Studio Express per il Web.

2. Scegliere Nuovo sito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli installati fare clic su Visual Basic o Visual C#, quindi selezionare Sito Web ASP.NET vuoto.

4. Nella casella Percorso Web selezionare File system, quindi immettere il nome della cartella in cui archiviare le pagine per il sito Web.

   Digitare, ad esempio, il nome di cartella C:\WebSites.

5. Fare clic su OK.

   In Visual Studio verrà creato un progetto di sito Web comprendente un file Web.config, ma nessun altro file o pagina.

6. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, scegliere Aggiungi, quindi Aggiungi nuovo elemento.

7. Selezionare Web Form, assegnare alla pagina il nome Default.aspx, quindi fare clic su Aggiungi.

   Verrà creata la pagina Default.aspx e verrà aperta nella visualizzazione Origine.

Aggiunta di elementi di pagina e applicazioni di stili

In questa sezione viene fornito un set di elementi della pagina che è possibile modificare con gli strumenti per l'applicazione di stili e formattazione di Visual Studio. È 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

1. Aprire o passare alla pagina Default.aspx.

2. Passare alla visualizzazione Origine.

3. Nella sezione <form> rimuovere la coppia di tag <div></div> vuota creata per impostazione predefinita.

4. Aggiungere il codice riportato di seguito dopo il tag <form> di apertura:

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

   Nota

   Per migliorare la leggibilità della pagina, scegliere Formatta documento dal menu Modifica.

5. Salvare la pagina.

6. 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 creare e modificare un file css e passare alla pagina per controllare se è stato applicato lo stile desiderato.

In visualizzazione Progettazione è possibile applicare gli stili ai singoli elementi di una pagina nei modi seguenti:

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

• Scrivere regole di stile in una sezione <style> nell'elemento head HTML della pagina. Queste regole di stile possono essere applicate agli elementi della pagina corrente.

• 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 parte della procedura dettagliata verranno definite le regole di formattazione e stile scritte nella sezione style della pagina. In seguito si sposteranno le informazioni CSS create in un foglio di stile esterno.

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 finestra di dialogo Nuovo 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

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

2. Nella barra degli strumenti Formattazione, fare clic su Applica nuovo stile nell'elenco Regola di destinazione. In alternativa, scegliere Nuovo stile dal menu Formato.

   Suggerimento

   La barra degli strumenti di formattazione è abilitata per impostazione predefinita.Per abilitarla, scegliere Barre degli strumenti dal menu Visualizza, quindi scegliere Formattazione.

   Verrà visualizzata la finestra di dialogo Nuovo stile.

3. 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, Pagina corrente indica che la regola di stile viene creata in un elemento style della pagina che si sta modificando.

4. Nell'elenco della famiglia di tipi di carattere, selezionare Impact o un altro tipo di carattere utilizzato in genere per le intestazioni.

   Il tipo di carattere viene visualizzato in anteprima nel riquadro Anteprima.

5. Nella casella dimensioni del carattere immettere o selezionare grandissimo.

6. Nella casella variante del carattere immettere o selezionare maiuscoletto.

7. Fare clic su OK.

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

9. Utilizzare i passaggi seguenti per applicare uno stile all'elemento h2 nell'intestazione in modo analogo:

   1. Nella visualizzazione Progettazione inserire il puntatore nell'intestazione in cui è indicato "Lettura semplificata degli stili CSS in visualizzazione Progettazione", che è un elemento h2.

   2. Aprire la finestra di dialogo Nuovo stile come nel passaggio 2.

   3. Impostare il valore Selettore nella casella Nuovo stile su h2.

   4. Impostare la famiglia di caratteri su Comic Sans MS e impostare le dimensioni del carattere su piccolo.

   5. Fare clic su OK.

Selezione degli elementi di pagina

In Visual Studio è possibile selezionare gli elementi della pagina in diversi modi. È possibile utilizzare la barra dei tag che si trova lungo il lato 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, verranno visualizzati un tag table e un tag tr prima del tag td.

Quando si sposta il puntatore su un tag nella barra dei tag, viene visualizzata una freccia sul tag. È possibile fare clic su questa freccia per selezionare un tag e il relativo contenuto oppure per selezionare solo il contenuto del tag.

È inoltre possibile utilizzare il tasto ESC per passare al livello superiore nella gerarchia degli elementi. Ad esempio, l'elemento h1 è annidato 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. La prima volta che si preme ESC, viene evidenziato l'elemento h1 e vengono visualizzati la spaziatura interna e i margini dell'elemento. 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 Formattazione. Le regole di stile vengono scritte nella pagina corrente, ovvero nella stessa posizione in cui sono state scritte le regole di stile precedenti.

Per ridimensionare l'intestazione

1. Passare alla visualizzazione Progettazione.

2. Fare clic sul testo h1 (“AdventureWorks styling page") per selezionarlo e quindi premere ESC due volte. Questa azione seleziona l'elemento contenitore, ovvero l'elemento div denominato banner.

3. 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 nell'angolo inferiore sinistro della barra di stato presente nella parte inferiore della finestra di visualizzazione Progettazione.

4. Ridimensionare l'elemento fino a raggiungere approssimativamente le dimensioni di 780 pixel di larghezza e 125 pixel di altezza.

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

6. Passare alla visualizzazione Progettazione.

7. Verificare che l'elemento div dell'intestazione sia selezionato (nella struttura tag dovrebbe essere ancora selezionato div#banner).

8. Nel menu Formato fare clic su Bordi e sfondo.

   Verrà visualizzata la finestra di dialogo Bordi e sfondo.

   Fare clic sulla scheda Sfondo, selezionare Colore sfondo, quindi fare clic su Altri colori.

   Verrà visualizzata la finestra di dialogo Altri colori.

9. Selezionare un colore di sfondo per l'intestazione, quindi fare clic su OK.

   In doppia visualizzazione è possibile osservare che la regola di stile #banner viene aggiornata in modo che includa un'impostazione per background-color.

10. Per regolare la larghezza del form in base all'intestazione, selezionare l'elemento form. Trascinare quindi il quadratino di ridimensionamento sul lato destro per ridurre la larghezza del form a 780 pixel.

È inoltre possibile applicare le regole di stile per allineare al centro il testo nelle intestazioni mediante l'impostazione di valori di spaziatura interna.

Per posizionare gli elementi all'interno dell'intestazione

1. In visualizzazione Progettazione selezionare l'elemento h1 dell'intestazione.

2. Scegliere Paragrafo dal menu Formato.

   Verrà visualizzata la finestra di dialogo Paragrafo.

3. Nella casella Paragrafo selezionare Al centro nell'elenco a discesa Allineamento, quindi fare clic su OK.

4. Selezionare l'elemento h2, quindi ripetere i passaggi 2 e 3.

Per completare l'intestazione, è necessario posizionare l'elemento div di ricerca e i relativi elementi nell'intestazione, utilizzando la griglia di posizionamento.

Per posizionare l'elemento div di ricerca all'interno dell'intestazione

1. In visualizzazione Progettazione selezionare l'elemento div di ricerca (div#search). (Questo elemento nella parte superiore della pagina contiene la casella di ricerca.)

2. Scegliere Imposta posizione dal menu Formato, quindi selezionare Assoluto.

3. Trascinare l'elemento div#search tramite la relativa scheda 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.

4. Rilasciare l'elemento div di ricerca non appena sarà posizionato e ridimensionato nel modo desiderato.

Creazione di un layout flessibile a tre colonne

È possibile utilizzare Visual Studio 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 float. Innanzitutto, impostare la dimensione e posizione delle barre laterali sinistra e destra. Quindi modificare il riempimento nella sezione di contenuto principale per creare un layout flessibile a tre colonne.

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 della barra laterale, impostare solo il valore della larghezza, non il valore dell'altezza. Se non si specifica un valore dell'altezza, il testo può estendere la lunghezza della colonna se necessario. Per impostare solo la larghezza dell'elemento div, è possibile trascinare il lato destro dell'elemento div anziché trascinarlo dall'angolo.

Per ridimensionare e posizionare gli elementi div dell'intestazione laterale sinistra e destra

1. Nella visualizzazione Dividi selezionare l'elemento div sulla barra laterale sinistra nel codice sorgente HTML.

2. Trascinare verso sinistra il bordo destro dell'elemento div nella barra laterale per ridimensionarlo fino a raggiungere una larghezza di circa 200 pixel.

   Durante il trascinamento, viene visualizzato il valore dell'altezza in parentesi, a indicare che non è stato impostato.

3. Scegliere Posizione dal menu Formato.

   Verrà visualizzata la finestra di dialogo Posizione.

4. In Disposizione testo selezionare A sinistra, quindi fare clic su OK.

5. Selezionare l'elemento div dell'intestazione laterale destra e trascinarne il bordo destro fino a raggiungere approssimativamente la larghezza di 290 pixel.

6. Scegliere Posizione dal menu Formato.

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

1. In visualizzazione Progettazione o in visualizzazione Dividi selezionare l'elemento div per il contenuto principale.

2. Tenendo premuto il tasto CTRL, trascinare il margine destro dell'elemento div del contenuto principale per impostarlo su 290 pixel. Trascinare il margine sinistro a un valore di 210 pixel.

   In alternativa, è possibile utilizzare la visualizzazione Origine o la visualizzazione Dividi per creare una regola di stile seguente:

   #maincontent
   {
       margin-right: 290px;
       margin-left: 210px;
   }
   

3. Selezionare l'elemento div di contenuto principale, quindi scegliere Bordi e sfondo dal menu Formato.

   Verrà visualizzata la finestra di dialogo Bordi e sfondo.

4. In Impostazioni selezionare Personalizzata.

5. Nell'elenco Stile selezionare Tinta unita e in Anteprima fare clic sul pulsante del bordo sinistro e destro.

6. Nella casella di testo Larghezza scegliere 1.

7. In Spaziatura interna, nelle caselle Sinistra e Destra immettere 10.

8. Fare clic su OK.

   In visualizzazione Origine o nella doppia visualizzazione si noti che la definizione di stile per l'elemento #maincontent è stata aggiornata.

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 potrebbe essere visualizzato sul bordo di una delle colonne. Per evitare questo comportamento, è possibile impostare la regola di stile clear.

Per regolare l'elemento div del piè di pagina

1. In visualizzazione Progettazione selezionare l'elemento div del piè di pagina.

2. Scegliere Nuovo stile dal menu Formato.

   Verrà visualizzata la finestra di dialogo Nuovo stile.

3. Nella casella Selettore immettere o selezionare #footer.

4. Nell'elenco Categoria fare clic su Layout.

5. Nell'elenco cancella selezionare entrambi.

6. Fare clic su OK.

Creazione e utilizzo di un foglio di stile

Fino a questo punto sono state create le definizioni di stile modificando gli elementi direttamente nella pagina. Sono state salvate le definizioni di stile nell'elemento style all'interno dell'elemento head della pagina. Queste impostazioni di stile sono applicabili unicamente alla pagina corrente.

Per utilizzare CSS in modo efficiente, inserire le regole di stile in un foglio di stile a cui possono far riferimento tutte pagine Web. Per creare un foglio di stile, utilizzare le stesse tecniche adottate per creare una pagina.

Per creare un foglio di stile e associarlo a una pagina

1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, scegliere Aggiungi, quindi Aggiungi nuovo elemento.

2. Nell'elenco di modelli selezionare Foglio di stile.

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

4. Aprire o passare alla pagina Default.aspx e passare alla visualizzazione Progettazione.

5. Fare clic su Gestisci stili nel menu Visualizza.

   Verrà visualizzata la finestra Gestisci stili. Per impostazione predefinita, questa finestra è ancorata.

6. Nella barra degli strumenti della finestra Gestisci stili fare clic sul pulsante Associa foglio di stile.

   Viene visualizzata la finestra di dialogo Seleziona foglio di stile.

7. Selezionare il file Layout.css, quindi fare clic su OK.

   Una nuova scheda denominata Layout.css viene creata nella finestra Gestisci stili. Il file Layout.css è allegato al documento corrente. In visualizzazione Origine o nella doppia visualizzazione è possibile osservare che un elemento link come il seguente viene aggiunto all'elemento intestazione della pagina:

   <link href="Layout.css" rel="stylesheet" type="text/css" />
   

   Viene illustrato come utilizzare la finestra Gestisci Stili per assegnare un foglio di stile a una pagina. Sono disponibili altri modi per assegnare un foglio di stile a una pagina. Ad esempio, è anche possibile trascinare un file di foglio di stile da Esplora soluzioni all'elemento di head della pagina nella visualizzazione Origine. È inoltre possibile trascinare il file da Esplora soluzioni e rilasciarlo in un punto della pagina nella visualizzazione Progettazione.

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. È ora possibile spostare le regole di stile definite nel nuovo foglio di stile creato.

Per spostare le regole di stile mediante il riquadro Gestisci stile

1. Passare alla pagina Default.aspx.

2. Passare alla visualizzazione Progettazione.

3. Nella sezione Pagina corrente della finestra Gestisci stili selezionare tutti gli stili. Se si seleziona il primo stile e quindi si utilizza MAIUSC+CLIC per selezionare l'ultimo stile, verranno selezionati tutti gli stili.

4. Nella finestra Gestisci stili trascinare gli stili selezionati sull'icona corpo nella sezione Layout.css.

   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.

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. È inoltre possibile esplorare le seguenti modalità 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 i dettagli, vedere Temi e interfacce personalizzate ASP.NET.

Vedere anche

Altre risorse

Procedura dettagliata: creazione di una pagina Web Form di base in Visual Studio

Tipi di progetti di sito Web in Visual Studio