CSS – parte 2 Formattazione visual font –caratteri –tabelle Introduzione del box model

PRIMA PARTE: CARATTERI E TESTO Per i caratteri sono disponibili le seguenti proprietà: font-family: specifica il tipo di carattere font-size: specifica la dimensione del carattere font-style: per specificare il corsivo font-weight: per specificare il grassetto font-variant: per specificare il maiuscoletto font: per specificare contemporaneamente le precedenti proprietà

PRIMA PARTE: CARATTERI E TESTO FONT-FAMILY Attraverso font-family è possibile specificare diversi tipi di carattere: body { font-family:verdana,arial,sans-serif; } Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono: serif (ad esempio il Times) sans-serif (ad esempio il Verdana) monospace (ad esempio il Courier)

PRIMA PARTE: CARATTERI E TESTO FONT-SIZE Con font-size è possibile specificare la dimensione del carattere Possono essere utilizzate unità di lunghezza (sono consigliate quelle relative ad eccezione dei pixel) e unità percentuali È sconsigliato l’uso dell’unità px poiché con Internet Explorer per Windows il testo sarebbe non ridimensionabile Le unità relative e le percentuali si riferiscono alle dimensioni dell’elemento padre Usare le unità percentuali corrisponde ad utilizzare le unità em Internet Explorer ha un baco che sconsiglia l’uso delle unità em per body, poiché il ridimensionamento dei caratteri è eccessivo Possono inoltre essere utilizzati i valori visti nella diapositiva 45 (xx-small … xx-large, larger e smaller)

FONT-STILE, FONT-WEIGHT, FONT-VARIANT PRIMA PARTE: CARATTERI E TESTO FONT-STILE, FONT-WEIGHT, FONT-VARIANT Tramite font-style è possibile formattare il testo in corsivo. i valori ammessi sono: normal | italic Tramite font-weight è possibile formattare il testo in grassetto. i valori ammessi sono: normal | bold Sono ammessi altri valori ma sono scarsamente supportati dai programmi utente Tramite font-variant è possibile formattare il testo in maiuscoletto. i valori ammessi sono: normal | small-caps

PRIMA PARTE: CARATTERI E TESTO FONT Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente La sintassi ammessa è: font: <font-style> <font-variant> <font-weight> <font- size>/<line-height> <font-family> Non è necessario specificare tutte le proprietà Perché la dichiarazione sia valida è necessario specificare almeno <font-size> e <font-family> Assieme alla dimensione del testo è possibile specificare l’interlinea tramite <font-size>/<line-height> Esempio: h1 { font : bold 2em/1.5em georgia, serif }

ALLINEAMENTO DEL TESTO PRIMA PARTE: CARATTERI E TESTO ALLINEAMENTO DEL TESTO L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align Valori ammessi: left | right | center | justify L’indentazione è stabilita tramite text-indent Sono ammesse unità di lunghezza o unità percentuali Esempio: p { text-indent: 2em }

PRIMA PARTE: CARATTERI E TESTO DECORAZIONE DEL TESTO Il testo può essere decorato con sottolineature (da usarsi essenzialmente con i link), sopralineature (da evitare), testo barrato (essenzialmente per il tag <del>) Eventuali decorazioni vanno specificate tramite la proprietà text-decoration I valori ammessi sono: none | underline | overline | line-through

SPAZIATURA FRA PAROLE E CARATTERI PRIMA PARTE: CARATTERI E TESTO SPAZIATURA FRA PAROLE E CARATTERI Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietà letter-spacing e word-spacing Sono ammesse tutte le diverse unità di lunghezza, tuttavia sono particolarmente indicate le unità em Il valore specificato può essere positivo o negativo Il valore specificato non indica la distanza fra le varie lettere o parole ma va a sommarsi alla distanza predefinita Esempio h1{ letter-spacing:0.2em;word-spacing:0.5em }

TRASFORMAZIONI DEL CARATTERE PRIMA PARTE: CARATTERI E TESTO TRASFORMAZIONI DEL CARATTERE Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice Sono ammessi i seguenti valori: capitalize: la prima lettera di ogni parola è rappresentata in maiuscolo uppercase: tutte le lettere di ogni parola sono rappresentate in maiuscolo lowercase: tutte le lettere di ogni parola sono rappresentate in minuscolo none: nessuna variazione Esempio: h1 { font-variant: uppercase } h2 { font-variant: capitalize }

FORMATTAZIONE DELLE TABELLE PRIMA PARTE: FORMATTAZIONE DELLE TABELLE FORMATTAZIONE DELLE TABELLE Attraverso i CSS è possibile formattare efficacemente le tabelle I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà CSS: cellpadding  padding cellspacing  border-spacing border  border width  width È bene specificare la dimensione del testo per le tabelle (ad esempio table{font-size:1em}) poiché Internet Explorer tende a ignorare le impostazioni scelte per <body>

PRIMA PARTE: FORMATTAZIONE DELLE TABELLE BORDER-COLLAPSE I bordi della tabella e delle singole celle sono specificati separatamente: table { border:3px solid #900; } td,th { border:1px solid #900; } Automaticamente, il browser lascia dello spazio fra i bordi delle singole celle Per eliminare tale spazio si utilizza la proprietà border- collapse I valori ammessi sono: collapse | separate Quando i bordi sono separati, può essere utile non mostrare le celle vuote: table { empty-cells: hide; }

PRIMA PARTE: FORMATTAZIONE DELLE TABELLE RIGHE E COLONNE Specificando opportunamente i bordi è possibile ottenere una griglia solo orizzontale o solo verticale In tutti e due i casi è necessario impostare i bordi in modo che collassino table { border-collapse: collapse; } Griglia orizzontale td,th { border:1px #900; border-style: solid none; Griglia verticale td,th { border:1px solid #900; } td{ border-style: none solid; }

PRIMA PARTE: FORMATTAZIONE DELLE TABELLE INTESTAZIONE E RIGHE L’intestazione della tabella, identificabile tramite il tag <thead> può essere formattata indipendentemente dal resto della tabella: thead { background:#ffc; color:#000; text-align:center; font-weight:bold; text-transform:uppercase; } Attraverso le classi è possibile evidenziare meglio le diverse righe alternandone il colore di sfondo tr.d {background:#eee;color:#000} tr.p {background:#fff;color:#000} <table summary="..."> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> </tbody> </table>

PRIMA PARTE: FORMATTAZIONE DELLE TABELLE SPAZIO FRA CELLE Lo spazio fra le celle può essere specificato attraverso la proprietà border-spacing La proprietà border-spacing ha effetto quando i bordi delle singole celle non collassano La proprietà border-spacing ammette come valori solo delle lunghezze: table { border-spacing:20px; } La proprietà border-spacing non è supportata da Internet Explorer

FORMATTARE LE LISTE DI LINK  MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU FORMATTARE LE LISTE DI LINK  MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti: <ul> <li><a href="…">Collegamento 1</a></li> <li><a href="…">Collegamento 2</a></li> <li><a href="…">Collegamento 3</a></li> <li><a href="…">Collegamento 4</a></li> <li><a href="…">Collegamento 5</a></li> </ul> Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu realizzato in questo modo

FORMATTARE LE LISTE DI LINK  MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU FORMATTARE LE LISTE DI LINK  MENU Per ottenere un menu verticale dall’aspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione “a lista” ul { margin:0; padding:0; } li { display:inline; }

FORMATTARE LE LISTE DI LINK  MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU FORMATTARE LE LISTE DI LINK  MENU Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link, a:visited, a:hover, a:active per creare effetti roll-over senza utilizzare il javascript, con ovvi vantaggi Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi

a:pseudoclasses a:link viene usato per elaborare lo stile di un link non ancora visitato a:active colore del link all’atto del click. a:visited colore del link dopo averlo visitato A:active dovrebbero venire dopo gli a:hover (se presente) nella definizione CSS in modo da essere efficace!

Ricalcare la grgilia di impaginazione TAG <div> e CSS Ricalcare la grgilia di impaginazione

UNA STRUTTURA PER I CONTENUTI PRIMA PARTE: XHTML UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi Per raggruppare elementi da trattare come un oggetto unico, l’elemento chiave è il tag <div> Il tag <div> è un contenitore generico.

Modello visuale di CSS – Box Model La visualizzazione di un documento con CSS avviene identificando lo spazio di visualizzazione di ciascun elemento del documento. Il flusso di dati è sempre dall’alto verso il basso Ogni elemento è definito da una scatola all'interno del quale sta il contenuto. Le scatole sono in relazione alle altre come segue: Le scatole degli elementi contenuti stanno dentro alla scatole dell'elemento genitore. Flusso normale di tipo blocco: le scatole sono poste l'una sopra l'altra in successione verticale (come paragrafi). L’elemento che contiene le varie scatole, assume la dimensione massima data dalla somma delle dimenzioni degli elementi in esso contentui La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono.

Modello visuale di CSS – Box Model Flusso normale di tipo inline: le scatole sono poste l'una accanto all'altra in successione orizzontale (come parole della stessa riga) Gli elementi stanno tutti uno accanto all’altro su una linea orizontale. La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. Si utilizza molto per orientare le voci di un menu, realizzato con una lista non odinata ( <ul> e rispettivi <li>) Di solito, per un menu orizzontale, si dichiara una lista non ordinata Si dichiarano le voci di menu (“home”, “chi siamo”, “dove”, “contatti”) come dei list item. Si associa ad un elemento li e ul il rispettivo selettore con la property display:inline; li a { color: white; display:inline; padding:10px; font-weight: bold; height: 40px; line-height: 50px; text-decoration: none; }

Modello visuale di CSS – Box Model Flusso di tipo float: le scatole sono poste all'interno del contenitore e poi spostate all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno. La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. Dichiarando un elemento come “float”, è come se lo si staccasse dal normale flusso di lettura dei blocchi dall’alto verso il basso e lo si stesse posizionando sulla destra o sulla sinistra del foglio.

Modello visuale di CSS –Box model Alcune proprietà controllano il tipo di posizionamento e di scatola: DISPLAY (inline | block | … | none): il tipo di scatola da utilizzare per l'elemento: un blocco, un inline, una lista, una cella di tabella, ecc. POSITION (relative): il posizionamento rispetto al flusso del documento. FLOAT (left | right | none): un float è una scatola scivolata all'estrema destra o sinistra del contenitore muovendo le altre per farle posto. TOP, BOTTOM, LEFT, RIGHT: coordinate della scatola WIDTH, HEIGHT: dimensioni A seguire: Un esempio di posizionamento (1) 20/35

Un esempio di posizionamento (1) A seguire: Un esempio di posizionamento (2) 21/35

IL BOX MODEL Ogni box è caratterizzato da PRIMA PARTE: IL BOX MODEL IL BOX MODEL Ogni box è caratterizzato da Larghezza dello spazio per i contenuti (width) Altezza dello spazio per i contenuti (height) Spazio fra contenuti e bordi (padding) Bordo (border) Spazio fra il bordo e gli altri oggetti della pagina (margin)

PRIMA PARTE: IL BOX MODEL <div>Ex nostrum … </div> <div>Indoctum … </div> body { margin: 0; padding: 0; } div { width:300px; padding:10px; border:5px solid #600; margin: 20px; Si noti che i margini superiori e inferiori adiacenti collassano

PRIMA PARTE: IL BOX MODEL Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width.

PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA Se non si specifica la larghezza (width) dei contenuti del box, questo si allargherà (margini compresi) per riempire tutto lo spazio a sua disposizione Se non si specifica la altezza (height) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno La larghezza e la altezza del box possono essere espresse: In percentuali rispetto alle dimensioni del box contenitore Tramite le unità di miusra em, px, (ex, pt, mm) Tramite il valore auto

PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max- width, ma Internet Explorer (Win/Mac) non supporta tali proprietà

PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA Quando si specifica l’altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio Per ottenere un simile comportamento esiste infatti la proprietà min- height, ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height