I fogli di stile CSS 2 Cristina Gena cgena@di.unito.it http://www.di.unito.it/˜cgena/master.html Gli ems sono una unità di misura permessa dai fogli di stile CSS. 1em corrisponde alla dimensione del carattere “m” di un determinato tipo di carattere. Per questo motivo gli ems sono misure relative, dal momento che la loro estensione cambia in funzione del font adottato. cristina gena - matec 2005

Cascading Style Sheets 2 Fogli di stile CSS Cascading Style Sheets 2 http://www.w3.org/TR/CSS21/ cristina gena - matec 2005

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 blocco Elementi inline Elementi lista cristina gena - matec 2005

Elementi blocco Gli 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

Elementi inline Gli 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

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 incorporati Fogli in linea cristina gena - matec 2005

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

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

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

Cascade: concetti di base http://css.html.it/articoli/leggi/453/usare-i-css-utente/ 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. cristina gena - matec 2005

Css in pratica: sfondi Ecco la lista delle proprietà, applicabili a tutti gli elementi (vantaggio di CSS!): background-color background-image background-repeat background-attachment background-position Esempi body { background-color: white; } p { background-color: #FFFFFF; } .classe1 { background-color: rgb(0, 0, 0) Esempio: fixed cristina gena - matec 2005

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

Css in pratica: liste Grazie 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-image list-style-position list-style-type Esempio cristina gena - matec 2005

Box-model Il 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

Css in pratica: i margini Una 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

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

Css in pratica: border Esempio cristina gena - matec 2005

3 proprietà speciali di Css Sono display, float e clear Display: 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

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

Posizionamento: cosa dice il w3c http://www.w3.org/TR/CSS2/visuren.html#comparison normal flow Boxes 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 Offset: differenza da un altro oggetto cristina gena - matec 2005

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

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

logo Testo float right Float right 4 Float right 3 Float right 2 immagine float left Testo float right cristina gena - matec 2005

Css in pratica: dentro il box overflow: 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

quindi, ridisegnare almeno una pagina del sito analizzato, Img 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, cv interessi foto fun cristina gena - matec 2005