cristina gena - matec 20051 i fogli di stile css 2 cristina gena [email protected]
TRANSCRIPT
cristina gena - matec 2005 1
I fogli di stile CSS 2
Cristina [email protected]
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