Come utilizzare le opzioni di layout nel pannello delle proprietà CSS di Dreamweaver - dummies

Nella parte superiore del pannello Proprietà CSS Designer si trovano comunemente le proprietà CSS utilizzato per creare layout di pagina. Usate queste opzioni per specificare altezza, larghezza, allineamento, posizionamento e spaziatura. Queste impostazioni sono ideali per creare layout di pagina con stili di classe e ID per fare cose come allineare immagini e tag di posizione per creare layout a più colonne.

Puoi usare le opzioni Layout nel pannello Proprietà CSS per impostare questi valori:

• Larghezza: Specifica una larghezza per ogni elemento che può avere le sue dimensioni specificate, come un tag. Le opzioni di dimensione sono pixel (px), punto (pt), pica (pc), percentuale (%), em, rem, ex e ch.

• Altezza: Specifica un'altezza per ogni elemento che può avere le sue dimensioni specificate.

  • Min e Max Larghezza: Specifica la larghezza minima e massima per i tag e altri elementi del blocco. Queste opzioni sono utili quando si specifica la larghezza come percentuale della finestra del browser. Ad esempio, puoi impostare la larghezza del disegno all'80 percento della finestra del browser e quindi impostare una Larghezza massima di 1000 px per evitare che il layout venga allungato di oltre 1000 pixel.

  • Altezza minima e massima: Specifica l'altezza minima e massima per le etichette e altri elementi del blocco.

  • Margine: Imposta la quantità di spazio intorno a un elemento. I margini possono essere utilizzati per creare uno spazio tra il bordo di un elemento e altri elementi della pagina, ad esempio tra un'immagine e il testo o tra due tag. È possibile impostare il margine separatamente per la parte superiore, destra, inferiore e sinistra. Il riempimento è misurato in pixel, punti, pollici, centimetri, millimetri, picas, ems, exs e percentuali.

  • Riempimento: Imposta la quantità di spazio all'interno dei bordi di un elemento. Ad esempio, puoi utilizzare il riempimento per creare uno spazio tra i bordi di un tag e il suo contenuto. È possibile impostare il padding separatamente per la parte superiore, destra, inferiore e sinistra. Il riempimento è misurato in pixel, punti, pollici, centimetri, millimetri, picas, ems, exs e percentuali.

    L'impostazione di padding e spaziatura dei margini può essere complicata. Quando aggiungi margine e riempimento a un elemento, ad esempio un'immagine o un tag, aumenti la dimensione complessiva di quell'elemento e la quantità di spazio richiesta nel layout.

• Posizione: L'opzione Posizione, disponibile nella parte inferiore della sezione Layout del pannello Proprietà, altera il modo in cui gli elementi sono posizionati su una pagina. Il posizionamento può cambiare drasticamente il modo in cui gli elementi a livello di blocco (come tabella, elenco, intestazione, paragrafo e tag) vengono visualizzati in un browser.

  • Eredita: Non è necessario specificare questa opzione predefinita. A meno che non sia selezionata un'altra opzione, ogni elemento eredita il posizionamento del suo elemento genitore.

  • Statico: Posiziona il contenuto nella sua posizione all'interno del flusso del documento. Per impostazione predefinita, tutti gli elementi HTML che possono essere posizionati sono statici.

  • Assoluto: Usa le coordinate superiore e sinistra per controllare la posizione di un elemento rispetto all'angolo superiore sinistro della finestra del browser o all'angolo superiore sinistro di un elemento che contiene l'elemento.

  • Risolto: Posiziona un elemento relativo all'angolo in alto a sinistra del browser. Il contenuto di un elemento che utilizza il posizionamento fisso rimane costante anche se l'utente scorre verso il basso o attraverso la pagina.

  • Relativo: Usa una posizione relativa al punto in cui inserisci l'elemento nella pagina o rispetto al suo contenitore.

    

  • Virgola mobile: Allinea elementi, come immagini e tag, a sinistra oa destra di una pagina o di un altro contenitore, causando il testo o altri elementi da avvolgere attorno ad esso. Fare clic sulle icone nel campo Float per specificare le seguenti quattro opzioni: Eredita, Destra, Sinistra o Nessuna.

  • Cancella: Impedisce che il contenuto fluttuante si sovrapponga a un'area a sinistra oa destra oa entrambi i lati di un elemento. Questa opzione è utile quando un elemento flottato, come un tag usato per creare una barra laterale, si sovrappone a un altro elemento a livello di blocco, come un tag usato per creare il piè di pagina di una pagina.

  • Overflow-x e -y: Indica al browser come visualizzare il contenuto di un elemento se il contenitore, come un tag, non può adattarsi all'intera altezza o larghezza dell'elemento. Le opzioni di overflow sono

  • Visible: Mantieni il contenuto, ad esempio un'immagine o testo, visibile, anche se si espande oltre l'altezza o la larghezza definita di un contenitore.

  • Nascosto: Taglia il contenuto se supera la dimensione del contenitore. Questa opzione non fornisce barre di scorrimento.

  • Scorri: Aggiungi le barre di scorrimento al contenitore indipendentemente dal fatto che il suo contenuto superi la dimensione dell'elemento.

  • Auto: Le barre di scorrimento appaiono solo quando il contenuto di un contenitore supera i suoi limiti.

• Display: Indica se, o come, per eseguire il rendering di un elemento in un browser. Ad esempio, puoi modificare il posizionamento di un elenco non ordinato da orizzontale a verticale scegliendo In linea o nascondi un elemento, rendendolo invisibile, scegliendo Nessuno. È possibile utilizzare l'opzione Visualizza con un linguaggio di scripting per modificare dinamicamente la visualizzazione degli elementi.

• Visibilità: Controlla se il browser visualizza o meno un elemento. Le opzioni di visibilità sono

  • Eredita: L'elemento ha la visibilità dell'elemento in cui è contenuto (il valore predefinito).

  • Visibile: L'elemento viene visualizzato.

  • Nascosto: L'elemento non viene visualizzato.

  • Comprimi: Da utilizzare con tabelle HTML. Collapse può essere utilizzato per rimuovere una colonna o una riga senza influire sul resto del layout della tabella.

• Z-Index: Controlla la posizione di un elemento sulla coordinata Z, che controlla l'ordine di sovrapposizione degli elementi in relazione l'uno con l'altro.Gli elementi con numeri più alti si sovrappongono agli elementi con numero inferiore.

• Opacità: Controlla il livello di opacità per un elemento da 0. 0 (completamente trasparente) a 1. 0 (completamente opaco). Ad esempio, se entri. 5 nel campo di opacità, l'opacità di un elemento verrà ridotta al 50 percento.