Condividi tramite


Posizione, finestra di dialogo Generatore di stile

Aggiornamento: novembre 2007

La pagina Posizione della finestra di dialogo Generatore di stile consente di definire gli attributi di posizionamento dei fogli di stile CSS. È possibile applicare questi attributi direttamente agli elementi HTML oppure aggiungerli alle regole di stile CSS.

Per applicare gli attributi di posizionamento direttamente agli elementi HTML della pagina

  1. Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML e selezionare l'elemento da formattare.

  2. Scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.

  3. Scegliere Posizione nel riquadro sinistro della finestra di dialogo Generatore di stile.

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

Quando si applicano stili a elementi selezionati nella visualizzazione Progettazione, gli attributi di stile CSS verranno inseriti inline nel markup HTML relativo a tali elementi. Passare alla visualizzazione HTML per verificare i nuovi attributi di stile inseriti.

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

  1. Aprire un foglio di stile esterno e posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore della regola di stile desiderata.

  2. Scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile.

  3. Scegliere Posizione nel riquadro sinistro della finestra di dialogo Generatore di stile.

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

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 a un elemento 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 Posizione della finestra di dialogo Generatore di stile comprendono:

Attività

Elementi di interfaccia

Modalità di posizionamento

Consente di impostare la modalità che determina quali campi di posizionamento saranno successivamente disponibili. Selezionare una delle seguenti opzioni dall'elenco a discesa:

  • <Non impostato>
    Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

  • Posizione nel flusso normale
    La posizione dell'elemento non viene modificata. È possibile specificare l'altezza e la larghezza. Se si sceglie questa opzione, verrà inserito il seguente markup CSS:

    POSITION:static

    Nota:

    L'area di anteprima adiacente al selettore Modalità di posizionamento viene aggiornata in base alla modalità selezionata.

  • Offset dal flusso normale
    Consente di specificare le posizioni in alto e a sinistra in relazione alla posizione dell'elemento nel flusso normale. È possibile specificare l'altezza e la larghezza. Per flusso normale si intende la posizione dell'elemento prima che venga applicato lo stile. Se si sceglie questa opzione, verrà inserito il seguente markup CSS:

    POSITION:relative

  • Posizione assoluta
    Consente di specificare la posizione in alto assoluta, la posizione sinistra assoluta, il valore indice Z, l'altezza e la larghezza di un elemento. In genere, il posizionamento assoluto viene impostato per gli elementi che si desidera ancorare a una specifica posizione. È, ad esempio, possibile posizionare in modo assoluto un logo per evitare che subisca spostamenti in fase di aggiunta o modifica di altri elementi. Se si sceglie Posizione assoluta, verrà inserito il seguente markup CSS:

    POSITION:absolute

Se si seleziona una modalità di posizionamento, saranno disponibili le seguenti opzioni:

  • In alto
    Consente di impostare la posizione in alto di un elemento come valore assoluto o relativo rispetto alla posizione nel flusso normale. Immettere un valore e scegliere un'opzione di unità (px, pt, pc, mm, cm, in, em, ex o %). L'opzione di unità predefinita è px. Se, ad esempio, si digita 5 e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

    TOP:5px

    Nota:

    Questa opzione è disponibile quando si selezionaOffset dal flusso normale dall'elenco Modalità di posizionamento.

  • A sinistra
    Consente di impostare la posizione a sinistra di un elemento come valore assoluto o relativo rispetto alla posizione nel flusso normale. Immettere un valore e scegliere un'opzione di unità (px, pt, pc, mm, cm, in, em, ex o %). L'opzione di unità predefinita è px. Se, ad esempio, si digita 5 e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

    LEFT:5px

    Nota:

    Questa opzione è disponibile quando si seleziona Offset dal flusso normale dall'elenco Modalità di posizionamento.

  • Altezza
    Consente di impostare l'altezza di un elemento. Immettere un valore e scegliere un'opzione di unità (px, pt, pc, mm, cm, in, em, ex o %). L'opzione di unità predefinita è px. Se, ad esempio, si digita 5 e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

    HEIGHT:5px

  • Larghezza
    Consente di impostare la larghezza di un elemento. Immettere un valore e scegliere un'opzione di unità (px, pt, pc, mm, cm, in, em, ex o %). L'opzione di unità predefinita è px. Se, ad esempio, si digita 5 e si accetta l'opzione di unità predefinita, verrà inserito il seguente markup CSS:

    WIDTH:5px

  • Indice Z
    Consente di impostare il valore di ordine z di un elemento. Tale valore consente di controllare la visualizzazione degli elementi sovrapposti. Gli elementi con valori di ordine z superiori vengono visualizzati in primo piano rispetto a quelli con valori inferiori. Per spostare l'elemento verso l'alto nell'ordine z, immettere un numero positivo per produrre un risultato simile al seguente esempio:

    Z-INDEX:99

    Nota:

    Per spostare l'elemento verso il basso, immettere un numero più piccolo o negativo.

    Nota:

    La posizione e il valore Indice Z sono correlati. Se sono stati immessi valori di posizione che provocano la sovrapposizione di elementi, assegnando i valori Indice Z appropriati è possibile controllare quali elementi debbano essere visualizzati sopra altri. Assegnare un valore Indice Z più alto all'elemento che si desidera visualizzare sopra gli altri.

Vedere anche

Concetti

Cenni preliminari sull'utilizzo di CSS

Riferimenti

Sfondo, finestra di dialogo Generatore di stile

Tipo di carattere, finestra di dialogo Generatore di stile

Testo, finestra di dialogo Generatore di stile

Layout, finestra di dialogo Generatore di stile

Bordi, finestra di dialogo Generatore di stile

Elenchi, finestra di dialogo Generatore di stile

Altro, finestra di dialogo Generatore di stile

Finestra di dialogo Selezione colori