cristina gena - matec 2005 1

I fogli di stile CSS 2

Cristina Genacgena@di.unito.it

http://www.di.unito.it/˜cgena/master.html

cristina gena - matec 2005 2

Cascading Style Sheets 2

http://www.w3.org/TR/CSS21/

Fogli di stile CSS

cristina gena - matec 2005 3

Classificazione degli elementi

Prima di addentrarci nei segreti di CSS è bene capire la distinzione tra gli elementi che possiamo trovare in un documento HTML.

Gli elementi principali sono:

Elementi bloccoElementi inlineElementi lista

cristina gena - matec 2005 4

Elementi bloccoGli elementi blocco sono i box che possono contenere altri elementi,

sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento.

Sono elementi blocco: <center>, <div> , <form> , <h1>..<h6> , <hr> , <ol> , <p> , <table> , <ul> ,….

ESEMPIO:

<h1>Titolo</h1><p>Paragrafo</p>

Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <H1> e <P> sono elementi blocco.

cristina gena - matec 2005 5

Elementi inlineGli elementi inline non possono contenere elementi

blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo o immagini).

Sono elementi inline: <a> , <b> , <br> , <font> , <i> , <img> , <select> , <input> , <strong> , <textarea> , <span>…..

Una terza categoria è quella degli elementi lista. Comprende soltanto l'elemento LI (list item).

cristina gena - matec 2005 6

Come usare i Css2?Ci sono tre modalità valide, ognuna caratterizzata

da alcuni aspetti:Fogli collegati (il classico tag <LINK

….> oppure l’attributo @import all’interno del tag <STYLE>)

<style type="text/css">@import "stile.css" screen;</style>

Fogli incorporatiFogli in linea

cristina gena - matec 2005 7

L’attributo “Media”Non solo i browser accedono al nostro sito.Anche palmari,

cellulari e altri dispositivi sono abilitati a farlo..e ognuno di questi ha caratteristiche diverse. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile.

La soluzione ideale sta nella creazione di fogli di stile ad hoc.

Esempi di sintassi:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

< style type="text/css" media="screen">...</style>

cristina gena - matec 2005 8

Quali dispositivi?all: Il CSS si applica a tutti i dispositivi di

visualizzazione.screen. Valore usato per la resa sui normali

browser web.print. Il CSS viene applicato in fase di stampa del

documento.projection. Usato per presentazioni e proiezioni

a tutto schermo.aural. Da usare per dispositivi come browser a

sintesi vocale.braille. Il CSS viene usato per supporti basati

sull'uso del braille.embossed. Per stampanti braille.handheld. Palmari e simili.tv.Web-tv.

cristina gena - matec 2005 9

Cascade: concetti di base

Per capire meglio il significato di “cascade” vediamo come si comporta un browser di fronte a un foglio di stile (ex):

Per prima cosa controlla il target stabilito con l'attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento.

Comincia ad ordinare per peso e origine secondo le regole viste sopra. Se c’è un Css definito dall’autore userà quello. Altrimenti verificherà la presenza di un foglio di stile utente e in sua assenza applicherà le regole stilistiche predefinite.

Quindi calcola la specificità dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza.

In generale gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.

cristina gena - matec 2005 10

Cascade: concetti di base

User Agent CSS:Ovvero il foglio di stile di default del dispositivo con cui si sta

visualizzando la pagina. In particolare, per quanto riguarda i browser, è il foglio di stile con cui viene visualizzata una pagina senza alcun altro CSS.

Author CSS:Ovvero i fogli di stile specificati dall'autore della pagina. Questi

andranno a ridefinire i CSS del browser, e ci sono tre sottotipi, nell'ordine dal meno influente al più influente: i CSS esterni, quelli incorporati e quelli inlinea. Possono inoltre essere definiti per diversi media, ovvero diversi dispositivi.

User CSS:Sono i fogli di stile dell'utente: con un CSS in locale l'utente può

ridefinire i CSS del browser e quelli dell'autore. I CSS utente hanno priorità massima, e sono stati pensati soprattutto per l'accessibilità, ma non solo.

http://css.html.it/articoli/leggi/453/usare-i-css-utente/

cristina gena - matec 2005 11

Css in pratica: sfondiEcco la lista delle proprietà, applicabili a tutti gli elementi

(vantaggio di CSS!):

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

Esempibody { background-color: white; }p { background-color: #FFFFFF; }.classe1 { background-color: rgb(0, 0, 0)

Esempio: fixed

cristina gena - matec 2005 12

Css in pratica: il testo

Le proprietà di base a proposito dell’elemento testo sono:

il font da usare (font-family)la sua dimensione (font-size)la sua consistenza (font-weight)l'interlinea tra i paragrafi (line-height)l'allineamento del testo (text-align)la sua decorazione (text-decoration)

Poi esistono proprietà più raffinate (da wordprocessor): word-spacing, letter-spacing, text-shadow, text-transform

Esempio

cristina gena - matec 2005 13

Css in pratica: listeGrazie ai CSS possiamo definire in vari modi l'aspetto delle

liste (X)HTML. Le proprietà che andremo ad esaminare si riferiscono non ai canonici tag usati per inserire una lista ordinata (<OL>) o non ordinata (<UL>), ma ai singoli elementi che le compongono, ovvero l'elemento <LI> (ricordate? Elemento lista!)

Proprietà:list-style-imagelist-style-positionlist-style-type

Esempio

cristina gena - matec 2005 14

Box-modelIl box-model è uno degli elementi-cardine dei Css. L'insieme di

regole che gestisce l'aspetto visuale degli elementi blocco è in genere riferito a questo modello.l'area del contenuto. E' la zona in cui trova spazio il

contenuto vero e proprio, testo, immagini, animazioni Flash. Si può agire sulle dimensioni di quest’area con le proprietà width e height.

il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento.

il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.

il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Esempio

cristina gena - matec 2005 15

Css in pratica: i marginiUna delle maggiori limitazioni di HTML è la mancanza di un

meccanismo interno per spaziare gli elementi di un documento (l’unica possibilità che avevamo a disposizione era l’attributo cellspacing).

Sono cinque le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box.

L'ultima, margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.

Esempio

cristina gena - matec 2005 16

Css in pratica: padding

Un altro modo per creare spazio intorno ad un elemento è quello di usare il padding. Come per i margini, HTML incorpora un meccanismo simile solo per le celle di tabella, tramite il cosiddetto cellpadding.

Rispetto a margin: quando si usa il padding, lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno.

Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding).

Esempio

cristina gena - matec 2005 17

Css in pratica: border

Esempio

cristina gena - matec 2005 18

3 proprietà speciali di CssSono display, float e clearDisplay: Avevamo chiarito in quella sede la fondamentale

distinzione tra elementi blocco, inline e lista che è alla base di (X)HTML. Quello che si era detto può essere rimesso in discussione da questa proprietà: la funzione di display è di definire il trattamento e la presentazione di un elemento.

Float: con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float (in pratica ripete ciò che faceva align con le immagini in HTML)

Clear: questa proprietà serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco.

esempi

cristina gena - matec 2005 19

Css in pratica: posizionamento

E' con queste regole che si può pensare di realizzare il layout delle nostre pagine solo con i CSS e giungere così alla definitiva e reale separazione tra presentazione e struttura!

Position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi (static, absolute, fixed, relative).

cristina gena - matec 2005 20

Posizionamento: cosa dice il w3c

http://www.w3.org/TR/CSS2/visuren.html#comparisonnormal flowBoxes in the normal flow belong to a formatting context, which

may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

static The box is a normal box, laid out according to the normal flow.

The 'left' and 'top' properties do not apply.

relative The box's position is calculated according to the normal flow

(this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset

cristina gena - matec 2005 21

Posizionamento: cosa dice il w3c

http://www.w3.org/TR/CSS2/visuren.html#comparison

absolute The box's position (and possibly size) is specified with the 'left',

'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

cristina gena - matec 2005 22

Posizionamento: cosa dice il w3c

http://www.w3.org/TR/CSS2/visuren.html#comparison

fixed The box's position is calculated according to the 'absolute'

model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

cristina gena - matec 2005 23

logo Float right 1Float right 2Float right 3Float right 4

immagine float left

Testo float right

cristina gena - matec 2005 24

Css in pratica: dentro il boxoverflow: visible; autorizza il contenuto ad espandersi

oltre il suo contenitore. E' il valore impostato di default. overflow: hidden; Si vieta al contenuto di oltrepassare il

suo contenitore. In questo caso il contenuto quindi verrà 'tagliato'.

overflow: scroll; Anche se il contenuto non eccede il contenitore, il contenitore avrà le barre di scorrimento.

overflow: auto; Se necessario, il contenitore avrà una o tutte e due le barre di scorrimento.

cristina gena - matec 2005 25

Esercizio sull'usabilità Alla luce dei criteri di usabilità WEB commentati a lezione, o reperiti da altre fonti:

•analizzare un sito orientato alla formazione a distanza, evidenziando quali degli aspetti di usabilità siano

evidentemente presenti e quali, invece, non lo siano. •Possibili siti da analizzare sono uno tra quelli esaminati o cui si è fatto riferimento durante le lezioni, o altri siti di formazione on-line, o mista (inclusi quelli con materiale su corsi tenuti dal docente, oppure uno tra quelli offerti

da W3Schools). •per almeno uno degli aspetti di usabilità, suggerire le

modifiche nell'impostazione dei criteri di progettazione del sito, col fine di correggere la carenza.

•quindi, ridisegnare almeno una pagina del sito analizzato,

Img

cv

interessi

foto

fun