Bordi, finestra di dialogo Generatore di stile

Articolo
09/12/2008

Aggiornamento: novembre 2007

La pagina Bordi della finestra di dialogo Generatore di stile consente di specificare gli attributi di stile CSS che definiscono i bordi e i margini dell'area che include un elemento HTML. È possibile applicare questi attributi direttamente agli elementi HTML oppure aggiungerli alle regole di stile CSS.

Per applicare gli attributi dei bordi direttamente agli elementi HTML della pagina

Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML e utilizzare la finestra Struttura documento per selezionare un elemento da formattare.
Scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.
Scegliere Bordi nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Bordi.

Quando si formattano elementi selezionati nella visualizzazione Progettazione, gli attributi di stile CSS vengono inseriti inline nel markup HTML della pagina. Passare alla visualizzazione HTML per verificare i nuovi attributi di stile inseriti.

Per aggiungere gli attributi dei bordi a una regola di stile CSS definita in un foglio di stile esterno

Aprire un foglio di stile esterno e posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore dello stile desiderato.
Scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile.
Scegliere Bordi nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Bordi.

Nota:
Il menu Stili viene visualizzato quando si apre un foglio di stile CSS esterno per la modifica. L'opzione Compila stile del menu Stili diviene disponibile quando si posiziona il punto di inserimento tra le parentesi graffe che seguono il selettore di una regola di stile.

Una classe di stile CSS definita in un foglio di stile esterno può essere applicata alla maggior parte degli elementi all'interno dell'elemento <BODY> di una pagina Web mediante l'assegnazione del selettore di stile CSS come proprietà CLASS per l'elemento.

Le opzioni disponibili nella pagina Margini della finestra di dialogo Generatore di stile comprendono:

Attività

Elementi di interfaccia

Margini

Consente di impostare gli attributi con cui controllare la distanza fra l'area rettangolare che circonda un elemento e altri elementi. Immettere valori in uno o più campi (In alto, In basso, A sinistra o Right) e selezionare un'opzione di unità tra px (predefinita), pt, pc, mm, cm, in, em, ex o %. Se, ad esempio, si immette 50 nei campi In alto e In basso e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

MARGIN-TOP: 50px; margin-bottom:50px

Nota:
I valori dei margini possono essere positivi o negativi.

Riempimento

Consente di impostare gli attributi con cui controllare la quantità di spazio fra un elemento e il relativo margine oppure fra un elemento e il bordo (se l'oggetto ha un bordo). Immettere valori in uno o più campi (In alto, In basso, A sinistra o A destra) e selezionare un'opzione di unità: px (predefinita), pt, pc, mm, cm, in, em, ex o %. Se, ad esempio, si immette 50 nei campi In alto e In basso e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Nota:
I valori di riempimento devono essere positivi.

Bordi

I seguenti attributi consentono di controllare il bordo dell'area rettangolare che include un elemento:

Selezionare i bordi da modificare
Consente di impostare il bordo da formattare. Selezionare Tutti, In alto, In basso, A sinistra o A destra. Il codice non verrà aggiunto allo stile fino a quando non sarà selezionato uno stile per il bordo.
Stile
Consente di impostare lo stile da applicare al bordo specificato. Selezionare <Non impostato>, Nessuno, Linea continua, Linea doppia, Incassato, In rilievo, Interno o Esterno. Se, ad esempio, si seleziona In alto come bordo e Linea continua come stile, verrà aggiunto il seguente codice:

BORDER-TOP-STYLE:solid
Spessore
Consente di impostare lo spessore del bordo specificato. Selezionare <Non impostato> (nessuna opzione scelta), Sottile, Medio, Spesso o Personalizzato. Se si seleziona Personalizzato, i campi adiacenti saranno disponibili per l'immissione di un numero e la selezione di un'opzione di unità tra px (predefinita), pt, pc, mm, cm, in, em, ex o %. Se, ad esempio, si seleziona il valore In alto come bordo, Linea continua come stile, Personalizzato come spessore, si digita 50 nel campo e quindi si accetta l'opzione di unità predefinita, verrà aggiunto il seguente codice:

BORDER-TOP:50px solid
Colore
Consente di impostare il colore del bordo selezionato nello stile. Selezionare un colore dall'elenco a discesa o scegliere il pulsante con i puntini di sospensione (...) per aprire la finestra di dialogo Selezione colori e selezionare colori aggiuntivi. Se, ad esempio, si seleziona In alto come bordo, Linea continua come stile e Blu come colore, verrà aggiunto il seguente codice:

BORDER-TOP:blue solid