Definizione e applicazione di stili classe e ID

Se si desidera specificare lo stesso stile per più elementi, utilizzare le classi. Utilizzando una classe, è possibile avere lo stesso stile per diversi tag associando la classe ai tag.

Prerequisito: Creare un foglio di stile.

Associando più classi a ciascuna ricorrenza dello stesso tag, è possibile avere diversi stili per lo stesso tag.

Per creare e applicare uno stile di classe:

  1. Aprire il file .css che si desidera modificare facendo doppio clic sul file nella vista Esplora progetti. Il foglio di stile viene aperto nell'area di modifica.
  2. Per creare uno stile di classe:
    1. Fare clic sull'icona Aggiungi regola di stile Immagine dell'icona Aggiungi regola di stile. Viene aperta la finestra di dialogo Impostazione selettore del nuovo stile.
    1. Selezionare il pulsante di opzione Classe. Fornire un nome per la classe nel campo Nome classe. Il nome deve iniziare con un punto, ad esempio .note. L'opzione ID ha quasi gli stessi effetti dell'opzione Classe. L'unica differenza è che è possibile applicare un ID solo a un punto (una ricorrenza di un tag) in una pagina. Quindi, si consiglia di utilizzare le classi e non gli ID. Se si utilizzano gli ID, selezionare il pulsante di opzione ID e immettere il nome nel campo ID. Il nome deve iniziare con #.
    2. Fare clic su OK.
    3. Aggiungere le definizioni di stile specifiche utilizzando la finestra di dialogo Aggiunta stile.
    4. Fare clic su OK e salvare le modifiche. Il nome della classe specificato viene visualizzato nella vista Stili.
  3. Per applicare la classe a un elemento:
    1. Selezionare l'elemento nella pagina Progettazione di Page Designer.
    2. Nella vista Proprietà, fare clic sull'icona Sfoglia accanto al campo Classi. Immagine del campo Classi nella vista ProprietàViene aperta la finestra di dialogo Selezione classe.
    3. Espandere il foglio di stile e selezionare la classe desiderata.

      Immagine di una classe selezionata nella finestra di dialogo Selezione classe

    1. Fare clic su OK.
  4. Per applicare uno stile di ID:
    1. Selezionare l'elemento al quale applicare lo stile di ID.
    2. Nella vista Proprietà, fare clic sull'icona Tutti gli attributi Immagine dell'icona Tutti gli attributi.
    3. Nel campo ID, immettere il nome ID (senza #).

      Immagine dell'attributo ID nella vista Proprietà

  5. Allo stesso modo, è possibile selezionare altri elementi e applicare lo stesso stile di classe. È anche possibile applicare uno stile di classe definito dalla barra degli strumenti Stile. Da Page Designer, selezionare Barra degli strumenti > Stile per mostrare la barra degli strumenti Stile. È possibile applicare uno stile di classe a un elemento selezionando un nome classe dall'elenco a discesa.
  6. Per visualizzare la definizione della classe utilizzata nel foglio di stile, fare clic sullo stile nella vista Stili. È possibile visualizzare la definizione dello stile nella vista Proprietà.

Concetti correlati
CSS (Cascading Style Sheet) Designer

Attività correlate
Definizione stili
Specifica di stili per aree predefinite
Rimozione di uno stile specificato
Definizione di stili per un elemento
Definizione di stili collegamento pseudo HTML

Termini utilizzati | Feedback
(C) Copyright IBM Corporation 2000, 2005. Tutti i diritti riservati.