Home Stampante Corso HTML e Css

Lezione_6 - Proprietà Display.

Sulla visualizzazione degli elementi. Valori di default della proprietà display.

Introduzione

La funzione fondamentamentale di CSS è quella di rappresentare gli elementi di un un documento html o xml su un supporto di restituzione che può essere il display di un dispositivo, un foglio di carta, o un flusso audio o video.

Nella Lezione_1 abbiamo visto come un documento html sia formato da "elementi" organizzati in una struttura ad albero. Nella Lezione_2 abbiamo visto come per ogni elemento visualizzabile CSS definisca un box destinato ai contenuti corredato da padding, border e margin.

Il modulo di CSS denominato CSS Display Module si occupa della formattazione dei box a secondo del tipo di dato CSS a cui appartengono, applicando le proprietà di visualizzazione, nel rispetto delle regole di cascata e di ereditarietà.

La proprietà fondamentale di visualizzazione è la proprietà display. Un appropriato valore della proprietà display è assegnato ad ogni elemento.

Valori di default per gli elementi di uso comune.

La proprietà display governa il modo in cui i box dei diversi elementi occupano lo spazio all'interno del proprio container.

La property display può assumere diversi valori. Ecco i valori di default per gli elementi più comunemente usati:

Le sezioni che descrivono i tipo di box e i relativi comportamenti nel modello visuale sono, a mio parere, le parti della specifica più difficili da leggere e da comprendere, in quanto trattano in profondità aspetti che riguardano più l'implementatore degli User Agent che l'utilizzatore del linguaggio. Inoltre la sintassi di CSS permette di assegnare valori a property, che se usate in modo inappropriato al contesto di formattazione possono determinare effetti visuali indesiderati.

Esempi di elementi con display:block;.

Per evidenziare l'aspetto degli elementi di tipo block assegno agli elementi rappresentati a destra un colore di background ed un bordo.

Elemento h3.

Paragrafo.

Paragrafo un po più lungo del precedente. Si estende su due linee. Segue un elemento ul.

Esempi di elementi con display:inline;.

Per evidenziare l'aspetto degli elementi di tipo inline assegno agli elementi rappresentati a destra un colore di background ed un bordo.

.

.

.

Esempi di elemementi con proprietà di stile display:inline

L'elemento mark serve ad evidenziare una porzione di testo.

Ecco l'icona che precede il nome delle pagine del mio sito favicon.ico. Non è un granchè, vero? La rappresentazione delle immagini può presentare diversi problemi, ma vedremo in una lezione dedicata come affrontare al meglio questo problema.

Ed ecco cosa succede se modifico in block la proprietà display di img.favicon.ico. Non sembra meglio di prima. Laprossima lezione ci darà qualche informazione in più su come disporre i nostri contenuti.

Esempi di elementi con display:inline-block;.

Questi elementi servono per fornire input e output ad applicazioni. Per il momento cercheremo solo di evidenziarne l'aspetto.

Gli elementi display-block si comportano come gli elementi inline ma, a differenza di questi, accettano le proprietà di stile width e height

Tutti gli elementi inline-block, qui presentati, sono impiegati in una form. I dati inseriti sono validati da JavaScript e inviati ad un server per successive elaborazioni. Questi argomenti saranno trattati nei corsi JavaScript e PHP.

Esempi di elemementi con proprietà di stile display:inline-block

Ecco l'aspetto di default di un elemento di tipo button. . Non succede nulla perchè al momento non è associato alcuno script alla pressione del pulsante.

Inserci qui la tua richiesta:

Inserisci qui il CAP del tuo comune di residenza:

Scegli quale sport preferisci fra questi:

Un esempio di tabella.

Le tabelle sono strutture che possono contenere diversi tipi di elemento per ognuno dei quali sono prevesti particolari valori della propieta display.

L'argomento "tabelle" è particolarmente inportante nel caso si vogliano realizzare applicazioni di data base o comunque applicazioni che elaborino dati complessi. Per questa ragione, sulla formattazione delle tabelle è prevista una specifica lezione.

.

.

.

Esempio di tabella.

Giorni della settimana. Questa tabella mostra il nome dei giorni della settimana in diverse lingue.

LinguaFerialiFestivi
Giorno 1Giorno 2Giorno 3Giorno 4Giorno 5Giorno 6Giorno 7
Italianolunedìmartedìmercoledìgiovedìvenerdìsabatodomenica
IngleseMondayTuesdayWednesdayThursdayFridaySaturdaySunday
Spagnololunesmartesmièrcolejuevesviernessàbadodomingo
Franceselundimardimercredijuedivendredisamedidimanche

Le proprietà width e height in relazione con la proprità display.

La proprietà width e heigthdeterminano rispettivamente le dimensioni orizzontale e verticale della content area dei un box di tipo block e di tipo inline-block.

L'elemento img che per default è di tipo inline si comporta in maniera particolare in quanto risponde alla property width e height

Esempi

Un paragrafo con le dimensioni di default.

Un paragrafo con width:50%;

Un paragrafo con width:30%; e height:2em

Seguono due elementi img riferiti alla stessa immagine ma a cui sono stati applicati due diversi valori alla property widht:

favicon.ico favicon.ico

Esercizi.

Gli esercizi servono solo a dare un'idea di cosa succede contravvenendo alla raccomandazione della lezione di non modificarli.

Per prima cosa scarica il file HTML_06.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_06 e apri in Notepad++ i file HTML_06.html e HTML_06.css.

Esegui gli esercizi proposti.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.

Per approfondire.

Nelle specifiche ufficiali del w3 consortium puoi consultare:

Nel sito developer mozilla puoi consultare: