Creare e applicare uno stile

Importante :  Il presente articolo è stato tradotto automaticamente, vedere la dichiarazione di non responsabilità. Per visualizzare la versione inglese dell'articolo, fare clic qui.

Uno stile è un insieme di caratteristiche di formattazione definite in un foglio di stile CSS. È possibile applicare gli stili ai contenuti di una pagina Web, tra cui testo (singoli caratteri o interi paragrafi), elementi grafici, livelli, tabelle o anche il corpo dell'intera pagina Web. Gli stili consentono di riutilizzare in modo efficiente un insieme di proprietà e valori senza dover impostare le proprietà ogni volta che vengono utilizzate.

Gli stili di un CSS si propagano a catena, nel senso che agli elementi HTML vengono applicate regole di stile globali, a meno che non vengano superate da regole di stile locali. In generale, le regole di stile locali hanno priorità su quelle generali. Ad esempio, uno stile definito in un foglio di stile CSS interno a una pagina Web ha la priorità su uno stile definito in un CSS esterno. Analogamente, un CSS in linea definito in un singolo elemento HTML della pagina Web ha la priorità su qualsiasi stile definito per lo stesso elemento in foglio di stile CSS interno o esterno della pagina Web. Quelle parti delle regole di stile globali che non vengono contraddette dalle regole di stile di un CSS locale vengono applicate agli elementi HTML anche in presenza di stili locali.

In questo articolo

Tipi di stili

Creare uno stile

Applicare uno stile

Tipi di stile

Uno stile che risiede in un foglio di stile CSS esterno o interno può essere basato su classi, basato su elementi o basato su id. Uno stile è definito da un set di regole, costituito da un selettore, seguito da un blocco di dichiarazioni di proprietà racchiuso tra parentesi graffe di apertura ({) e di chiusura (}). I vari tipi di stile si distinguono tra di loro per il selettore. Il selettore per gli stili basati su classi ha come prefisso un punto (.), il selettore per gli stili basati su id ha come prefisso un cancelletto (#) e il selettore per gli stili basati su elementi è costituito solo da un elemento HTML quale, ad esempio, l'elemento H1.

Stili basati su classi

Utilizzare gli stili basati su classi per definire un insieme di proprietà da utilizzare su uno o più elementi di una pagina Web. Se si desidera modificare lo stile, è possibile modificare il set di regole dello stile e tutti gli elementi a cui lo stile è stato applicato rifletteranno automaticamente le modifiche.

Nell'esempio seguente, "introduction" è il selettore dello stile, mentre "font-size: small" è una dichiarazione di proprietà seguita da una seconda dichiarazione di proprietà.

Esempio di set di regole per uno stile basato su classi

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

Esempio di stile basato su classi applicato a un tag <p>

<p class="introduction">

Stili basati su elementi

Utilizzare gli stili basati su elementi per definire un insieme di proprietà che tutte le istanze di un particolare elemento HTML dovranno utilizzare in una pagina Web. Ad esempio, per creare un margine di 25 pixel attorno a tutti i paragrafi, ovvero contenuti compresi tra tag <p>, di una pagina Web, si crea uno stile basato su elementi che utilizza l'elemento p quale selettore e contiene le dichiarazioni per le proprietà del margine, come illustrato dal seguente esempio di codice.

Esempio di set di regole per uno stile basato su elementi

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

Stili basati su id

Utilizzare uno stile basato su id per definire un insieme di proprietà per un singolo elemento o blocco di elementi che si desidera distinguere da tutti gli altri contenuti in una o più pagine Web. Utilizzare uno stile basato su id quando si desidera definire lo stile per un singolo elemento HTML in una pagina Web.

Esempio di set di regole per uno stile basato su id

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

Esempio di stile basato su id applicato a un tag <p>

<p id="footer">

Stili in linea

Utilizzare uno stile in linea per definire un insieme di proprietà per un singolo elemento o blocco di elementi in una pagina Web quando non si desidera riutilizzare lo stile. Al contrario degli stili basati su id, su elementi e su classi, le cui proprietà sono definite nella sezione intestazione di una pagina Web (CSS interni) o in un file CSS esterno, le proprietà degli stili in linea, o CSS in linea, sono definite direttamente nell'elemento HTML per il quale si desidera utilizzare lo stile.

Esempio di set di regole per uno stile in linea

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

Torna all'inizio

Creare uno stile

È possibile creare nuovi stili da zero o copiandone uno esistente. In entrambi i casi, nella finestra di dialogo Nuovo stile è possibile definire tutte le caratteristiche del nuovo stile, tra cui tipo di selettore, proprietà e foglio di stile che conterrà lo stile. Per creare un nuovo stile in linea è possibile utilizzare anche il riquadro attività Proprietà CSS. Quando si desidera creare e applicare rapidamente un nuovo stile nella pagina, senza impostare alcuna proprietà per lo stile, è possibile utilizzare anche la barra degli strumenti Stile.

Creare uno stile utilizzando la finestra di dialogo Nuovo stile

  1. Effettuare una delle seguenti operazioni:

    • Per aggiungere uno stile a un foglio di stile CSS esterno, aprire il file css.

    • Per aggiungere uno stile a un foglio di stile CSS interno, aprire la pagina Web.

    • Per aggiungere uno stile in linea, aprire la pagina Web, quindi selezionare il contenuto per cui definire lo stile.

  2. Effettuare una delle seguenti operazioni:

    • Per creare un nuovo stile    Scegliere Nuovo stile nel riquadro attività Applica stili, nel riquadro attività Gestione stili, sulla barra degli strumenti Stile o dal menu Formato.

    • Per copiare uno stile esistente    Effettuare una delle seguenti operazioni:

      • Nel riquadro attività Applica stili, spostare il puntatore sullo stile che si desidera copiare e fare clic sulla freccia in giù visualizzata, quindi selezionare Copia nuovo stile.

      • Nel riquadro attività Gestione stili o nel riquadro attività Proprietà CSS, fare clic con il pulsante destro del mouse sullo stile che si desidera copiare, quindi selezionare Copia nuovo stile.

  3. Nella finestra di dialogo Nuovo stile effettuare le operazioni seguenti:

Utilizzare

Per

Selettore

  • Per utilizzare un selettore classe, digitare un punto (.) seguito da un nome univoco.

  • Per utilizzare un selettore id, digitare un cancelletto (#) seguito da un nome univoco.

    Nota : I nomi dei selettori classe e id non possono contenere spazi tranne nel caso in cui si stia creando un selettore complesso.

  • Per utilizzare un selettore elemento, digitare il nome di un elemento HTML oppure fare clic sulla casella di riepilogo a discesa Selettore e selezionare il nome dell'elemento.

  • Per utilizzare un selettore in linea, selezionare stile in linea.

  • Per creare un selettore complesso, digitare il selettore.

Definisci in

Selezionare una delle seguenti opzioni:

  • Pagina corrente aggiunge il nuovo stile al foglio di stile CSS interno alla pagina Web corrente.

  • Nuovo foglio di stile aggiunge il nuovo stile a un nuovo foglio di stile CSS esterno nuovo.

  • Foglio di stile esistente aggiunge il nuovo stile a un foglio di stile CSS esterno specificato.

Applica nuovo stile alla parte selezionata del documento

Applica lo stile alla selezione corrente nella pagina Web corrente.

URL

Se si seleziona Foglio di stile esistente in Definisci in, immettere l'URL al file css.

Categoria

Selezionare una delle seguenti categorie, quindi impostare le proprietà visualizzate nella parte destra della finestra di dialogo:

Suggerimento : Le categorie visualizzate in grassetto nell'elenco Categoria contengono proprietà impostate.

  • Carattere consente di impostare le proprietà dei caratteri, tra cui dimensioni, spessore, effetti e colore.

  • Blocco consente di impostare altezza riga e allineamento, rientro e spaziatura del testo.

  • Sfondo consente di impostare il colore di sfondo e le proprietà dell'immagine di sfondo.

  • Bordo consente di impostare un bordo e le relative proprietà.

  • Riquadro consente di impostare le proprietà di spaziatura interna e margine per elementi di tipo riquadro e blocco.

  • Posizione consente di impostare le dimensioni e la posizione per elementi di tipo riquadro e blocco.

  • Layout consente di impostare visibilità, spostamento, disposizione testo, ritaglio e altre proprietà del layout per elementi di tipo riquadro e blocco.

  • Elenco consente di impostare le proprietà degli elementi di tipo elenco, tra cui tipo, posizione e immagine.

  • Tabella consente di impostare le proprietà degli elementi correlati a una tabella, tra cui spaziatura, layout e bordi.

Nota : È inoltre possibile copiare uno stile da un foglio di stile CSS a un altro. Nel riquadro attività Gestione stili, trascinare lo stile dal CSS che lo contiene sul nome del CSS in cui si desidera copiarlo oppure in un punto particolare nell'elenco degli stili del CSS di destinazione.

Creare uno stile in linea con il riquadro attività Proprietà CSS

  1. In visualizzazione progettazione o in visualizzazione codice, nella pagina Web, selezionare il contenuto a cui si desidera aggiungere uno stile in linea.

  2. In Regole applicate, nel riquadro attività Proprietà CSS, fare clic con il pulsante destro del mouse sul selettore a cui si desidera applicare lo stile in linea oppure, se viene visualizzato "(nessuna regola applicata)", fare clic con il pulsante destro del mouse in un punto qualsiasi in Regole applicate, quindi scegliere Nuovo stile in linea dal menu di scelta rapida.

  3. In Proprietà CSS impostare le proprietà desiderate.

Creare e applicare un nuovo stile non definito

È possibile creare stili, applicarli agli elementi e definire gli stili in un secondo momento. Ad esempio, se si desidera affidare a un designer l'aspetto grafico della pagina Web, è possibile applicare stili non definiti agli elementi della pagina e concordare gli stili insieme con il designer in un secondo momento.

  1. In visualizzazione progettazione o in visualizzazione codice, nella pagina Web, selezionare l'elemento a cui si desidera applicare uno stile.

  2. Per creare e applicare un nuovo stile senza definirne le proprietà, digitare un nome univoco per lo stile nella casella Classe oppure ID sulla barra degli strumenti Stile.

Torna all'inizio

Applicare uno stile

Per applicare stili basati su classi o su id da fogli di stile CSS interni ed esterni, è possibile utilizzare i riquadri attività Applica stili o Gestione stili oppure la barra degli strumenti Stile. Nel riquadro attività Applica stili è possibile applicare più stili a una selezione, mentre il riquadro attività Gestione stili e la barra degli strumenti Stile consentono di applicare un solo stile. Con la barra degli strumenti Stile è possibile assegnare rapidamente un nome a nuovi stili non definiti e applicarli alla pagina.

Non è necessario applicare gli stili che utilizzano un elemento quale selettore (stili basati su elementi) poiché questi tipi di stile vengono applicati automaticamente agli elementi associati in una pagina Web. Nel riquadro attività Applica stili gli stili basati su elementi sono elencati in Selettori contestuali mentre nel riquadro attività Gestione stili accanto al nome dello stile viene visualizzato un punto blu. Gli stili basati su elementi non sono presenti nella barra degli strumenti Stile.

  1. In visualizzazione progettazione o in visualizzazione codice, nella pagina Web, selezionare l'elemento a cui si desidera applicare uno stile.

  2. Effettuare una delle seguenti operazioni:

    • Per applicare più stili esistenti    Nel riquadro attività Applica stili tenere premuto CTRL e fare clic sugli stili desiderati.

    • Per applicare un unico stile esistente    Effettuare una delle seguenti operazioni:

      • Nel riquadro attività Applica stili fare clic sullo stile basato su classi o su id desiderato.

      • Nella casella di riepilogo Classe oppure ID sulla barra degli strumenti Stile fare clic sullo stile basato su classi o su id desiderato.

      • Nel riquadro attività Gestione stili fare clic con il pulsante destro del mouse sullo stile basato su classi o su id desiderato, quindi scegliere Applica stile dal menu di scelta rapida.

    • Per creare e applicare un nuovo stile senza definirne le proprietà    Digitare un nome univoco per il nuovo stile nella casella Classe oppure ID sulla barra degli strumenti Stile.

Torna all'inizio

Nota : Dichiarazione di non responsabilità per la traduzione automatica: Il presente articolo è stato tradotto tramite un software di traduzione automatica e non da una persona. Microsoft offre le traduzioni automatiche per consentire a coloro che non conoscono la lingua inglese di leggere gli articoli sui prodotti, sui servizi e sulle tecnologie Microsoft. Dal momento che l'articolo è stato tradotto automaticamente, potrebbe contenere errori di sintassi, di grammatica o di utilizzo dei vocaboli.

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×