CSS – ripresa parte 1 Tipi di selettore – selettori di tipo / selettori basati su ID / classi

PRIMA PARTE: I SELETTORI TIPI DI SELETTORI I selettori più generici sono i selettori di tipo (o di tag) i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato. Ad esempio, sono selettori di tipo: p {…} a {…} div {…} strong {…} * {…}

PRIMA PARTE: I SELETTORI IDENTIFICATORI Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id: <div id="testata"><h1>Titolo</h1><p>Testo ...</p></div> ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina. Il selettore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘#’ #testata {…} Il selettore può anche specificare a quale elemento l’identificatore deve essere associato: p#testata {…} h1#testata {…} Classi e identificatori possono essere usati contemporaneamente: <div id="idval" class="classval"> #idval.classval {…}

Ma se volessi applicare le stesse caratteristiche a piu oggetti della pagina, definendoli una sola volta?

PRIMA PARTE: I SELETTORI LE CLASSI Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class: <div class="notizia"><h1>Titolo</h1><p>Testo …</p></div> <div class="notizia altraClasse"><h1>Titolo</h1><p>Testo …</p></div> Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto ‘.’ .notizia {…} È possibile combinare fra loro più classi: <div class="classe1 classe2">…</div> .classe1.classe2 {…} Il selettore può anche specificare a quale elemento la classe deve essere associata: p.classe {…} h1.classe {…}

RIASSUMENDO Selettori di tipo: corrispondenza diretta fra tag e selettore. Permettono di definire lo stile di tutti i tag presenti nelle pagine html di uno specifico tipo Selettori basati su ID: permettono di definire lo stile di uno e un solo specifico oggetto HTML che ha un ID univoco Selettori basati su classi: permettono di definire lo stile di piu oggetti HTML a cui una classe viene associata

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.

una pagina HTML non è altro che un insieme di box rettangolari e che il flusso dell’informazione è sempre verticale. Gli elementi si dispongono sempre uno sotto l’altro. Ma perche? Come sono fatti questi elementi? Come forzare la disposizione orizzontale?

H1 <p> h2 <div>

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;

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 px 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 È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max- width

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,. Esiste anche la proprietà max-height Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height

LARGHEZZA E ALTEZZA 20+20+5+5+250= 300 px TOTALI PRIMA PARTE: IL BOX MODEL LARGHEZZA E ALTEZZA Nel computo dell’ingombro totale di un box, si deve tenere conto dei padding e del bordo. Quindi se un box deve occupare 300px e ha 20 px di padding destro e 20 px di padding sinistro e un bordo di 5 px per lato, dichiareremo Padding-left: 20px Padding-right: 20px margin.-left: 5px Margin-right: 5px Width: 250px 20+20+5+5+250= 300 px TOTALI

I MARGINI I margini possono essere specificati: Individualmente PRIMA PARTE: IL BOX MODEL I MARGINI I margini possono essere specificati: Individualmente A coppie (top/bottom, right/left) Globalmente Le unità di misura sono le stesse utilizzate per width e height ed hanno il medesimo comportamento, tranne auto Per specificare i singoli margini è possibile utilizzare le proprietà margin- top, margin-right, margin-bottom, margin-left Esempio: div { margin-left:10px; margin-top:20px }

PRIMA PARTE: IL BOX MODEL I MARGINI I quattro margini possono essere specificati anche attraverso la sintassi abbreviata: div { margin : 10px 5px 0 20px } I margini risultano specificati in senso orario: top, right, bottom, left. Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top/bottom e right/left: #id { margin : 10px 20px} Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: .classe { margin: 10px }

PRIMA PARTE: IL BOX MODEL I MARGINI Quando impostati sul valore auto, i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati Purtroppo Internet Explorer non supporta questo tipo di centratura orizzontale, per cui richiede una tecnica differente Quando impostati sul valore auto, i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente Nelle specifiche CSS non è prevista la centratura verticale dei blocchi La centratura ha significato solo se il box ha una larghezza specificata I margini superiore e inferiore dei paragrafi sono generalmente pari a 1em, i div hanno margine nullo

PRIMA PARTE: IL BOX MODEL I MARGINI Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine: <div id="box-1">…</div> <div id="box-2">…</div> #box-1 { margin: 10px } #box-2 { margin: 20px } Vedremo più avanti il significato di box flottante e box posizionato

PRIMA PARTE: IL BOX MODEL I MARGINI I margini non collassano quando sono separati da un bordo o dal padding: <p>Lorem ipsum dolor …</p> <div><p>Quisque imperdiet …</p></div> div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:10px;} Vedremo più avanti il significato di box flottante e box posizionato I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

PRIMA PARTE: IL BOX MODEL IL PADDING Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box Per specificare il padding si utilizza la stessa sintassi usata per i margini p {padding-left:0.5em; padding-right:0.5em} div { padding: 10px 20px 10px 20px } .classe { padding: 5px 0 } #id { padding: 5% } A differenza di margin, padding non ammette il valore auto e non ammette valori negativi Il padding di box adiacenti non collassa in nessun caso

I BORDI I bordi sono caratterizzati da tre aspetti: stile spessore PRIMA PARTE: IL BOX MODEL I BORDI I bordi sono caratterizzati da tre aspetti: stile spessore colore Questi aspetti possono essere definiti separatamente con: border-style (border-top-style, …) border-width (border-top-width, …) border-color (border-top-color, …) Sono ammesse le dichiarazioni compatte per i quattro lati (border-style: <stile> <stile> <stile> <stile>) Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border-top: <spessore> <stile> <colore> border: <spessore> <stile> <colore> Si consideri la sovrapposizione degli effetti per cui è possibile definire alcuni aspetti globalmente e altri in modo specifico

I BORDI Gli stili a disposizione sono : PRIMA PARTE: IL BOX MODEL I BORDI Gli stili a disposizione sono : solid (linea continua singola); dotted (punteggiato); dashed (tratteggiato); double (doppia linea continua – è necessario uno spessore di almeno 3px per ottenere l’effetto desiderato); groove (scavato); ridge (effetto opposto a groove, il bordo appare sbalzato); inset (incastonato, l’effetto grafico equivale a un pulsante premuto); outset (effetto opposto a inset, l’effetto grafico equivale a un pulsante non ancora premuto). none (nessun bordo, valore predefinito);

PRIMA PARTE: IL BOX MODEL I BORDI Lo stile predefinito è none, dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato Lo spessore del bordo può essere espresso attraverso le varie unità di lunghezza o attraverso i tre valori thin, medium, thick, le unità percentuali non sono ammesse Il colore, se non specificato, corrisponde a quello del testo usato nel box IE/Win non supporta bordi punteggiati da 1px

PRIMA PARTE: IL BOX MODEL OVERFLOW Come detto, è possibile specificare la larghezza e l’altezza di un box Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow. La proprietà overflow può assumere i seguenti valori: visible (valore predefinito) hidden scroll auto

PRIMA PARTE: IL BOX MODEL OVERFLOW: VISIBLE Il valore visible indica che i contenuti vanno mostrati normalmente. I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore Internet Explorer per Windows espande il contenitore fino alla dimensione richiesta dai contenuti div { width:200px;height:200px; overflow:visible; }

PRIMA PARTE: IL BOX MODEL OVERFLOW: HIDDEN Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento div { width:200px;height:200px; overflow:hidden; }

OVERFLOW: SCROLL E AUTO PRIMA PARTE: IL BOX MODEL OVERFLOW: SCROLL E AUTO Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono comunque apparire. Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono apparire dove necessario. La dimensione del contenitore non è alterata

Css Box model element Margini: la regione che separa una scatola dall'altra, necessariamente trasparente. margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine della scatola. Border: la regione ove visualizzare un bordo per la scatola. border-top, border-bottom, border-left, border-right, border-width, border- color: dimensioni ed aspetto del bordo. border-style: può assumere come valori none, dotted, dashed, solid, double, groove, ridge, inset, outset. Padding: la regione di respiro tra il bordo della scatola ed il contenuto. Ha il colore dello sfondo. padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding della scatola. Content: la regione dove sta il contenuto dell'elemento. background-color, background-image, background-repeat, background- attachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo della scatola. A seguire: Il testo 24/35

Forme abbreviate In molti casi è possibile riassumere in un'unica proprietà i valori di molte proprietà logicamente connesse. Si usa una sequenza separata da spazi di valori, secondo un ordine prestabilito. Se si mette un valore solo esso viene assunto da tutte le proprietà individuali. Ad esempio: margin per margin-top, margin-left, margin-bottom, margin-right border per border-top, border-left, border-bottom, border-right padding per padding-top, padding-left, padding-bottom, padding-right font per font-style, font-variant, font-weight, font-size, line-height, font-family P { font: bold italic large Palatino, serif } BODY { padding: 5px; } BODY { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } BODY { margin: 10 0 0 10; } BODY { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; }

Display: block– 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.

Elementi block-level Un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri elementi inline. Ad un elemento block-level si possono attribuire delle dimensioni. Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto. Gli elementi di tipo blocco hanno la proprietà display con valore block. Sono, ad esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, …), il tag div. Questi elementi, quando specificate, assumono le dimensioni impostate nel CSS e, non accettano altri oggetti sulla stessa riga ma mantengono il flusso verticale.

Display: inline– 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; }

Elementi inline-level Elementi inline adiacenti vengono disposti orizzontalmente, mentre gli elementi blocco vengono disposti verticalmente. Un elemento inline occuperà sia in orizzontale che in verticale l’altezza necessaria al suo contenuto Solitamente agli elementi inline non è possibile attribuire una dimensione con i classici width ed height Display:inline si utilizza di solito su tag <li> per voci di menu o su piu immagini per creare una galleria in linea

Come forzare il flusso verticale dei DIV?

L’altro sistema per forzare il flusso verticale è l’utilizzo della proprietà float (vedremo piu avanti)

Floating box– 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.

Riassumendo–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 Margin: margini della scatola A seguire: Un esempio di posizionamento (1) 20/35

CSS – parte 2 Creare un menu attraverso una lista di link orizzontale, utilizzo delle pseudoclassi

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!