Elementi a livello di blocco in una pagina web appaiono in ordine sequenziale. Per migliorare l'aspetto o l'utilità della pagina, puoi modificare quell'ordine avvolgendo i blocchi, comprese le immagini, in modo che il testo scorre intorno alle immagini.
In termini di web design, questo effetto è noto come fluttuazione dell'immagine. Questo si ottiene con il Proprietà CSSgalleggiante, che consente al testo di scorrere attorno all'immagine allineata a sinistra sul lato destro (o attorno a un'immagine allineata a destra sul lato sinistro).
Inizia con HTML
Questo esempio aggiunge un'immagine all'inizio di un paragrafo (prima del testo, ma dopo l'apertura
etichetta). Ecco il markup HTML iniziale:
Il testo del paragrafo va qui. In questo esempio, abbiamo l'immagine di una foto del primo piano, quindi questo testo potrebbe descrivere la persona nel primo piano.
Per impostazione predefinita, la pagina verrà visualizzata con l'immagine sopra il testo, poiché le immagini sono elementi a livello di blocco in HTML. Ciò significa che il browser visualizza le interruzioni di riga prima e dopo l'elemento immagine per impostazione predefinita. Per modificare questo aspetto predefinito utilizzando CSS, aggiungi un valore di classe (
sinistra) all'elemento image per fungere da hook a cui possono essere associate proprietà.Il testo del paragrafo va qui. In questo esempio, abbiamo l'immagine di una foto del primo piano, quindi questo testo potrebbe descrivere la persona nel primo piano.
Nota che questa classe non fa nulla da sola. CSS raggiungerà lo stile desiderato.
Aggiunta di stili CSS
Aggiungi questa regola a quella del sito foglio di stile:
.sinistra {
galleggiante: sinistro;
riempimento: 0 20px 20px 0;
}
Questo stile fa galleggiare qualsiasi cosa con la classe sinistra a sinistra della pagina e aggiunge un po' imbottitura a destra e in basso dell'immagine in modo che il testo non vada a sbattere contro di essa.
In un browser, l'immagine sarebbe ora allineata a sinistra; il testo apparirà alla sua destra con uno spazio tra i due.
Il valore della classe .sinistra qui usato è arbitrario. Puoi chiamarlo come preferisci perché non fa nulla da solo. Tuttavia, non dovresti nemmeno che qualsiasi valore che modifichi nel CSS dovrebbe riflettersi anche nell'HTML.
Altri modi per ottenere questi stili
Puoi anche togliere il valore della classe dall'immagine e modellarlo con CSS scrivendo un selettore più specifico. Nell'esempio seguente, l'immagine è all'interno di una divisione con a contenuto principale valore di classe.
Il testo del paragrafo va qui. In questo esempio, abbiamo l'immagine di una foto del primo piano, quindi questo testo potrebbe descrivere la persona nel primo piano.
Per dare uno stile a questa immagine, scrivi questo CSS:
.main-content img {
galleggiante: sinistro;
riempimento: 0 20px 20px 0;
}
In questo scenario, l'immagine è allineata a sinistra, con il testo che fluttua intorno ad essa come prima, ma senza il valore di classe extra nel markup. Questa operazione su larga scala può aiutare a creare un file HTML più piccolo, che sarà più facile da gestire e può migliorare le prestazioni.
Evita gli stili in linea
Infine, potresti usare stili in linea:
Il testo del paragrafo va qui. In questo esempio, abbiamo l'immagine di una foto del primo piano, quindi questo testo potrebbe descrivere la persona nel primo piano.
Ciò non è consigliabile, tuttavia, perché combina lo stile di un elemento con il suo markup strutturale. Le migliori pratiche impongono che lo stile e la struttura di una pagina rimangano separati. Questa segregazione è particolarmente utile quando è necessario modificare il layout della pagina e cercare diverse dimensioni dello schermo e dispositivi con un sito Web reattivo.
Intrecciare lo stile della pagina con l'HTML rende creazione di media query adattare il tuo sito a schermi diversi è molto più difficile.