Condividi tramite

Cenni preliminari sull'utilizzo di CSS

  • Articolo

Aggiornamento: novembre 2007

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

Vengono illustrati i seguenti argomenti:

  • Scenari

  • Funzionalità degli strumenti CSS

  • Background

  • Esempi di codice

  • Riferimento alle classi

  • Novità

Scenari

Nella finestra di progettazione di Visual Studio 2008 è possibile non solo creare e modificare pagine Web, ma scrivere regole di stile in linea, contenute in una pagina Web o contenute in 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 2008 è disponibile un insieme di strumenti per creare, applicare e gestire stili e fogli di stile CSS, tra cui:

  • 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. Per ulteriori informazioni, vedere Procedura: utilizzare le finestre Applica stili e Gestisci stili.

  • 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 un foglio di stile interno (un elemento style in una pagina) in un foglio di stile esterno o viceversa. È inoltre possibile utilizzarla per spostare gli stili all'interno di un foglio di stile. Per ulteriori informazioni, vedere Procedura: utilizzare le finestre Applica stili e Gestisci stili.

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

  • La barra degli strumenti Applicazione diretta stile consente di applicare o rimuovere gli stili basati su classi o su ID nonché di creare e applicare nuovi stili. Fornisce un maggior controllo sugli stili generati da Visual Studio. Per ulteriori informazioni, vedere Procedura: utilizzare la barra degli strumenti Applicazione diretta stile.

  • 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 nidificati all'interno di altri tag. Per ulteriori informazioni, vedere Spostamento tra i tag dell'editor HTML in Visual Web Developer.

Torna all'inizio

Background

Anziché assegnare gli attributi di formattazione singolarmente a ogni elemento di una pagina, è possibile creare le regole di stile. Queste regole applicano i valori delle proprietà, in genere regole di formattazione, quando un browser Web incontra un'istanza di un elemento, o di un elemento con un ID o una classe di stile specifici.

Per utilizzare gli stili CSS è necessario comprendere come creare uno stile e come applicarlo. In questa sezione sono presenti informazioni tratte dalla specifica W3C CSS sugli stili CSS e sugli strumenti in Visual Studio 2008 che semplificano l'utilizzo degli stili CSS.

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 negli elementi h1 deve essere centrato e utilizzare il colore del carattere blu.

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

Utilizzo dei diversi tipi di stili

È possibile definire una regola di stile da applicare a un elemento, a un elemento con una classe assegnata o a un elemento in base all'ID. Uno stile viene definito dal relativo insieme di regole, costituito da un selettore seguito da un blocco di dichiarazioni di proprietà indicate tra una parentesi graffa di sinistra ({) e una parentesi graffa di destra (}). Ogni tipo di stile si differenzia dagli altri tipi di stile mediante il selettore. Un selettore basato su classi è preceduto da un punto (.). Un selettore basato su ID è preceduto da un simbolo di cancelletto (#). Il selettore per uno stile basato su elementi è costituito solo dal nome dell'elemento HTML, ad esempio h1.

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 (contenuto incluso negli elementi p). A tale scopo, creare uno stile basato su elementi che utilizza l'elemento p come selettore e che contiene le dichiarazioni per le proprietà relative ai margini. 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 specifici elementi identificati dall'attributo ID. 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 degli 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 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        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> sarà 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" type="text/css" 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.Non vengono però racchiuse tra i 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.

Le singole regole di stile globali non sottoposte a override dalle regole di stile CSS locali continueranno a essere applicate agli elementi anche dopo l'applicazione degli stili locali. Nell'esempio riportato nella sezione precedente gli stili CSS locali utilizzati per controllare il testo nell'elemento h1 consentono di sostituire alcune regole di stile globali del browser Web relative al testo 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

Procedura: utilizzare le finestre Applica stili e Gestisci stili

Procedura: utilizzare la barra degli strumenti Applicazione diretta stile

Torna all'inizio

Riferimento alle classi

Non è disponibile alcuna classe da applicare agli strumenti CSS.

Torna all'inizio

Novità

Visual Studio 2008 offre funzionalità di modifica CSS avanzate dotate di numerosi strumenti nuovi che semplificano notevolmente l’utilizzo dei fogli di stile CSS. La maggior parte del lavoro di progettazione del layout e impostazione dello stile del contenuto può essere eseguito nella visualizzazione Progettazione utilizzando la finestra Proprietà CSS, le finestre Applica stili e Gestisci stili e lo strumento Applicazione diretta stile. È inoltre possibile modificare posizionamento, spaziatura interna e margini in visualizzazione Progettazione utilizzando gli strumenti di layout visivo WYSIWYG.

Torna all'inizio

Vedere anche

Concetti

Spostamento tra i tag dell'editor HTML in Visual Web Developer

Formattazione degli elementi nell'editor HTML in Visual Web Developer