Intro CSS e tag DIV. INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita.

Presentazione sul tema: "Intro CSS e tag DIV. INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita."— Transcript della presentazione:

1 Intro CSS e tag DIV

2 INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti essenziali: I contenuti La formattazione dei contenuti I contenuti sono forniti attraverso linguaggi di marcatura che caratterizzano i vari oggetti del documento La formattazione è determinata dall’interpretazione del programma utente.

3 BROWSER E STILI: old school Ogni browser ha una rappresentazione predefinita degli oggetti della pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui l’utente (ma non l’autore) può intervenire in minima parte. Per permettere agli autori di avere un maggiore controllo sulla rappresentazione dei contenuti, sono nati marcatori (come ad esempio font ) il cui scopo non era più caratterizzare gli oggetti del documento, ma fornire una formattazione degli stessi. Come conseguenza i contenuti risultavano indissolubilmente legati alla loro rappresentazione grafica.

4 I FOGLI DI STILE A CASCATA (CSS): new school Compito dei CSS (Cascading Style Sheets: Fogli di Stile a Cascata) è ripristinare la separazione dei contenuti e dalla formattazione. I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato.

5 I css sono un set di istruzioni che definiscono la presentazione di un docmento In altre parole definiscono come apparirà una pagina HTML CSS esterni possono essere applicati a molteplici pagine web che ne fanno riferimento Cosa sono i CSS

6 Permettono di cambiare l’aspetto e il layout di un intero sito, editando un solo file! Permettono di migliorare l’accessibilità Possono definire come verrà processata la pagina su differenti media (screen, print) Perché utilizzare i CSS?

7 La definizione più conosciuta dei css e diffusa dei fogli di stile è “sono la separazione tra contenuto (HTML) e presentazione (CSS)”. Una buona conoscenza dell’ html e la comprensione approfondita dei selettori css e il loro uso proprio permettono di strutturare bene pagine web, sia dal punto di vista del contenuto che della presentazione.

8 Page layout e object Positioning Font e proprietà di testo Color and background properties Proprietà di blocchi logici : Margini, borders, dimensioni A cosa sono utili?

9 Benefits in Using CSS for Layout Reduces file sizes, page load times & bandwidth Easier to keep layout and look consistent across site Easier & faster to redesign Reduces code, increases prominence of content — good for search engines Aids in accessibility

10 CSS Zen Garden …. Stessa struttura HTML (stessi contenuti) Cambiano solo i css

11 Page layout e object Positioning Font e proprietà di testo Color and background properties Proprietà di blocchi logici : Margini, borders, dimensioni A cosa sono utili?

12 UN DIVERSO APPROCCIO Nella realizzazione di pagine web tramite XHTML+CSS è richiesto un diverso approccio rispetto a quanto si farebbe impaginando per mezzo di tabelle con i programmi del tipo WYSIWYG Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura della pagina, è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale

13

14 COLLEGARE I CSS A UN DOCUMENTO XHTML Esistono diversi modi di collegare un foglio di stile ad un documento XHTML Fogli di stile incorporati Fogli di stile esterni Fogli di stile importati Attributo style : La priorità della regola è massima, indipendentemente dal peso dei selettori Questo metodo è sconsigliabile

15 FOGLI DI STILE INCORPORATI Si specificano gli stili direttamente nel codice XHTML attraverso il tag da inserire nel tag : /*<![CDATA[*/ … /*]]>*/ Le stringhe /* */ servono a rispettare le regole dell’XML Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

16 FOGLI DI STILE IMPORTATI Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole Se presenti, le regole @import devono essere inserite prima delle normali regole per gli stili: @import "file1.css"; @import "file2.css"; body {…} Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import Le regole @import possono comparire anche negli stili incorporati PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

17 FOGLI DI STILE ESTERNI I fogli di stile esterni sono richiamati attraverso il tag da inserire nel tag : Attraverso il tag è possibile associare diversi fogli di stile contemporaneamente PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

18 STRUTTURA DI UN FOGLIO DI STILE Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato Di seguito è rappresentata la struttura di una regola: h1 { font-size : 2em; font-weight : bold; } DICHIARAZIONE PROPRIETÀ SELETTORE VALORE REGOLA

19 La sintassi di base dei CSS selettore{ proprietà: valore; } Diciamo che vogliamo ad esempio un colore rosso come sfondo della pagina web: con i CSS si ottiene così: body { background-color: #FF0000; }

20 Attraverso i selettori vengono associate le regole agli elementi del documento HTML (o XML). Selettore fa match con gli elementi E BODY { font-family: Arial; font- size: 12 pt; } H1 { font-size: 18 pt; } P { font-size: 10 pt; }

21 LE REGOLE Una regola è costituita da: 1.uno o più selettori (separati da una virgola ‘, ’) a cui associare un insieme di dichiarazioni racchiuse fra parentesi graffe ‘ { } ’ 2.le varie di dichiarazioni sono separate da un punto e virgola ‘ ; ’ 3.ogni dichiarazione è costituita da due elementi separati dai due punti ‘ : ’: 1.la proprietà 2.il valore (o l’insieme di valori) assegnato alla proprietà PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE

22 I SELETTORI I selettori indicano al browser quali elementi della pagina si dovranno applicare le dichiarazioni della regola I selettori possono essere essenzialmente di tre tipi: PRIMA PARTE: I SELETTORI h1, h2, p {... } #identificatore {... }.classe {... } 1: TAG XHTML 3: IDENTIFICATORI 2: CLASSI

23 TIPI DI SELETTORI I selettori più generici sono i selettori di tipo 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

24 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 : Titolo Testo … Titolo Testo … Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto ‘. ’.notizia {…} È possibile combinare fra loro più classi: ….classe1.classe2 {…} Il selettore può anche specificare a quale elemento la classe deve essere associata: p.classe {…} h1.classe {…}

25 IDENTIFICATORI Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id : Titolo Testo... 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: #idval.classval {…}

26 Quindi…class VS id CLASSI In html si attribuiscono con l’attributo class=“nome_classe” In css si dichiarano con il selettore.nome_classe Una classe puo essere applicata a piu oggetti della pagina. Ad esempio:.red { color:red;} Se applicata agli h1, h2, h3, p fara diventare i testi di questi tag rossi. ID In html si attribuiscono con l’attributo id=“nome_id” In css si dichiarano con il selettore #nome_id Un ID puo essere richiamato da uno e un solo elemento nella pagina HTML Ad esempio: #header { color:red;} Solo il testo del div “header” in html avra il testo rosso

27 Il tag il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili o comandi che gli sono stati associati. il tag DIV è utilizzato per racchiudere blocchi di tag, che possono essere elenchi, il testo stesso, o perfino parti strutturali intere della pagina come i menù, l'intestazione ed il contenuto. Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la costruzione del box model, ossia un sito strutturato utilizzando soltanto i tag DIV ed escludendo le tabelle.

28 Quindi… Quindi il nostro ipotetico minisito sarà in genere composto da: 1 DIV per la pagina, che conterrà: 1 DIV per il menu 1 DIV per l’header 1 o piu DIV per i contenuti 1 DIV per il footer Ognuno di questi blocchi, avra determinate caratteristiche descritte da appositi selettori CSS. Ad esempio, potremo stabilire che il menu sia scritto con Font 12 px e colore blu, mentre il testo del div per i contenuti sia scritto in 11 px colore nero. Tuttavia abbiamo 4 div differenti, ed un solo tag con rispettivo selettore div. Come fare???

29 Selettore basato su ID Il selettore ID o identificatore, svolge praticamente la funzione di etichetta di un contenitore; Assegnando un ID ad un DIV, basterà richiamare il nome del selettore (ID) e con lui saranno richiamate, all'interno del contenitore, tutte le proprietà/selettori associati a quell’ID nel css #menu { color: black; padding:10px; font-weight: bold; width:900px; Height:150px; background- image:url”image.jpg”; } contenuto del menu…

30 Vediamo un esempio pratico con i DIV

31 Box model CSS Diamo delle dimensioni ai DIV

32 UNITa di misura in CSS PRIMA PARTE: IL BOX MODEL PX: dimensione fissa EM: unita di misura relative %:: unita di misura relativa

33 em L’em è un’unità di misura relativa molto comoda da usare. Il suo nome proviene dalla tipografia, in cui, viene utilizzata per identificare la dimensione della lettera maiuscola M di un carattere. Tale unità di misura calcola la dimensione del testo in base ad una misura fissa (e quindi non relativa) di base. 1em, quindi, corrisponde alla dimensione di base assegnata al documento o all’elemento. E’ molto utilizzata nei layout responsive.

34 body { font-size: 10px; } h1 { font-size: 1.4em; } h2 { font-size: 1.2em; } p { font-size: 1em; } h1 = 10 x 1.4 = 14px h2 = 10 x 1.2 = 12px p = 10 x 1 = 10

35 % Anche questa unità è relativa e, proprio come succede per gli em, calcola la dimensione finale del testo in base alla dimensione base assegnata. body { font-size: 10px; } h1 { font-size: 1.4em; } h2 { font-size: 140%; } h3 { font-size: 1.2em; } h4 { font-size: 120%; }

36 UNITa di misura in CSS PRIMA PARTE: IL BOX MODEL

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

38 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 l’ 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 NOI USEREMO I PX PRIMA PARTE: IL BOX MODEL

39 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, ma Internet Explorer (Win/Mac) non supporta tali proprietà PRIMA PARTE: IL BOX MODEL

40 LARGHEZZA E ALTEZZA Quando si specifica l’altezza di un box ( ad es. height: 300px;) questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio (ad esempio 450 px) 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 PRIMA PARTE: IL BOX MODEL

41 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:1em; margin-top:2em } PRIMA PARTE: IL BOX MODEL

42 I MARGINI I quattro margini possono essere specificati anche attraverso la sintassi abbreviata: #header { margin : 10px 5px 10px 5px } corrisponde a margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; 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 : #header { margin : 10px 5px } Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: #header{ margin: 10px }

43 I MARGINI Quando impostati sul valore auto, i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati 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 Useremo questa tecnica per centrare il nostro div page rispetto allo schermo PRIMA PARTE: IL BOX MODEL

44 I MARGINI Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine: … … #box-1 { margin: 10px; } #box-2 { margin: 20px; } PRIMA PARTE: IL BOX MODEL

45 I MARGINI I margini non collassano quando sono separati da un bordo o dal padding: Lorem ipsum dolor … Quisque imperdiet … div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:1em;} PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

46 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 } #header{ padding: 10px 20px 10px 20px } #header { padding: 10px;} 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

47 I BORDI I bordi sono caratterizzati da tre aspetti: 1.stile 2.spessore 3.colore Questi aspetti possono essere definiti separatamente con: border-style ( border-top-style, …) border-width ( border-top-width, …) border-color ( border-top-color, …) Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border-top: border: Ex: border-top: 1px solid red; PRIMA PARTE: IL BOX MODEL

48 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

49 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 (ad es i px) 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 PRIMA PARTE: IL BOX MODEL

50 SFONDI Lo sfondo può essere Trasparente Caratterizzato da una tinta piatta Riempito del tutto o in parte da una immagine Lo sfondo può essere gestito attraverso le seguenti proprietà: background-color -> assegna un colore di sfondo background-image -> assegna una immagine di sfondo background-repeat -> ripete lo sfondo su asse x e y background-attachment -> determina se lo sfondo scorre o e fisso background-size -> appiccica lo sfondo in maniera responsive background-position -> permette di specificare la posizione dello sfondo rispetto al contenitore PRIMA PARTE: COLORI E SFONDI

51 COLORE DELLO SFONDO La proprietà background-color può assumere i seguenti valori: transparent Il valore predefinito è transparent PRIMA PARTE: COLORI E SFONDI

52 BACKGROUND-IMAGE Per inserire un’immagine di sfondo è sufficiente specificarne l’ url tramite la proprietà background-image : background-image:url(/im/sfondo.png); L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente L’immagine scorrerà assieme al testo Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none; (valore di default) PRIMA PARTE: COLORI E SFONDI

53 BACKGROUND-REPEAT Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine PRIMA PARTE: COLORI E SFONDI

54 BACKGROUND-ATTACHEMENT Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito) background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con ) PRIMA PARTE: COLORI E SFONDI

55 BACKGROUND-POSITION Tramite background-position è possibile stabilire la posizione iniziale dell’immagine. I valori ammessi sono: Unità di lunghezza Unità percentuali Parole chiave: left | center | right per il posizionamento orizzontale top | center | bottom per il posizionamento verticale I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale PRIMA PARTE: COLORI E SFONDI

56 BACKGROUND-POSITION PRIMA PARTE: COLORI E SFONDI

57 BACKGROUND La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; } PRIMA PARTE: COLORI E SFONDI

58 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

59 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

60 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; } PRIMA PARTE: IL BOX MODEL

61 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 PRIMA PARTE: IL BOX MODEL

62 A seguire: Il testo 24/35 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. Css Box model element

63 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 { margin: 10 0 0 10; } BODY { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } BODY { padding: 5px; } BODY { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; }

64 Tutti i selettori e proprietà http://www.w3schools.com/css/css_examples.asp