Le immagini
Le immagini inserite con HTML sono posizionate, di base, alla sinistra del foglio. Con CSS diviene possibile non solo spostarle, ma anche personalizzarle con bordi o fare in modo che si adattino allo schermo su cui sono rappresentate. Inoltre, è possibile applicare degli effetti sulle immagini.
Bordo
Si può modificare il bordo dell'immagine per ottenere diversi effetti. Per esempio, si possono ottenere delle immagini con cornice
<img src="../images/yuki.jpg" width="150px" height="250px" style="border: 1px solid black; padding: 5px" />
Oppure si può rendere l'immagine più tonda
La proprietà float
La posizione di un'immagine rispetto al testo può essere modificata con float. float consente di far “fluttuare” l'immagine alla destra o alla sinistra di un testo. Può assumere tre valori principali: left, right e none.
Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna
Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna
Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at enim aliquam, faucibus purus et, gravida turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim velit magna, non placerat nisl commodo quis. Donec id malesuada neque, vel efficitur magna
Sia in left che in right, è stato aggiunto un margine per staccare l'immagine dal testo. “none”, invece, è il valore di default. Questi attributi non funzionano solo con le immagini, ma anche con altri tag HTML, tipo <div>.
Per centrare un'immagine, si usa la proprietà display in associazione con margin-left e margin-right impostate su automatico
<img src="../images/yuki.jpg" width="150px" height="250px" style="display:block; margin-left:auto; margin-right:auto;" />
La proprietà display
In HTML esistono gli elementi cosiddetti “inline” e gli elementi “blocco”. Quello che distingue l'uno dall'altro è il modo in cui sono visualizzati.
Gli elementi inline, infatti, non interrompono il testo in cui sono inseriti. Un esempio è l'elemento <span> che può essere utilizzato per colorare una parte del testo. Altri esempi comprendono gli elementi <b> (o <strong>) e <i> per grassetto e italico rispettivamente, <a> per i link e <img>.
Gli elementi block, invece, lasciano una riga bianca prima e dopo il loro inserimento. Inoltre, occupano tutta la larghezza della riga su cui sono posti, interrompendo, di fatto, il flusso del testo. Degli esempi possono essere i <div>, i <p>, <header>, <footer> e <figure>.
Grazie alla proprietà display, è possibile modificare la modalità standard con cui ogni elemento è mostrato. Essa può assumere diversi valori, tra cui:
- inline: visualizza un elemento con lo stile inline;
- block: visualizza un elemento con lo stile block;
- flex: rende l'elemento un elemento blocco ed in particolare un flex container;
- list-item: visualizza un elemento come è mostrato un
<li>nelle liste; - table: rende l'elemento come una tabella;
- none: rimuove l'elemento dalla pagina senza lasciare traccia. Al contrario, la proprietà
- visibility impostata su hidden non mostra l'elemento direttamente, ma lascia uno spazio bianco grande come l'elemento.
Esempio: mostrare gli elementi di un elenco come inline:
- Acqua
- Uova
- Farina
<ul>
<li style="display:inline">Acqua</li>
<li style="display:inline">Uova</li>
<li style="display:inline">Farina</li>
</ul>
Dimensioni adattive
Per adattare le dimensioni allo schermo, o comunque alla finestra del browser se non si trova a schermo intero, si può impostare una larghezza al 100% e un'altezza su automatico, in modo che il browser modifichi l'altezza dell'immagine rendendola più piccola se la finestra del browser è ristretta: