Un elemento a livello di blocco in un documento HTML (ad esempio una pagina Web) viene visualizzato in ordine sequenziale. Per modificare l'ordine in modo che la pagina appaia più accattivante o per migliorarne l'utilità, è necessario avvolgere blocchi, comprese le immagini, in modo che il testo di quella pagina scorra attorno ad esso.
Nei termini web, questo effetto è noto come "floating" dell'immagine. Questo stile è realizzato con la proprietà CSS per "float". Questa proprietà consente al testo di scorrere intorno all'immagine allineata a sinistra sul lato destro. O intorno a un'immagine allineata a destra sul lato sinistro.
Inizia con HTML
La prima cosa che devi fare è avere un HTML con cui lavorare. Per il nostro esempio, scriveremo un paragrafo di testo e aggiungeremo un'immagine all'inizio del paragrafo (prima del testo, ma dopo l'apertura
etichetta). Ecco come appare questo markup HTML:
Il testo del paragrafo va qui. In questo esempio, abbiamo un'immagine di una foto headshot, quindi questo testo potrebbe riguardare la persona a cui è destinato l'headshot.
Per impostazione predefinita, la nostra pagina Web viene visualizzata con l'immagine sopra il testo, perché 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. Modificheremo questo aspetto predefinito passando al CSS. Innanzitutto, tuttavia, aggiungeremo un valore di classe al nostro elemento immagine. Quella classe agirà come un "gancio" che useremo nel nostro CSS più tardi.
Il testo del paragrafo va qui. In questo esempio, abbiamo un'immagine di una foto headshot, quindi questo testo potrebbe riguardare la persona a cui è destinato l'headshot.
Nota che questa classe di "sinistra" non fa nulla da sola. Per noi per raggiungere il nostro stile desiderato, abbiamo bisogno di usare il prossimo CSS.
Stili CSS
Con il nostro HTML in atto (incluso il nostro attributo di classe "left") possiamo ora passare ai CSS. Aggiungiamo una regola al nostro foglio di stile che farebbe galleggiare quell'immagine e aggiungere anche un po 'di padding accanto ad essa in modo che il testo che alla fine avvolgerà l'immagine non si scaglierà contro di esso troppo da vicino. Ecco il CSS che potresti scrivere:
.sinistra { fluttuare: a sinistra; riempimento: 0 20px 20px 0;}
Questo stile fa galleggiare l'immagine a sinistra e aggiunge un po 'di padding (usando alcune scorciatoie CSS) a destra e in basso dell'immagine. Se hai rivisto la pagina che contiene questo codice HTML in un browser, l'immagine verrebbe ora allineata a sinistra e il testo del paragrafo apparirà alla sua destra con una quantità appropriata di spaziatura tra i due. Nota che il valore della classe di "sinistra" che abbiamo usato è arbitrario. Potremmo chiamarlo qualsiasi cosa perché il termine "sinistra" non fa nulla da solo. Qualsiasi termine tu usi deve avere un attributo di classe nell'HTML che lavori con uno stile CSS reale che detta le modifiche visive che stai cercando di fare. Questo approccio nel dare all'elemento immagine un attributo di classe e quindi utilizzare uno stile generale di CSS che fa fluttuare l'elemento è solo un modo in cui è possibile ottenere questo aspetto di "immagine allineata a sinistra". Puoi anche togliere il valore di classe dall'immagine e modificarlo con CSS scrivendo un selettore più specifico. Ad esempio, diamo un'occhiata a un esempio in cui quell'immagine si trova all'interno di una divisione con un valore di classe "contenuto principale". Per modellare questa immagine, puoi scrivere questo CSS: .main-content img { fluttuare: a sinistra; riempimento: 0 20px 20px 0;}
In questo scenario, la nostra immagine sarebbe stata allineata a sinistra, con il testo fluttuante intorno come prima, ma non abbiamo bisogno di aggiungere un valore di classe extra al nostro markup. Fare questo su larga scala può aiutare a creare un file HTML più piccolo, che sarà più facile da gestire e può anche aiutare a migliorare le prestazioni. Infine, potresti anche aggiungere gli stili direttamente nel tuo markup HTML, in questo modo:
Questo metodo è chiamato "stili in linea". Non è consigliabile perché combina lo stile di un elemento con il suo markup strutturale. Le best practice del Web impongono che lo stile e la struttura di una pagina rimangano separati. Questa separazione è particolarmente utile quando la pagina deve cambiare il layout e cercare schermi e dispositivi con un sito Web reattivo. Avere lo stile della pagina intrecciato nell'HTML renderà molto più difficile l'authoring delle query multimediali che regoleranno l'aspetto del tuo sito secondo necessità per quelle schermate diverse. Modi alternativi per ottenere questi stili
Il testo del paragrafo va qui. In questo esempio, abbiamo un'immagine di una foto headshot, quindi questo testo potrebbe riguardare la persona a cui è destinato l'headshot. Evita stili in linea
Il testo del paragrafo va qui. In questo esempio, abbiamo un'immagine di una foto headshot, quindi questo testo potrebbe riguardare la persona a cui è destinato l'headshot.
