Modifiche di stile e layout
In breve
Le modifiche di stile e layout possono essere effettuate direttamente con l'editor flottante. Questo è immediatamente visibile dopo il caricamento di Varify.io sulla tua pagina. Basta cliccare sull'elemento che vuoi ottimizzare e impostare la modifica tramite il menu a tendina o digitando l'opzione di stile desiderata.
Opzioni di Stile e Layout
Le seguenti opzioni sono disponibili con il Floating Editor:
- Dimensions: Larghezza e altezza di un elemento
- Location: Posizionamento di un elemento sulla pagina web
- Typography:
- font-family: Font
- font-size: Dimensione del font
- font-weight: Spessore del tratto del font
- text-align: Allineamento orizzontale del testo
- color: Definisce il colore del testo.
- text-decoration: Il testo può essere sottolineato o barrato, per esempio.
- line-height: È l'altezza di una riga.
- word-spacing: Questa opzione aumenta o diminuisce la larghezza del font.
- white-space: Attraverso white–space si determina come le interruzioni di riga e gli spazi contenuti nel testo sorgente vengono visualizzati nel browser.
- Background:
- background-color: È il colore dello sfondo di un elemento.
- background-image: Immagine di sfondo per un elemento. Il formato del file dell'immagine di sfondo può essere JPG, PNG, SVG, webP o GIF.
- background-style: Se non specifichi nulla, la grafica di sfondo viene caricata a piena grandezza sullo sfondo. Se l'elemento è più piccolo in altezza o larghezza rispetto alla grafica di sfondo, la grafica viene automaticamente ritagliata.
- background-repeat: È il comportamento di ripetizione di una grafica di sfondo inclusa
- Border:
- margin: Descrizione della distanza esterna di un elemento rispetto agli elementi circostanti.
- padding: Descrive la distanza interna di un elemento rispetto alla sua cornice.
- border-style: La proprietà CSS border-style imposta lo stile di tutti e quattro i lati dei bordi di un elemento.
- border-width: La proprietà border-width determina tutte le larghezze del bordo di un elemento.
- border-color: La proprietà border-color determina tutti i colori del bordo di un elemento.
- border-radius: La proprietà border-radius determina il raggio con cui gli angoli di un elemento vengono arrotondati.
- Layout:
- float: Con questo indichiamo a un elemento di spostarsi verso il bordo sinistro o destro del suo elemento genitore. Questo ha un effetto non solo sull'elemento stesso, ma soprattutto su altri elementi correlati all'elemento "floated".
- vertical-align: Allinea immagini e testo nelle celle delle tabelle e il testo a una linea di base. La linea di base, o baseline, è una linea invisibile su cui poggiano la maggior parte delle lettere di una riga.
- overflow: Quando gli elementi sono troppo grandi per adattarsi al blocco che li racchiude, il loro contenuto trabocca dal blocco senza alcuna considerazione. Il CSS overflow nasconde le parti che traboccano dell'elemento in modo che la parte rimanente si adatti al blocco che lo racchiude.
- opacity: Opacità di un elemento. I valori possono essere compresi tra 0 e 1. 0 significa completamente trasparente. 1 significa completamente visibile.
- z-index: La proprietà z-index specifica l'ordine in cui gli elementi sono disposti dal retro al fronte sul mezzo di output. Questo è importante se gli elementi si sovrappongono. Gli elementi con uno z-index maggiore sono più vicini all'osservatore e possono sovrapporsi a elementi con uno z-index minore.