Procedura dettagliata: utilizzo di un file CSS esistente

Articolo
11/15/2012

In questa procedura dettagliata vengono illustrate le funzionalità dei fogli di stile CSS di Visual Studio. Vengono descritte le procedure di creazione e modifica di un layout della pagina a due colonne. Vengono inoltre illustrate le tecniche di base per la creazione di una nuova pagina Web e di un nuovo foglio di stile CSS.

Nota

Gli esempi in questo argomento sono specifici delle pagine Web Form ASP.NET.È possibile utilizzare la visualizzazione Origine per la modifica delle pagine nelle applicazioni ASP.NET MVC (Model View Controller) o Pagine Web ASP.NET (file .cshtml), ma la visualizzazione Progettazione è completamente supportata solo per le pagine Web Form.

Vengono illustrate le attività seguenti:

Creazione di un sito Web di tipo file system.
Utilizzo di funzionalità orientate a CSS di Visual Studio.
Creazione di un layout della pagina a due colonne mediante CSS.

Nota

In questa procedura dettagliata vengono illustrate funzionalità aggiuntive di Visual Studio che non erano state analizzate in Procedura dettagliata: creazione e modifica di un file CSS.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

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 in Visual Studio, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Studio.
Immagine che può essere aggiunta alla pagina Web. L'immagine effettiva non è importante, poiché verrà utilizzata soltanto per illustrare le funzionalità di posizionamento.

Creazione di un sito Web

In questa parte della procedura dettagliata, viene creato un sito Web al quale viene aggiunta una pagina.

Se è già stato creato un sito Web in Visual Studio, 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 HTML e di un file CSS" più avanti in questa procedura dettagliata. In caso contrario, creare un sito Web attenendosi alla seguente procedura.

Nota

Il modello di progetto predefinito per i siti Web ASP.NET e le applicazioni Web ASP.NET contiene un file Site.css.Questo file contiene le regole CSS che definiscono l'aspetto della pagina master (Site.master) e le pagine contenuto (Default.aspx e About.aspx).In questa procedura dettagliata viene illustrato come iniziare con un progetto di sito Web ASP.NET vuoto e quindi aggiungere le funzionalità CSS.

Per creare un sito Web di tipo file system

Aprire Visual Studio o Visual Studio Express per il Web.
Scegliere Nuovo sito Web dal menu File.

Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli installati scegliere Visual Basic o Visual C#, quindi selezionare Sito Web ASP.NET vuoto.
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.
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.
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, scegliere Aggiungi, quindi Aggiungi nuovo elemento.
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 HTML e di un file CSS

In questa sezione viene fornito un insieme di elementi che consente di concentrarsi sugli strumenti di formattazione e applicazione di stili anziché creare elementi a cui applicare gli stili. È 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 HTML

In questa sezione viene aggiunto il contenuto con il quale lavorare. La pagina è composta da un banner 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 elementi HTML alla pagina

Aprire la pagina Default.aspx nella visualizzazione Origine.

Aggiungere il codice seguente dopo l'elemento <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>
<asp:Image ID="Image1" runat="server"/>
<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.

Aggiunta di un file CSS

In questa sezione viene aggiunto un foglio di stile CSS (file .css) che applica uno stile agli elementi aggiunti alla pagina nell'ultima sezione. Il foglio di stile utilizza regole di stile basate su ID e sulla classe.

Per aggiungere un file CSS

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

Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Nel riquadro Modelli installati scegliere Foglio di stile.
Nella casella Nome digitare Layout.css e quindi fare clic su Aggiungi.

L'editor apre un nuovo foglio di stile contenente una regola di stile body.

Rimuovere la regola di stile body, quindi incollare le regole seguenti nel file.

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

Salvare il file.

Aggiunta di regole di stile al foglio di stile

Quando si lavora con un foglio di stile CSS esistente, è possibile utilizzare la finestra Gestisci stili per modificare le regole di stile nel suddetto foglio. In questa procedura dettagliata, la pagina verrà modificata dal layout a tre colonne originale a un layout a due colonne. Verranno quindi rimossi gli stili applicati al layout originale.

Rimozione della colonna destra e modifica dello stile

Per modificare il layout della pagina in un layout a due colonne, è possibile rimuovere il codice che crea la colonna destra. Sarà quindi possibile modificare lo stile degli altri elementi per creare il layout a due colonne.

Per rimuovere il codice e la formattazione della colonna destra

Nella visualizzazione Progettazione aprire o passare alla pagina Default.aspx.
Da Esplora soluzioni, trascinare il file CSS creato e rilasciarlo nella pagina.

In questo modo il file .css viene collegato alla pagina corrente. La pagina viene modificata per riflettere gli stili definiti nel file CSS.
Passare alla visualizzazione Origine.
Eliminare l'elemento div che inizia con <div id="rightsidebar" class="column">.
Salvare il file.
Scegliere Gestisci stili nel menu Visualizza.

Verrà visualizzata la finestra Gestisci stili. Per impostazione predefinita, la finestra è ancorata.
Nella finestra Gestisci stili, fare clic con il pulsante destro del mouse sullo stile #rightsidebar, quindi scegliere Elimina.

Nota

L'icona dello stile #rightsidebar non è racchiusa in un doppio quadrato, il che significa che non viene più utilizzata nella pagina e quindi può essere rimossa.
Nella finestra Gestisci stili, fare clic con il pulsante destro del mouse sullo stile #maincontent, quindi scegliere Modifica stile.

Verrà visualizzata la finestra di dialogo Modifica stile.
Scegliere Casella sotto Categoria.
In margine, impostare il valore della casella destra a 0.
Fare clic su OK.
Passare alla visualizzazione Progettazione. Ora il layout è a due colonne.
Salvare il file.

Aggiunta di un'immagine

Prima di impostare lo stile di un'immagine, è necessario aggiungere l'immagine al progetto e impostarne la proprietà ImageUrl.

Per aggiungere un'immagine al progetto

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

Verrà visualizzata la finestra di dialogo Aggiungi elemento esistente.
Nella finestra di dialogo, impostare il tipo di file su File di immagine.
Selezionare un file di immagine, quindi scegliere Aggiungi.

Una volta aggiunta l'immagine al progetto, è necessario assegnarla al controllo Image già presente nella pagina.

Per assegnare un'immagine al controllo Image

Nella visualizzazione Progettazione, aprire o passare al file Default.aspx.
Selezionare il controllo Image nella pagina.
Nella finestra Proprietà, accanto a ImageUrl, scegliere il pulsante con i puntini di sospensione (...) per impostare la proprietà di ImageUrl del controllo.

Verrà visualizzata la finestra di dialogo Seleziona immagine.
Scegliere l'immagine aggiunta al progetto e fare clic su OK.

Aggiunta di regole di stile per formattare l'immagine

Per migliorare il flusso di testo intorno all'immagine, è possibile eseguire il float dell'immagine al bordo sinistro o destro della colonna principale. È inoltre possibile aggiungere la spaziatura interna, che allontana il testo dall'immagine.

Per aggiungere immagini al layout

Aprire o passare al file Layout.css.

Aggiungere il codice seguente al foglio di stile.

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

Salvare il foglio di stile.
Passare al file Default.aspx nella visualizzazione Progettazione.
Selezionare il controllo di Image, che in questa fase visualizzerà l'immagine aggiunta al progetto.
Nella finestra Gestisci stili, applicare lo stile CSS floatright o floatleft al controllo Image facendo clic con il pulsante destro del mouse sullo stile CSS e selezionando Applica stile.

Lo stile CSS selezionato viene assegnato allo stile img.

Nota

Se l'immagine è troppo grande, l'applicazione dello stile potrebbe non avere alcun effetto visibile sulla posizione dell'immagini e del flusso di testo.In questo caso, ridurre le dimensioni dell'immagine prima di applicare lo stile.

Passaggi successivi

In questa procedura dettagliata vengono 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 nuovo foglio di stile. Per ulteriori informazioni, vedere Procedura dettagliata: creazione e modifica di un file CSS.
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 ulteriori informazioni, vedere Temi e interfacce personalizzate ASP.NET.

Vedere anche