Quando crei pagine Web per la tua azienda utilizzando un semplice codice HTML e CSS, puoi utilizzare CSS per definire e formattare “divisioni” specifiche nei tuoi contenuti, definite nel codice HTML, che ti consentono di formattare testo e immagini in questo modo che si “avvolgono” o si conformano l’uno all’altro. In altre parole, parti del contenuto possono adattarsi ad altre sezioni, disposte in modo tale che immagini e testo possano adattarsi insieme come colonne, griglie o qualsiasi altro allineamento specificato.
HTML e CSS
Sebbene l’HTML presenti un meta-linguaggio con tag che definisce l’aspetto di una pagina Web all’interno di un browser Web, il vero potere del Web design arriva quando si combina HTML con fogli di stile a cascata. CSS definisce i comportamenti per gli elementi incorporati nei file HTML, creando un layout universale per la pagina. Più documenti HTML possono fare riferimento alla stessa pagina CSS, il che significa che puoi applicare un aspetto regolare a tutte le tue pagine.
Divisioni HTML e Floating
CSS funziona con l’HTML definendo il comportamento dei tag HTML. In particolare, i CSS si avvantaggiano dei tag “”. Questi tag di divisione circondano una parte del documento e lo identificano come un’unità di informazione discreta che dovrebbe avere lo stesso stile dappertutto. Queste divisioni funzionano anche come una sorta di “riquadri”, in quanto tramite CSS è possibile fare in modo che sezioni di contenuto cambino colore, cambino dimensione o “fluttuino” su uno specifico confine di pagina in modo che il ridimensionamento della pagina non rovini il layout.
Fluttuante in CSS e HTML
Per utilizzare l’attributo “float”, crei una divisione nel tuo contenuto o fai riferimento a un’immagine. Nel tuo documento CSS, fai quindi riferimento a quel div o all’immagine per nome e gli dai un attributo float. Il seguente esempio di codice mostra come eseguire questa operazione con un foglio di stile interno. Tieni presente che la divisione nell’HTML, denominata “sezione1”, ha una larghezza di 100 pixel. Tutte le divisioni che utilizzano float richiedono una larghezza specificata. Le immagini hanno già una larghezza implicita:
.section1 {float = right; larghezza = 100 px; }
Ecco alcuni contenuti all’interno di una divisione
Cancella, margini e spaziatura interna
Oltre alle basi dell’utilizzo dell’attributo float, puoi anche impiegare altri elementi, come gli attributi clear, margin e padding. L’attributo clear garantisce che nessun altro contenuto appaia sulla stessa riga dell’elemento floating. I margini controllano lo spazio intorno agli spazi sinistro e inferiore della divisione. Il riempimento controlla lo spazio interno nella divisione tra il contenuto e i bordi della divisione. Questi tre elementi insieme possono creare divisioni pulite “a forma di scatola” che consentono o non consentono al testo e ad altre immagini di avvolgersi attorno a loro.