Cenni preliminari sull'utilizzo di CSS

I fogli di stile CSS contengono regole di stile che vengono applicate agli elementi di una pagina Web. Questi stili consentono di definire il tipo di visualizzazione degli elementi e la relativa posizione nella pagina. In Visual Studio vengono forniti gli strumenti da utilizzare con i fogli di stile CSS.

Questo argomento contiene le sezioni seguenti:

• Scenari

• Funzionalità degli strumenti CSS

• Background

• Esempi di codice

• Riferimento alle classi

• Suggerimenti

Scenari

Quando si modificano le pagine Web, è possibile creare regole di stile in tre modi: in linea, in una sezione di <style> in una pagina Web oppure all'interno di un foglio di stile esterno. È possibile visualizzare la spaziatura interna e i margini applicati agli elementi di pagina mediante strumenti visivi nonché posizionare gli elementi mediante strumenti di posizionamento.

Torna all'inizio

Funzionalità degli strumenti CSS

In Visual Studio sono disponibili gli strumenti necessari per creare, applicare e gestire stili e fogli di stile CSS:

• La finestra Applica stili consente di creare, modificare e applicare gli stili. È inoltre possibile associare o rimuovere un CSS esterno. La finestra consente di identificare i tipi di stile e mostra se lo stile è utilizzato nella pagina Web corrente e nella selezione corrente.

• La finestra Gestisci stili fornisce molte delle funzionalità offerte dalla finestra Applica stili. È possibile tuttavia utilizzare la finestra Gestisci stili per spostare gli stili da una sezione <style> in un foglio di stile esterno o viceversa. È inoltre possibile utilizzarla per spostare gli stili all'interno di un foglio di stile.

• La finestra Proprietà CSS mostra gli stili utilizzati dalla selezione corrente di una pagina Web. Mostra inoltre l'ordine di priorità degli stili. Inoltre, la finestra fornisce un elenco completo di tutte le proprietà CSS consentendo di aggiungere proprietà a uno stile esistente, modificare le proprietà già impostate e creare nuovi stili in linea. Per ulteriori informazioni, vedere Procedura: utilizzare la finestra Proprietà CSS.

• Se si utilizzano pagine Web Form ASP.NET (file aspx), la barra dei tag consente di selezionare i tag HTML all'interno di una pagina Web. La barra dei tag si trova nella parte inferiore della finestra di modifica. Quando si posiziona il cursore in un punto qualsiasi di una pagina, nella barra dei tag vengono visualizzati i tag che mostrano il tag HTML sottostante per tale area. È inoltre possibile utilizzare il tasto ESC per spostarsi al livello superiore nella gerarchia HTML in modo da selezionare i tag annidati all'interno di altri tag.

Torna all'inizio

Informazioni di supporto

Non è necessario assegnare gli attributi di formattazione a ogni elemento di un determinato tipo in una pagina. In alternativa, è possibile creare una regola di stile da applicare a tutti gli elementi di tale tipo. Queste regole applicano i valori delle proprietà come regole di formattazione a un'istanza di un elemento o a un elemento con un ID o una classe di stile specifica.

In questa sezione si apprenderanno informazioni sugli stili CSS e come crearli e applicarli tramite Visual Studio.

Definizione di regole di stile CSS

Ogni regola di stile CSS, definita anche stile, è costituita da due parti principali: un selettore, ad esempio h1, e una dichiarazione, ad esempio color:blue. La dichiarazione è costituita da una proprietà (color) e il rispettivo valore (blue). La sintassi di una regola di stile è la seguente:

Selector { property : value ; property2 : value2}

Ad esempio, la regola di stile CSS seguente specifica che il testo nell'elemento h1 deve essere centrato e utilizzare il colore del carattere blu.

h1 {text-align:center; color:blue;}

Utilizzo dei diversi tipi di stili

Una regola di stile viene applicata a un elemento, un elemento con un attributo class o a un elemento che contiene un ID. In un foglio di stile ognuno di questi elementi è rappresentato da un selettore. Un selettore basato su classi è preceduto da un punto (.). Un selettore basato su ID è preceduto da un simbolo di cancelletto (#). Un selettore basato su elementi è costituito semplicemente dal nome dell'elemento HTML, ad esempio h1. Un intero stile è un selettore più un set di dichiarazioni di proprietà all'interno di una parentesi graffa aperta ( { ) e una parentesi graffa chiusa ( } ).

Stili basati su elementi

Gli stili basati su elementi definiscono le proprietà che si desidera applicare a ogni istanza di un particolare elemento HTML. Gli stili basati su elementi possono essere sottoposti a override dagli stili basati su classi o basati su ID per le singole istanze di un elemento. Ad esempio, è possibile creare un margine di 25 pixel intorno a tutti i paragrafi (elementi p). A tale scopo, creare uno stile che utilizza il selettore p seguito da parentesi graffe che contengono le proprietà del margine. Nell'esempio seguente viene illustrata questa regola di stile basata su elementi.

p { margin-left: 25px; margin-right: 25px }

Stili basati su classi

Gli stili basati su classi definiscono le proprietà che si desidera applicare a un sottoinsieme di un determinato tipo di elemento (ad esempio, solo ad alcuni elementi p). Possono essere applicati anche a tipi di elementi diversi, ad esempio alcuni elementi p e alcuni elementi span. Nell'esempio seguente viene illustrata una regola di stile basata su classi. Il nome introduction rappresenta il selettore dello stile, ovvero il nome della classe.

.introduction {font-size: small; color: white}

Nell'esempio seguente viene illustrato come specificare una classe per un tag <p>.

<p class="introduction">

Stili basati su ID

Gli stili basati su ID definiscono le proprietà che si desidera applicare a elementi con un attributo ID specifico. Uno stile basato su ID viene spesso utilizzato quando si desidera applicare uno stile a un singolo elemento HTML in una pagina Web. Nell'esempio seguente viene illustrato uno stile basato su ID. Il nome footer specifica l'ID al quale applicare questo stile.

#footer {background-color: #CCCCCC; margin: 15px}

Nell'esempio seguente viene illustrato come specificare un ID per un tag <p>.

<p id="footer">

Scrittura di stili CSS

È possibile scrivere le regole di stile CSS in molti punti, tra cui:

• In linea con il markup HTML.

• In un elemento style di una pagina Web.

• In un foglio di stile esterno (file css) collegato o importato nella pagina Web.

In generale, è possibile scrivere regole da applicare all'intero sito Web in un foglio di stile esterno. È possibile scrivere regole di stile da applicare solo a una pagina nell'elemento style della pagina. È possibile scrivere regole di stile da applicare a un singolo elemento di pagina come stile in linea. Molti progettisti e sviluppatori ritengono che scrivere tutte le regole di stile in uno o più fogli di stile esterni semplifica la gestione degli stili.

Creazione di stili in linea

Una regola di stile in linea viene definita nel tag di apertura di un elemento mediante l'attributo style. Utilizzare uno stile in linea quando si desidera definire le proprietà per un singolo elemento in una pagina Web e non si intende riutilizzare tale stile. Nell'esempio seguente viene illustrato uno stile in linea.

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Creazione di stili CSS interni (specifici della pagina)

È possibile definire le regole di stile CSS in un elemento style all'interno dell'elemento head di una pagina Web. In tal caso, le regole di stile vengono applicate solo agli elementi di quella pagina.

Nell'esempio seguente viene illustrato come definire e applicare una regola di stile CSS a tutti gli elementi h1 di una pagina Web.

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

In questa pagina Web il testo compreso tra i tag <h1> e </h1> è centrato e di colore blu. In seguito non sarà più necessario riassegnare questi attributi di stile a ciascun elemento h1 presente nel documento. Se inoltre si desidera modificare il colore o qualsiasi altra proprietà di tutto il testo presente negli elementi h1, sarà sufficiente modificare una sola regola di stile.

Creazione di fogli di stile CSS esterni

Un foglio di stile esterno è un file di testo con estensione css che contiene solo le regole di stile. Per collegare un foglio di stile a una pagina Web, utilizzare un elemento link, come illustrato nell'esempio seguente.

<link rel="stylesheet" href="myStyles.css" />

L'elemento link consente di applicare alla pagina corrente le regole di stile presenti nel foglio di stile esterno myStyles.css.

Le regole di stile elencate in un foglio di stile esterno vengono scritte in modo analogo a quelle presenti in un elemento style.Tuttavia non sono racchiuse nei tag <style> e </style>. Nell'esempio seguente viene illustrato il contenuto completo di un file css semplice.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

È possibile collegare un foglio di stile esterno a più pagine HTML, in modo da applicare gli stili a un intero sito Web. Nei fogli di stile le regole di formattazione sono separate dal contenuto, pertanto risulta più semplice gestire le regole di stile.

Priorità delle regole di stile CSS

Le regole di stile CSS vengono applicate in base a un ordine di priorità. Le regole di stile locali hanno la precedenza sulle regole di stile globali anche se applicate per prima. Ad esempio, uno stile definito in un elemento style di una pagina Web ha la precedenza su uno stile definito in un foglio di stile esterno. Analogamente, uno stile in linea definito in un singolo elemento HTML della pagina ha la precedenza su tutti gli altri stili definiti per lo stesso elemento in un'altra posizione.

Si applicano singole regole di stile globali, a meno che non vengano ignorate dalle regole di stile CSS locali. Nell'esempio riportato nella sezione precedente gli stili CSS locali per l'elemento h1 consentono di sostituire alcune regole di stile globali h1 (testo h1 centrato e di colore blu), ma non di modificarne tutti gli stili disponibili, ad esempio le caratteristiche dei tipi di carattere. Nell'ordine vengono applicate sia le regole di stile globali che locali, in modo che tutto il testo h1 di questa pagina venga visualizzato con un tipo di carattere di dimensioni maggiori, formattato in grassetto, centrato e in blu.

Esempi di codice

Procedura dettagliata: creazione e modifica di un file CSS

Procedura dettagliata: utilizzo di un file CSS esistente

Procedura: utilizzare la finestra Proprietà CSS

Torna all'inizio

Riferimento alle classi

Non è disponibile alcuna classe da applicare agli strumenti CSS.

Torna all'inizio

Suggerimenti

In Visual Studio sono disponibili funzionalità di modifica CSS avanzate associate a numerosi strumenti in grado di semplificare l'utilizzo dei fogli di stile CSS. La maggior parte del lavoro di progettazione del layout e di impostazione dello stile del contenuto può essere svolto nella visualizzazione Progettazione utilizzando la finestra Proprietà CSS, le finestre Applica stili e Gestisci stili. È inoltre possibile modificare posizionamento, spaziatura interna e margini nella visualizzazione Progettazione utilizzando gli strumenti di layout visivo WYSIWYG.

Torna all'inizio