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

Intro CSS e tag DIV

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.

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.

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.

• 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

• 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?

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.

• 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?

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

CSS Zen Garden

….

Stessa struttura HTML (stessi contenuti)

Cambiano solo i css

• 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?

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

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:<p style="font-weight:bold">

• La priorità della regola è massima, indipendentemente dal peso dei selettori• Questo metodo è sconsigliabile

FOGLI DI STILE INCORPORATI

• Si specificano gli stili direttamente nel codice XHTML attraverso il tag <style> da inserire nel tag <head>:<head><style type="text/css">/*<![CDATA[*/…/*]]>*/</style>

</head>• Le stringhe /*<![CDATA[*/ e /*]]>*/ 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

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


FOGLI DI STILE ESTERNI

• I fogli di stile esterni sono richiamati attraverso il tag <link> da inserire nel tag <head>:

<head><link rel="stylesheet" href="file.css" type="text/css" /></head>

• Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente


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

La sintassi di base dei CSS

selettore{

proprietà: valore;

proprietà: valore;

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;

}

• 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; }

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

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

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

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 {…}

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 {…}

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

Il tag <div>

• 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.

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???

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”;}

<body><div id=“menu”>

contenuto del menu…

</div>

</body>

Vediamo un esempio pratico con i DIV

Box model CSSDiamo delle dimensioni ai DIV

UNITa di misura in CSSPRIMA PARTE: IL BOX MODEL

PX: dimensione fissaEM: unita di misura relative %:: unita di misura relativa

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.

body { font-size: 10px;} h1 { font-size: 1.4em; }h2 { font-size: 1.2em; }p { font-size: 1em; }

h1 = 10 x 1.4 = 14pxh2 = 10 x 1.2 = 12pxp = 10 x 1 = 10

%

• 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%; }

UNITa di misura in CSSPRIMA PARTE: IL BOX MODEL

IL BOX MODELOgni 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

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


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à


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


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-leftEsempio:div { margin-left:1em; margin-top:2em }


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 }

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


I MARGINIQuando 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; }


I MARGINII 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:1em;}


I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

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

I BORDI

• I bordi sono caratterizzati da tre aspetti:1. stile2. spessore3. 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: <spessore> <stile> <colore>border: <spessore> <stile> <colore>

• Ex: border-top: 1px solid red;


I BORDIGli 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);


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


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

COLORE DELLO SFONDO

• La proprietà background-color può assumere i seguenti valori:• transparent• <colore> • Il valore predefinito è transparent


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)


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


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 <body>)


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


BACKGROUND-POSITIONPRIMA PARTE: COLORI E SFONDI

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; }


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


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;

}


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

• 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


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

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;}

Tutti i selettori e proprietà

http://www.w3schools.com/css/css_examples.asp

Documents

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