Basi di Dati. Programmazione e gestione di sistemitelematici

Coordinatore: Prof. Paolo NesiDocenti: Prof. Paolo Nesi

Dr.sa Michela Paolucci

Dr. Emanuele Bellini

Introduzione

� CSS Cascading Style Sheets (fogli di stile)� Le regole per comporre i CSS sono contenute in

un insieme di direttive (o Recommendations) emanate dal 1996 dal W3C

� L'introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti

Prima dei CSS (1)

� Come sappiamo una pagina web è formata da contenuti e layout

� Il linguaggio HTML serve per gestire i contenuti, attraverso l’uso di tag. Ogni tag specifica un diverso ruolo dei contenuti

� I browser interpretano il codice HTML e mostrano all'utente formattazioni predefinite per ogni tag

� Ogni browser ha un proprio metodo di interpretazione dei tag. Per questo si dice che la formattazione html ècompletamente sotto il controllo dell'utente, che può modificarla nelle Impostazioni del suo browser

Prima dei CSS (2)

� Allo scopo di consentire agli autori di definire l'aspetto grafico delle pagine create, dal '93 Internet Explorer e Netscape Navigator, presentarono tagproprietari, ovvero non compatibili con gli altri browser e non aderenti agli standard.

� Come ad esempio è successo con il tag<font>

Prima dei CSS (3)

� Prima dell’uso dei CSS erano presenti i seguentiproblemi:� lunghezza dei tag: una pagina che non usa i CSS è più pesante

(in termini di bit). (Le regole CSS possono essere inserite in un file esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server devono trasmettere)

� mancanza di logica in HTML: un codice che non è aderente agli standard comporta lavoro addizionale per i browser (che devono interpretare, se possibile, direttive arbitrarie)

� mancanza di compatibilità con palmari e smartphone i cui schermi hanno una risoluzione minima ed una forma ben diversa dal rapporto 4:3 dei monitor dei pc

Prima dei CSS (4)

� Per risolvere la situazione il W3C ha emanato le specifiche CSS-1, per separare il contenuto dalla sua formattazione: Il contenuto definito dal codice html e la relativa formattazione realizzata attraverso i css.

Cosa sono I CSS e a che servono

� La definizione più conosciuta e diffusa dei fogli di stile è: sono la separazione tra contenuto e presentazione. Il contenuto è nella pagina html, mentre la presentazione è riservata ai fogli di stile. Ma c'è una terza variabile che non compare in questa definizione, una variabile di cui molti appassionati ed esperti di webdesign devono tenere conto: la struttura. La struttura è inseparabile dal contenuto, ed è l'unico modo per consentirne la presentazione. Per esempio, si immagini una guida di programmi tv in cui le pagine non siano divise per giorni e le programmazioni non suddivide per canale e orario. Una guida ai programmi televisivi con le stesse informazioni testuali, ma presentate in ordine sparso e senza forma. La potreste consultare?

Vantaggi CSS in generale(1)

� Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perchériducevano notevolmente le dimensioni della pagine.

� Risolvevano il secondo in modo parziale perchéconsentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tagHTML.

� Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA (i palmari) erano scarsamente diffusi.

Svantaggi dei CSS

�

I browser più datati hanno una non corretta interpretazione dei CSS, ciò richiede un minimo d'accortezza al momento delle progettazione. Punto.

ConcludendoProgettare con i CSS, realizzando pagine standard (magari in XHTML) significa progettare per il futuro, senza però trascurare il passato: una pagina (X)HTML standard + CSS standard èaccessibile con tutti i dispositivi per la navigazione nel web. Certo, i browser più datati richiederanno CSS specifici, magari più semplici, ma ottenere la stessa grafica su tutti i dispositivi/browser non èpossibile e neppure utile. Un sito indipendente dal browser è quello in grado di presentare correttamente i contenuti su tutti i browser.

Modi per implementare i CSS

� Esistono 3 metodi per implementare i fogli di stile CSS in una pagina web, ovvero utilizzando stili:� In linea (inline)� incorporati (embedded)� esterni (external)

� Il metodo più usato è il primo perchè permette di gestire globalmente il layout del sito utilizzando un file a se stante. Il contenuto è separato in modo netto dalla presentazione e questo consente una maggiore flessibilità

Metodo inline

� Si usa in punti molto specifici della: non simodifica la visualizzazione dell’intera pagina ma solo di una parte di essa.

� Si fa uso dell’attributo style con la seguentesintassi:� <h1 style= “color:red;”>Titolo</h1>

Metodo incorporato

� È utile quando si vuole modificare una sola pagina web

� All’interno del tag <head> si inseriscono le regole di stile volute che devono, a loro volta, essere contenute all’interno di un altro tag <style>:

� <style type="text/css"> Regole

</style>

Metodo incorporato: esempio<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>

<title>Prima Pagina</title><style type="text/css">body {

padding: 2em;color: purple;background-color: #d8da3d }

h1 {font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif}

h2 { color: red}

</style></head>

<body><!-- Main content --><h1>Prima pagina definita con i CSS interni</h1><h2>Paragrafo in carattere rosso</h2>

<p>Testo visualizzato<!-- Sign and date the page, it's only polite! --></p>

</body></html>

Metodo incorporato: visualizzazione esempio

Metodo esterno

� Si fa riferimento ad un file (esterno) diverso da quello contenente il codice html:� <lynk rel="stylesheet" href="/percorso_della_cartella/stile.css"

type="text/css" media="all">

� Metodo di inclusione di più CSS esterni tramite @import:� <style type="text/css" media="all">

@import "/percorso_della_cartella/stile1.css";@import "/percorso_della_cartella/stile2.css";@importurl("http://www.miosito.it/percorso_della_cartella/stile2.css");</style>

Metodo esterno: visualizzazioneesempio� Sono necessari due file:

� Il file nomefile.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>

<head><title>My first styled page</title><link rel="stylesheet" type="text/css" href="http://localhost/stile.css">

</head><body><!-- Main content -->

<h1>Prima pagina definita con i CSS interni</h1><h2>Paragrafo in carattere rosso</h2><p>Testo visualizzato<!-- Sign and date the page, it's only polite! --></p>

</body></html>

� Il file stile.css:body {padding: 2em;

color: purple;background-color: #d8da3d }

h1 { font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif}

h2 {color: red}

Metodo esterno:

Classificazione degli elementi

� Una pagina HTML, non è altro che un insieme di rettangoli (box) disposti sullo schermo di un monitor (paragrafi, titoli, tabelle, immagini, …)

� Non tutti i box sono uguali:alcuni contengono altri box, altri sono invece contenuti all'interno dei primi

Attributo media di <style> (1)

� all: il CSS si applica a tutti i dispositivi di� visualizzazione� screen: normali browser web� print: stampa� projection: presentazioni e proiezioni a tutto schermo� aural: dispositivi come browser a sintesi vocale� braille: supporti basati sull'uso del braille� tv: Web-tv� ...

Regole (1)

� Un CSS o foglio di stile è un insieme di regole

� Una regola è costituita da un selettore e da un blocco della dichiarazione. Ogni blocco contiene a sua volta proprietà e valori:

Regole (2)� Il selettore serve a definire la parte del

documento cui verrà applicata la regola� Il blocco delle dichiarazioni è delimitato

rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno si possono trovare più dichiarazioni (proprietà: valore1) separate dal carattere ';'

Regole (3)� La proprietà definisce un aspetto dell'elemento

da modificare (margini, colore di sfondo, etc) secondo il valore espresso.

� Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori:

�body {color background: black;} ERRATA�p {font: 12px Verdana, arial;} CORRETTA

Commenti

� Per inserire parti di commento in un CSS:• /* come segno di apertura• * */ come segno di chiusura

body {padding: 2em;color: purple;*/* Questo è un commento **/background-color: #d8da3d }

I Selettori

� I selettori sono le parti della pagina web a cui vengono applicate le regole descritte nel file.css

� Ad esempio 'type selector' fa riferimento agli elementi che descrivono una pagina html (h1, p,...)�h1 {color: #000000;}

Raggruppamento di selettori

� Quando due o più selettori sono definiti dalla stessa regola, conviene raggruppare

� Senza raggruppamento:� VXCVh1 {background: white;}� h2 {background: white;}� h3 {background: white;}

� Con il raggruppamento:� h1, h2, h3 {background: white;}

Selettore universale

� Serve a selezionare tutti gli elementi di una pagina web:� * { color: black; }

Selettore del discendente(descendant selector)

� Serve a selezionare tutti gli elementi che nella struttura ad albero di una pagina web sono discendenti di un altro elemento specificato nella regola� div p {color: black;}

� Questa regola è relativa a tutti i paragrafi (p) discendenti del blocco div

Selettore del figlio(child selector)

� Seleziona un elemento che è figlio diretto di un altro

� body > p {color: black;}�Questa regola è relativa a tutti i paragrafi figli

diretti dell'elemento body

� NOTA: questo selettore non è supportato da Internet Explorer

Selettore elemento adiacente(adjacent-sibling selector)� Seleziona gli elementi che nel codice della pagina web

sono immediatamente vicini (adiacenti) ad un altro� Se il file html contiene:<h1>Titolo</h1><p>Primo paragrafo</p><p>Secondo paragrafo</p>� La regola: h1 + p {color: red;}può essere applicata solo al primo paragrafo� NOTA: non è supportato da Internet Explorer

Selettore dell'attributo(attribute selector)

� Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi. Esistono le seguenti modalità:�attributo semplice

� attributo con valore�attributo il cui valore contiene una stringa� attributo il cui valore inizia con una stringa

Selettore dell'attributo: attributosemplice

� Questa regola seleziona tutti gli elementi che, nel file.html, hanno un determinato attributo

� Esempio:� � p [ id ] {background: red;}applica uno sfondo rosso a tutti gli elementi 'p' dellapagina web (pagina.html) per cui sia stato impostato unattributo id(<p id='xxx' ...> contenuto </p>)

Selettore dell'attributo: attributocon valore� Questa regola seleziona tutti gli elementi che,

nel file.html, hanno come valore dell'attributo la stringa definita nella regola

� Esempio:� p [ id = "text" ] { backgorund: red; }applica uno sfondo rosso a tutti gli elementi 'p' che nella

pagina web (file.html) hanno come valore dell'attributoid "text“(<p id='text' ...> contenuto </p>)

Selettore dell'attributo: attributo ilcui valore inizia con una stringa

� Questa regola seleziona tutti gli elementi il cui valore dell'attributo inizia con la stringa definita nella regola

� �Esempio:� � img [ alt t= "colosseo" ] {margin: 10px;}applica un margine di 10px a tutte le immagini in cuil'attributo alt contiene la stringa "colosseo"( <img src="figura1.gif" alt="Foto del Colosseo" />)

Selettore dell'attributo: attributo ilcui valore contiene una stringa

� Questa regola seleziona tutti gli elementi il cui valore dell'attributo contiene la stringa definita nella regola

� Esempio:� img [ alt |= "foto" ] {margin: 10px;}applica un margine di 10px a tutte le immagini in cuil'attributo 'alt' inizia con la stringa "foto"( <img src="figura1.gif" alt="Foto del Colosseo" />)

Selettori Id e Class (1)

� Sono due selettori che possono essere applicati a tutti gli elementi del file.html

� Selettore class:� si assegna ad un elemento del file.html un attributoclass: <p class="testorosso">....</p>� si definisce nel file.css la class testorosso nel modoseguente: ( .nome_classe {blocco dichiarazione} ).testorosso {

font: 12px Arial, Helvetica, sans-serif;color: #FF0000;}

Selettori Id e Class (2)

� Un id è utilizzato nel file.html per fare riferimento ad uno ed un solo elemento della pagina web. Per questo motivo la differenza tra id e class risulta:� un id dichiarato nel file.css trasforma solo unospecifico elemento del file.html� una classe, al contrario, può essere assegnataa più elementi, anche dello stesso tipo

� NOTA: Se uno stile va applicato un solo elemento, si usa l'id altrimenti se si prevede di usarlo su più elementi si usa class

Unità di misura più usate

� pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font

� em (em-height): 1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa

� px (pixels): unità di misura ideale su monitor. E‘quella più usata e facile da comprendere

Valori e unità di misura

� I valori di una proprietà non vanno mai messi tra

virgolette (eccezione=stringhe di testo e nomi dei font composti da più di una parola. Es: “Times

New Roman”)� Quando si usano valori numerici con unità dimisura, non bisogna lasciare spazio tra numero e

sigla dell'unità (Corretto: 15px - Sbagliato:15 px)

Altre unità per le dimensioni (1)

� Percentuale: è relativo ad un altro valore, in genere quello espresso per l'elemento parente (60%)

� Stringhe: alcune proprietà dei CSS possono averecome valore una stringa di testo da inserire come

contenuto aggiunto nel documento� Valori URI: sono URL che puntano a documentiesterni.

Possono essere assoluti o relativi (il path fa riferimento alla posizione del file.css)

Ereditarietà (1)

� Le impostazioni stilistiche applicate ad un elemento ricadono anche sui suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà

Ereditarietà (2)

� Se nel css si scrive la regola:� body {color: red;}

� Tutti gli altri elementi suoi discendenti (h1,h2,p)erediteranno questa impostazione� MA se nel file.css si definisce anche anche:

� h1 {color: black;}l'ereditarietà vienespezzata e il testo delparagrafo h1 sarà nero

Ereditarietà (3)

� Non tutte le proprietà sono ereditate. Ereditare un bordo non ha senso.

� Esempio: se si imposta un bordo per un paragrafo sarebbe assurdo che un elemento <a> o un testo in grassetto venissero circondati dallo stesso bordo

Peso delle regole

� Ogni regola ha più o meno importanza rispetto alle altre� Un primo criterio di importanza è dato dall'origine del

foglio di stile. Quando si visualizza una pagina web, il browser la interpreta in base a (in ordine di importanza):� file.css dell'autore� file.css dell'utente� file.css predefinito del browser

� NOTA: tutti i software di navigazione consentono una� gestione di questo aspetto

Peso delle regole (2)

� Criterio dell'ordine:�stili in linea

<h1 style= “color:red;”>Titolo</h1>�stili incorporati (nel file.html)

<head><style>h1{color:red;}</style></head>� stili collegati (file.css)

h1{color: red;}

Cascade

� Un browser esegue le seguenti azioni per visualizzare una pagina web:� controlla il target stabilito con l'attributo media

(adesempio scarta tutti gli stili e le regole riferiti alla stampa o ad altri supporti)

� ordinare le regole in base all'origine (autore-> utente->browser)� calcola la specificità dei selettori (albero) e in caso diconflitto usa il criterio dell'ordine (stili in linea-> Stiliincorporati → stili collegati o esterni)

Gestione del testo

� Prima dei CSS si usava il tag <font>, si creavanocosì pagine web di difficile gestione� Con i CSS possono essere gestite varie proprietàdel testo:

� Il tipo di font� La dimensione del font� La consistenza del font� L'interlinea tra i paragrafi� L'allineamento del testo e la sua decorazione

Gestione del testo: font family

� La proprietà font-family impostare il tipo di carattere. Si applica a tutti gli elementi ed è ereditata. Il W3C ha creato un meccanismo che consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi:� p {font-family: arial, Verdana, sans-serif;}

� Quando la pagina viene caricata, il browser tenta di usare il primo font della lista. Se questo non è disponibile usa il secondo e così via� selettore {font-family: <font 1>,...,<famiglia generica>;}

Gestione del testo: font-size (1)

� Definisce le dimensioni del testo. E' applicabile a

tutti gli elementi ed è ereditata� Sintassi: selettore { font-size: <valore>; }

� I valori del testo possono essere espressi in:� dimensione assoluta: è definita dall'unità dimisura usata� dimensione relativa: viene calcolata in basealla dimensione del testo dell'elemento parente

Gestione del testo: font-size (2)

� Sono valori assoluti:� � xx-small, x-small, small, medium, large, x-large,

xxlarge, pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex)

� p {font-size: 12px;}

� Sono valori relativi:� smaller, larger, em (em-height), % (in percentuale)� h2 {font-size: 1.2em;}

Gestione del testo: font-weight

� Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.� selettore {font-weight: <valore>;}

� Valori: � numerici: 100-200-300-400-500-600-700-800-900� ordinati in senso crescente (dal più leggero al più� pesante)� normal: valore di default (equivale a 400)� bold: grassetto (equivale a 700)� Bolder: misura relativa (più pesante del parente)� lighter: misura relativa (più leggero del parente)

Gestione del testo: line-height

� Serve a definire l'altezza di una riga di testo all'interno di un elemento blocco. Ma l'effetto ottenuto è quello di impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata

� Sintassi:� selettore {line-height: <valore>;}

Gestione del testo: line-height

� Valori:� normal� valore numerico (1.2, 1.3, 1.5): l'altezza della riga

saràuguale alla dimensione del font moltiplicata per questo

valore� valore numerico con unità di misura: l'altezza della

riga sarà uguale alla dimensione specificata� Percentuale: l'altezza della riga viene calcolata come

una percentuale della dimensione del font

Gestione del testo: text-align

� Imposta l'allineamento del testo. E' ereditata e si

applica a tutti gli elementi:� Sintassi: selettore { text-align: <valore>; }

� Valori:� left: allinea il testo a sinistra� right: allinea il testo a destra� center: centra il testo� justify: giustifica il testo

Gestione del testo: text decoration

� Imposta particolari decorazioni e stili per il testo. E‘ ereditabile ed applicabile a tutti gli elementi (p {textdecoration: <valore> o <valori>;})

� Valori:� none: il testo non ha decorazioni particolari� underline: il testo sarà sottolineato� overline: il testo avrà una linea superiore� line-through: il testo sarà attraversato da una lineaorizzontale al centro� blink: testo lampeggiante (p {text-decoration: blink;}

Ancora testo

� Letter-spacing� blockquote{letter-spacing: 0.1em}

� Word-spacing� H1 {word-spacing: 1em}

� Text-transform� capitalize, uppercase, lowercase

� � White-space� normal (sequenze di spazi e “a capo” ignorati)� pre (sequenze di spazi “a capo” rispettati)� nowrap (spazi ignorati, “a capo”soppressi)

Colori e sfondi

� Due stili che vanno specificati insieme:� color: il colore del testo� sfondo:

� background-color: un colore o ‘transparent’� background-image: un’immagine specificata da un URL� gli sfondi non si ereditano ma sono trasparenti

� � Sfondi degli elementi� Background-repeat (repeat, repeat-x, repeat-y, no-repeat)� Background-attachment (fixed, scroll)Background-position (posizione in % o assoluta)

Tabelle

� <table><caption>Tabella 3x3</caption><tr id="row1"><th>Header 1</th><td>Cell 1</td><td>Cell 2</td></tr><tr id="row2"> <th>Header 2</th><td>Cell 3</td><td>Cell 4</td></tr><tr id="row3"><th>Header 3</th><td>Cell 5</td><td>Cell 6</td></table>

� NOTA: specifica per riga� Aggiungiamo un po’ di stile con i CSS ...

Tabelle e CSS

TH { vertical-align: center;text-align: center;font-weight: bold; font-size: x-large }

TD { vertical-align: middle }TABLE {border: 1px solid black }TR#row1 { text-align: left }TR#row2 { text-align: center }TR#row3 { text-align: right }CAPTION { caption-side: top }

Margini (1)

� Blockquote e le liste (ol, ul) normalmenterientrano il testo contenuto� Lo spazio intorno può essere controllato con le

proprietà:� margin� margin-left� margin-right� margin-top� margin-bottom

Margini (2)

Esempio 1blockquote {margin-top: 1em;margin-right: 0em;margin-bottom: 1em;margin-left: 0em;font-style: italic;}� Esempio 2blockquote {margin: 1em 0em 1em0em;font-style: italic;}In senso orario a partire da top

Link

� Link sottolineato o non� a:link {text-decoration: underline;}� a:link, a:visited {text-decoration: none}� a:hover {background: cyan}� a:hover {color: red}

� Link, visited, hover: sono chiaramentespecializzazioni di a. Ma perché i due punti?Non sono proprio classi come le altre, sono pseudoclassi perché si basano su proprietàche sono esterne al documento (es. un link è stato visitato)

Link

� http://css.html.it� http://www.w3.org/� http://www.w3.org/Style/CSS/

Basi di Dati. Programmazione e gestione di sistemitelematici

Prof. Paolo Nesi lab. DSI-DISITnesi@dsi.unifi.it 055 4796425 Dr.sa. Michela Paoluccipaolucci@dsi.unifi.itDr. Emanuele Bellini bellini@rinascimento-digitale.it