Lezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML

Transcript

1 Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML CSS - Il box model 7.1 Cos'è un box Per box si intende un qualsiasi elemento di testo o una tabella (X)HTML ed il box model è l'insieme di elementi che provvedono alla loro gestione e stilizzazione. Proseguendo con la lettura del capitolo corrente impareremo quanto c'è da sapere sul box model. 7.2 Gestione degli spazi e dei margini Nel capitolo precedente abbiamo esaminato le differenze tra i tag di testo e ci siamo dati appuntamento a questa sede per capire come effettuare la gestione dei margini esterni di un qualsiasi box. I CSS mettono a disposizione l'attributo margin per la gestione della spaziatura esterna di un box il cui funzionamento è descritto nel seguente esempio: margin: 0px 0px 0px 0px; La sequenza di valori espressi per questo attributo va in senso orario e parte dall'alto; a livello sintattico la sintassi è dunque la seguente: margin: top right bottom left; E' possibile gestire anche i singoli margini: margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; Il padding è invece la spaziatura interna di un box ed il suo funzionamento sintattico è identico a quello di margin. Quindi: padding: 0px 0px 0px 0px;

2 oppure: padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; Gli elementi di testo hanno per default il padding impostato a zero mentre le celle di una tabella, per default, hanno una spaziatura interna di alcuni pixel che si può gestire con gli attributi esaminati in questo paragrafo. Consiglio l'utilizzo di classi ed ID per la costruzione di layout con tabelle, dato che le esigenze di margini e spaziature possono variare da cella a cella (header, menu, footer, etc...). 7.3 Gestione dei bordi I bordi di un box vengono gestiti con l'attributo di base border che, in termini di numero di tag a disposizione, è il più ricco della famiglia dei CSS. Vediamone tutte le caratteristiche: 1. border - permette di impostare diverse proprietà dei bordi di un elemento che fa parte del modello box; 2. border-bottom - imposta lo stile del bordo inferiore di un box; 3. border-bottom-color - imposta il colore del bordo inferiore di un box; 4. border-bottom-style - imposta lo stile del bordo inferiore di un box; 5. border-bottom-width - imposta la larghezza del un bordo inferiore di un box; 6. border-color - imposta il colore del bordo di un box; 7. border-left - imposta lo stile del bordo sinistro di un box; 8. border-left-color - imposta il colore del bordo sinistro di un box; 9. border-left-style - imposta lo stile del bordo sinistro di un box; 10. border-left-width - imposta la larghezza del bordo sinistro di un box; 11. border-right - Impostalo stile del bordo destro di un box; 12. border-right-color - imposta il colore del bordo destro di un box; 13. border-right-style - imposta lo stile del bordo destro di un box; 14. border-right-width - imposta il colore del bordo destro di un box; 15. border-style - imposta lo stile del bordo di un box; 16. border-top - imposta lo stile del bordo superiore di un box; 17. border-top-color - imposta il colore del bordo superiore di un box; 18. border-top-style - imposta lo stile del bordo superiore di un box; 19. border-top-width - imposta la larghezza del bordo superiore di un box; 20. border-width - imposta la larghezza del bordo di un box. In generale consiglio l'utilizzo dei soli attributi recensiti ai numeri 1, 2, 7, 11, 16 utilizzando la seguente sequenza: border: tipo dimensione colore; Un esempio pratico:

3 td.menu border: solid 1 px #000000; oppure caso per caso: td.menu border-top: solid 1 px #000000; border-right: solid 1 px #000000; border-bottom: solid 1 px #000000; border-left: solid 1 px #000000; Segue l'elenco dei possibili tipi di bordo: none - non assegna alcun bordo; dotted - assegna un bordo tratteggiato a puntini; dashed - assegna un bordo tratteggiato a linee; double - assegna un bordo a doppia taratura; groove - assegna un bordo rientrato verso destra ed il basso; ridge - assegna il bordo di default dell'(x)html; inset - assegna un bordo rientrato ad effetto bottone in pressione; outset - assegna un bordo tridimensionale ad effetto bottone non in pressione; solid - assegna un bordo lineare normale. Oltre all'attributo border esiste anche l'attributo outline, introdotto con i CSS2, che consente di creare un bordo esterno ad un elemento, rispetto al bordo gestito con border. Un primo esempio chiarirà le idee: div border: solid 1px #000000; outline: solid 1px #FF0000; Al box verrà impostato un bordo interno nero di un pixel ed un bordo esterno rosso di un pixel. Vediamone tutte le caratteristiche: outline - come specificato nel precedente esempio, contiene l'elenco delle caratteristiche del bordo; outline-color - specifica il colore del bordo; outline-style - specifica lo stile del bordo (i cui possibili tipi sono gli stessi utilizzati per border); outline-width - specifica le dimensioni del bordo; i possibili valori sono thin, medium, thick, inherit oppure una grandezza espressa in pixel. NOTA - Questo elemento funziona con tutti i browser, ma con IE funziona solo dalla versione 8 ed è necessario specificare la!doctype dell'(x)html. 7.4 Posizionamento, visualizzazione e dimensionamento degli elementi La potenza dei CSS è espressa anche nel fatto che gli elementi possono essere posizionati a prescindere dalla propedeuticità degli altri elementi della pagina e possono essere anche nascostie visualizzati a piacimento, unendo ai CSS della programmazione Javascript, la cui accoppuata viene chiamata DHTML

4 ovvero HTML dinamico; in questo modo è possibile creare menu animati ed elementi in movimento sulla pagina, ma questa è un'altra storia... raccontata nel corso Javascript e DHTML di questo sito! Toriamo a noi. Segue un elenco di tutti gli attributi CSS categorizzati in questo ambito: clear - permette di posizionare un elemento... clip - imposta la forma di un elemento, in genere di una mappa d'immagine; display - mostra o nasconde un elemento; float - permette di posizionare un elemento... height - imposta l'altezza di un elemento; left - imposta il posizionamento assoluto di un elemento dal margine sinistro del browser; position - imposta il posizionamento assoluto o relativo di un elemento; top - imposta il posizionamento assoluto di un elemento dal margine superiore del browser; visibility - mostra o nasconde un elemento; width - imposta la larghezza di un elemento; z-index - permette di sovrapporre elementi. Le generiche descrizioni degli attributi clear e float saranno approfondite nel nono capitolo quando parleremo di creazione di un layout table-less. Iniziamo dall'attributo clip con un esempio; immaginiamo di avere un'immagine quadrata di 500 pixel e di volerne mostrare solo parte; utilizzeremo il seguente codice: #SOLO_200_PX clip: rect(0px 200px 200px 0px); Andiamo in questo modo a mostrare solo 200 pixel in orizzontale ed in verticale dell'immagine di cui segue il codice XHTML: <img src="immagine-500x500.jpg" alt="mia foto" id="solo_200_px" /> Parliamo adesso di visualizzazione, quindi degli attributi display e visibility la cui differenza è che, nascondendo un elemento, col primo l'elemento non sarà interpretato e quindi non occuperà spazio nella pagina, mentre col secondo l'elemento sarà nascosto ma presente agli "occhi" del browser, quindi occuperà uno spazio, sia pur apparentemente vuoto. Nascondiamo e visualizziamo un elemento con display: #NASCOSTO display: none; #VISIBILE display: block; Nascondiamo e visualizziamo adesso lo stesso elemento con visibility: #NASCOSTO

5 visibility: hidden; #VISIBILE visibility: visible; Parliamo adesso di posizionamento e sovrapposizione di due elementi con un esempio pratico che servirà a chiarire le idee sui comportamenti dei tag che andremo ad esaminare, pur lasciando al lettore il compito di implementarli nelle proprie e più svariate casistiche di esigenze: #ELEM_ROSSO background: #FF0000; position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; z-index: -1; #ELEM_GIALLO background: #FFFF00; position: absolute; top: 150px; left: 150px; width: 200px; height: 200px; z-index: 1; Prego di notare le differenze nei due codici. Utilizziamo adesso i seguenti box: <div id="elem_rosso"></div> <div id="elem_giallo"></div> Testare l'esempio per verificarne il funzionamento. MRW Corsi IKIweb Internet Media SRL