Nuove finestre Stile e Modifica stile, Posizione
La categoria Posizione della finestra di dialogo Nuovo stile e Modifica stile consente di definire le regole di stile dei fogli CSS per la posizione degli elementi dell'interfaccia utente su una pagina Web. È possibile applicare direttamente queste regole di stile agli elementi HTML o aggiungerle alla pagina corrente o a un foglio di stile esterno.
Per definire una regola di stile CSS per la posizione degli elementi dell'interfaccia utente nella pagina corrente
Aprire la pagina in visualizzazione Progettazione o Origine.
Facoltativamente, selezionare il testo o gli elementi HTML a cui applicare lo stile.
Scegliere Nuovo stile dal menu Formato.
Verrà visualizzata la finestra di dialogo Nuovo stile.
Nel riquadro Categoria selezionare Posizione.
Le selezioni dello stile di posizione vengono visualizzate nel riquadro di destra.
Quando si applicano gli stili al testo selezionato nella visualizzazione Progettazione, gli attributi di stile verranno inseriti in linea nel markup HTML della pagina. Passare alla visualizzazione Origine per verificare i nuovi attributi di stile.
Per aggiungere gli attributi di posizione a una regola di stile CSS definita in un foglio di stile esterno
Aprire un foglio di stile esterno esistente.
Inserire il cursore all'interno delle parentesi graffe della regola di stile da modificare.
Effettuare una delle seguenti operazioni.
Fare clic con il pulsante destro del mouse sul foglio di stile nell'editor quindi scegliere dal menu di scelta rapida, scegliere Stile di compilazione.
Nella barra degli strumenti del foglio di stile scegliere Stile di compilazione.
Verrà visualizzata la finestra di dialogo Modifica stile.
Nel riquadro di sinistra fare clic su Posizione.
Le selezioni dello stile di posizione vengono visualizzate nel riquadro di destra.
Nelle tabelle seguenti sono elencate le opzioni disponibili nella categoria Posizione delle finestre di dialogo Nuovo stile e Modifica stile.
Opzioni di posizione
posizione
Algoritmo da utilizzare per inserire un elemento in una pagina Web. I valori sono i seguenti:absolute La posizione dell'elemento viene specificata utilizzando le proprietà top, right, bottom e left. Queste proprietà si applicano al blocco che le contiene.
fixed La posizione dell'elemento viene specificata utilizzando le proprietà top, right, bottom e left. Queste proprietà si applicano alla finestra del browser. L'elemento non scorre con la pagina Web.
relative La posizione dell'elemento viene calcolata secondo il normale flusso e quindi compensata utilizzando le proprietà top, right, bottom e left. La compensazione si applica alla posizione normale dell'elemento.
static La posizione dell'elemento viene calcolata secondo il normale flusso. Le proprietà top, right, bottom e left vengono ignorate. Questa è l'impostazione predefinita.
inherit L'elemento eredita l'algoritmo di posizionamento da un elemento padre.
z-index
Livello di stack di un elemento. Un elemento che ha un livello di stack elevato viene visualizzato davanti agli elementi che hanno livelli di stack inferiori.larghezza
Larghezza di un elemento. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.Altezza
Altezza di un elemento. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.top
Bordo superiore di un elemento. Se la proprietà position è impostata su static, questa proprietà viene ignorata. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.right
Bordo destro di un elemento. Se la proprietà position è impostata su static, questa proprietà viene ignorata. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.bottom
Bordo inferiore di un elemento. Se la proprietà position è impostata su static, questa proprietà viene ignorata. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.left
Bordo sinistro di un elemento. Se la proprietà position è impostata su static, questa proprietà viene ignorata. Se si specifica un valore, è possibile selezionarne le unità nell'elenco.
Altri elementi dell'interfaccia utente
Selettore
(Solo finestra di dialogo Nuovo stile) Consente di digitare un nome di classe o fare clic su un elemento HTML a cui applicare lo stile. I nomi di classe devono iniziare con un punto (.). È anche possibile selezionare (stile in linea), così da fare in modo che lo stile sia applicato in linea al testo o agli elementi HTML selezionati.Definisci in
(Solo finestra di dialogo Nuovo stile) Consente di specificare dove scrivere la definizione della regola di stile. I valori sono i seguenti:Pagina corrente La regola di stile viene scritta in un elemento style della pagina corrente.
Nuovo foglio di stile Al progetto viene aggiunto un nuovo foglio di stile CSS e vi viene scritta la regola.
Foglio di stile esistente La regola di stile viene aggiunta al foglio di stile CSS specificato utilizzando l'elenco URL.
URL
(Solo finestra di dialogo Nuovo stile) Consente di selezionare un foglio di stile CSS esistente. Questa opzione è abilitata solo quando Definisci in è impostato su Foglio di stile esistente.Applica nuovo stile alla parte selezionata del documento
(Solo finestra di dialogo Nuovo stile) Specifica che lo stile viene applicato al testo, alla classe o all'elemento HTML selezionato.Anteprima
Visualizza un esempio di come la regola di stile apparirà una volta applicata.Descrizione
Mostra la definizione CSS della regola di stile.