CSS - DISIT Lab

Basi di Dati.
Programmazione e
gestione di sistemi
telematici
Coordinatore: Prof. Paolo Nesi
Docenti:
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 tag
proprietari, 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 seguenti
problemi:
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 tag
HTML.
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.
Concludendo
Progettare 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 si
modifica la visualizzazione dell’intera pagina ma
solo di una parte di essa.
Si fa uso dell’attributo style con la seguente
sintassi:
<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";
@import
url("http://www.miosito.it/percorso_della_cartella/stile2.css");
</style>
Metodo esterno: visualizzazione
esempio
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: attributo
semplice
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' della
pagina web (pagina.html) per cui sia stato impostato un
attributo id
(<p id='xxx' ...> contenuto </p>)
Selettore dell'attributo: attributo
con 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'attributo
id "text“
(<p id='text' ...> contenuto </p>)
Selettore dell'attributo: attributo il
cui 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 cui
l'attributo alt contiene la stringa "colosseo"
( <img src="figura1.gif" alt="Foto del Colosseo" />)
Selettore dell'attributo: attributo il
cui 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 cui
l'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 attributo
class: <p class="testorosso">....</p>
si definisce nel file.css la class testorosso nel modo
seguente: ( .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 uno
specifico elemento del file.html
una classe, al contrario, può essere assegnata
a 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à di
misura, 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 avere
come 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à viene
spezzata e il testo del
paragrafo 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 di
conflitto usa il criterio dell'ordine (stili in linea-> Stili
incorporati → stili collegati o esterni)
Gestione del testo
Prima dei CSS si usava il tag <font>, si creavano
così 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à di
misura usata
dimensione relativa: viene calcolata in base
alla 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 linea
orizzontale al centro
blink: testo lampeggiante (p {text-decoration: blink;}
Ancora testo
Letter-spacing
Word-spacing
blockquote{letter-spacing: 0.1em}
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) normalmente
rientrano il testo contenuto
Lo spazio intorno può essere controllato con le
proprietà:
margin
margin-left
margin-right
margin-top
margin-bottom
Margini (2)
Esempio 1
blockquote {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;}
Esempio 2
blockquote {
margin: 1em 0em 1em
0em;
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 sistemi
telematici
Prof. Paolo Nesi
[email protected]
Dr.sa. Michela Paolucci
[email protected]
Dr. Emanuele Bellini
[email protected]
lab. DSI-DISIT
055 4796425