Nuove finestre Stile e Modifica stile, Layout
La categoria Layout delle finestre di dialogo Nuovo stile e Modifica stile consente di definire le regole di stile CSS per il layout degli elementi dell'interfaccia utente in 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 il layout di elementi dell'interfaccia utente nella pagina corrente
Aprire la pagina in visualizzazione Progettazione o Origine.
Facoltativamente, selezionare il testo e/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 Layout.
Le selezioni dello stile di layout 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 layout 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 Layout.
Le selezioni dello stile di layout vengono visualizzate nel riquadro di destra.
È possibile applicare una classe di stile CSS a un elemento della pagina Web o all'elemento body stesso impostando la proprietà class dell'elemento sul nome del selettore della classe.
Nelle tabelle seguenti sono elencate le opzioni disponibili nella categoria Layout delle finestre di dialogo Nuovo stile e Modifica stile.
Opzioni di layout
visibilità
Indica se un elemento è visibile o nascosto. I valori sono i seguenti:collapse In caso di utilizzo con gli elementi della tabella, questo valore nasconde una riga o una colonna. Per tutti gli altri elementi, questo valore ha lo stesso significato di hidden.
hidden Rende invisibile l'elemento.
visible Rende visibile l'elemento.
inherit L'elemento eredita la proprietà visibility da un elemento padre.
visualizzazione
Modalità di visualizzazione di un elemento. I valori sono i seguenti:block L'elemento sarà visualizzato a livello di blocco con le interruzioni di riga prima e dopo di esso.
inline L'elemento sarà visualizzato in linea senza interruzioni di riga prima o dopo di esso.
inline-box L'elemento sarà visualizzato in linea come casella senza interruzioni di riga prima e dopo la casella.
inline-table L'elemento sarà visualizzato in linea come tabella senza interruzioni di riga prima e dopo la tabella.
list-item L'elemento sarà visualizzato come voce di un elenco.
none L'elemento sarà nascosto.
run-in L'elemento sarà visualizzato a livello del blocco o in linea, a seconda del contesto.
table L'elemento sarà visualizzato come tabella di blocco con un'interruzione di riga prima e dopo la tabella.
table-caption L'elemento sarà visualizzato come didascalia di tabella.
table-cell L'elemento sarà visualizzato come cella di tabella.
table-column L'elemento sarà visualizzato come colonna di tabella.
table-column-group L'elemento sarà visualizzato come gruppo di colonne di tabella. Questo gruppo può contenere una o più colonne.
table-footer-group L'elemento sarà visualizzato come gruppo di piè di pagina di tabella. Questo gruppo può contenere uno o più piè di pagina.
table-header-group L'elemento sarà visualizzato come gruppo di intestazioni di tabella. Questo gruppo può contenere una o più intestazioni.
table-row L'elemento sarà visualizzato come riga di tabella.
table-row-group L'elemento sarà visualizzato come gruppo di righe di tabella. Questo gruppo può contenere una o più righe.
inherit L'elemento eredita la proprietà display da un elemento padre.
float
Indica se un elemento si muoverà verso sinistra o destra, consentendo al testo di andare a capo, o se sarà visualizzato in linea. Questa proprietà è utilizzata più frequentemente con le immagini, ma si applica anche ai blocchi di testo. I valori sono i seguenti:left L'elemento si muove verso sinistra, all'interno dell'elemento padre.
none L'elemento viene visualizzato in linea dove compare nel testo.
right L'elemento si muove verso destra, all'interno dell'elemento padre.
inherit L'elemento eredita il valore della proprietà float da un elemento padre.
clear
Indica i lati di un elemento che impediscono il movimento degli elementi. I valori sono i seguenti:both L'elemento impedisce il movimento degli elementi sul lato sinistro o destro.
left L'elemento si muove al di sotto di un elemento mobile che si trova sul lato sinistro.
none L'elemento consente il movimento degli elementi su tutti i lati.
right L'elemento si muove al di sotto di un elemento mobile che si trova sul lato destro.
inherit L'elemento eredita la proprietà clear da un elemento padre.
cursore
Indica il tipo di cursore da visualizzare. I valori sono i seguenti:auto (impostazione predefinita) Il browser imposta il cursore.
crosshair Il cursore viene visualizzato come una croce.
default Il cursore predefinito (spesso una freccia).
e-resize Il cursore utilizzato per ridimensionare un elemento verso destra (est).
help Il cursore che indica che la guida è disponibile (spesso un punto interrogativo).
move Il cursore che indica che un oggetto può essere spostato.
n-resize Il cursore utilizzato per ridimensionare un elemento verso l'alto (nord).
ne-resize Il cursore utilizzato per ridimensionare un elemento verso l'alto e verso destra (nord-est).
nw-resize Il cursore utilizzato per ridimensionare un elemento verso l'alto e verso sinistra (nord-ovest).
pointer Il cursore viene visualizzato come un puntatore (spesso una mano).
progress Il cursore che indica che il programma sta avanzando.
s-resize Il cursore utilizzato per ridimensionare un elemento verso il basso (sud).
se-resize Il cursore utilizzato per ridimensionare un elemento verso il basso e verso destra (sud-est).
sw-resize Il cursore utilizzato per ridimensionare un elemento verso il basso e verso sinistra (sud-ovest).
text Il cursore utilizzato per il testo.
w-resize Il cursore utilizzato per ridimensionare un elemento verso sinistra (ovest).
wait Il cursore che indica che il programma è occupato (spesso una clessidra).
inherit L'elemento eredita la proprietà cursor da un elemento padre.
overflow
Indica ciò che avviene quando il contenuto di un elemento fuoriesce dalla propria area. I valori sono i seguenti:auto Le barre di scorrimento vengono visualizzate solo se il contenuto è troncato.
hidden Il contenuto viene troncato per adattarlo all'elemento e non viene visualizzata alcuna barra di scorrimento.
scroll Il contenuto viene troncato per adattarlo all'elemento e viene visualizzata una barra di scorrimento.
visible (impostazione predefinita) Il contenuto viene visualizzato anche se fuoriesce dall'elemento.
inherit L'elemento eredita la proprietà overflow da un elemento padre.
clip
Le dimensioni rettangolari di un elemento. Se l'elemento è più grande dell'area definita, verrà troncato per adattarlo all'area. Per specificare le dimensioni, utilizzare le caselle top, right, bottom e left.top
Margine superiore del rettangolo di troncamento. Se si specifica un valore, è possibile selezionare le unità nell'elenco.right
Margine destro del rettangolo di troncamento. Se si specifica un valore, è possibile selezionare le unità nell'elenco.bottom
Margine inferiore del rettangolo di troncamento. Se si specifica un valore, è possibile selezionare le unità nell'elenco.left
Margine sinistro del rettangolo di troncamento. Se si specifica un valore, è possibile selezionare 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.