Progettazione di siti web
a.a. 2021/22
Fogli di stile: introduzione
Maria Simi
Marzo, 2022
[Learning web design, J. Niederst
Manuale di riferimento del W3C]
Vantaggi dei fogli di stile separati
Riassumiamo i vantaggi derivanti dal mantenere una chiara distinzione tra gli aspetti stilistici e quelli strutturali
- Possibilità di applicare lo stesso stile a più contenuti
- Possibilità di riutilizzo di uno stesso contenuto con stili diversi
- Facilità di sviluppo e manutenzione
- Controllo stilistico molto potente
Uno stile per molti contenuti
- I fogli di stile possono essere globali per il sito
- Le regole stilistiche stanno in un posto solo e sono utilizzate da tutte le pagine del sito
- Facilità di sviluppo
- più facile sviluppare siti coerenti dal punto di vista grafico
- Facilità nella manutenzione del sito
- se si vuole cambiare uno stile si cambia in un posto solo
Stesso contenuto in più stili
- Diversi fogli di stile possono essere applicati alla stessa pagina
- fogli di stili diversi per diversi media: lo schermo, la stampa, il proiettore, il dispositivo mobile ...
- stili diversi a seconda delle dimensioni dello schermo
- Possibile il riutilizzo degli stessi contenuti in contesti d'uso diversi
- Possibile la selezione dei contenuti più appropriati in contesti d'uso diversi
Controllo stilistico molto potente
- Con i fogli di stile si riescono a controllare aspetti grafici e tipografici del testo in modo molto puntuale
- Le famiglie di tipi (font, dimensioni, interlinea)
- La sottolineatura dei link
- La possibilità di HOVER sui link
- ... ma anche la disposizione flessibile degli elementi nella pagina
- Divisione della pagina in sezioni o "componenti" anche con stili diversi
- Controllo di margini e bordi
- I colori, gli sfondi, il tiling, lo scorrimento
- Con i CSS3: ombre, sfumature, animazioni e molto altro ...
Regole CSS: sintassi
- Un foglio di stile contiene un insieme di regole stilistiche
- Sintassi di una regola:
- Due sono gli aspetti da padroneggiare:
- quali sono gli elementi HTML selezionati (selettore)
- come cambiare le loro proprietà stilistiche (dichiarazioni)
Regole CSS: esempi
selettore { regola
proprietà: valore;
proprietà: valore;
…
proprietà: valore dichiarazioni
}
body {
margin: 0;
background: white;
font-family: helvetica, arial, sans-serif
}
h1 {
font-weight: bold;
font-size: 24px
}
Selettori
- Selettori per tipo di elemento (per tag)
- per selezionare tutti gli elementi con un certo tag
Esempio: h1 {text-align: center}
un titolo di primo livello centrato
- Selettori ID
- per selezionare l'elemento che abbiamo identificato (nel codice HTML) in maniera univoca mediante l’attributo id
- Selettori CLASS
- per selezionare elementi che abbiamo dichiarato (nel codice HTML) come appartenere a una certa classe
- Selettori contestuali
- per selezionare elementi sulla base del loro contesto (es. solo quelli che compaiono dentro altri elementi)
Selettori di elementi singoli (per ID)
- È possibile definire stili su singoli elementi HTML, identificati da un nome unico, fornito come valore dell'attributo id
- Esempio:
<p id="saluti">Saluti e baci ... </p>
#saluti {
font-size: 11px;
margin-top: 25px
}
oppure p#saluti
Nota: si assume che ci sia un solo elemento con un certo id in una pagina
Selettori classe (CLASS)
- Possiamo definire una classe da usare per applicare uno stesso stile a un certo numero di elementi. La classe può essere usata ...
- ... per specializzare un tag esistente, ad esempio h2:
HTML: <h2 class="red">Getting started</h2>
CSS: h2.red {color: red}
- o si può definire una classe generica da usare per specializzare un qualunque elemento:
HTML: <h2 class="smaller">Testo piccolo</h2>
<p class="smaller red">Tutto qui dentro è più piccolo ...
e rosso</p>
CSS: *.smaller {font-size: 80%}
Selettori contestuali
- I selettori contestuali sono limitati nell’applicazione a un contesto: un tag, un elemento …
- Si presentano come una sequenza di selettori, eventualmente combinati con operatori
- Possono essere:
- Selettori discendenti
- Selettori figlio
- Selettori di adiacenza
- ...
L'albero del documento
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My <em>home</em> page</h1>
<p>
Welcome to my home page! Let me
tell you about my favorite
<em>composers</em>:
</p>
<div>
<ul>
<li> Elvis Costello </li>
<li> Johannes Brahms </li>
<li> George Brassens </li>
</ul>
</div>
</body>
</html>
Selettori discendenti
-
Definiscono stili che si applicano solo ad elementi all’interno di altri elementi (tag):
HTML: <h1>Questo titolo è <em>molto</em> importante</h1>
CSS:
h1 { color: red }
em { color: red }
h1 em { color: blue }
L’enfasi è blu nel contesto di un titolo rosso altrimenti è rossa
ol a em { font-weight: bold }
Il testo enfatizzato dentro un’ancora dentro una lista ordinata viene reso in grassetto
Selettori figlio
Selettori di adiacenza
I paragrafi sono normalmente rientrati con eccezione del
primo paragrafo immediatamente seguente un titolo di primo
livello.
DIV e SPAN: elementi generici
-
Servono per creare un elemento HTML a cui applicare gli stili. Una sorta di contenitore generico di porzioni di documenti.
-
Ne esistono di due tipi
- Elementi di tipo “blocco”: <div> ... </div>
provocano una interruzione di riga prima e dopo
-
Elementi "in linea": <span> ... </span>
- Gli attributi
- id: per dare un nome unico
- class: per dire che appartiene a una certa classe (tipo)
- Non abusarne: marcare gli elementi per il loro ruolo semantico, se possibile.
Tre modi di usare gli stili
- Foglio di stile in un file esterno e riferito nella testa del documento
- Stili definiti direttamente nella testa del documento (embedded)
-
Stili definiti sugli elementi del documento (inline) mediante l'attributo style
Fogli di stile esterni
- Passi da seguire:
- Si crea il foglio di stile con un editore di testo
- Si salva con estensione .css (es stile.css)
- Nella sezione head della pagina (o pagine) HTML a cui vogliamo applicare lo stile:
<head>
…
<link rel="stylesheet" href="stile.css" />
…
</head>
Pagina normale       Pagina con CSS
Fogli di stile embedded
- Se vogliamo definire uno stile che vale solo per il documento:
<head>
…
<style>
<!--
body {
margin: 0;
font-family: helvetica, arial, sans-serif
}
-->
</style>
</head>
Nota: I commenti servono per i browser che non
supportano i CSS e per evitare
l’indicizzazione da parte dei motori di ricerca
Fogli di stile inline :-O
- Per cambiare gli stili localmente in una porzione di un documento
Supponiamo che lo stile del documento preveda il font Arial, dimensione 12px, di colore nero …
<p style="color: red; font-style: italic">
Questo è importante e lo voglio mettere
in rosso e in corsivo!!
</p>
Pagina con CSS (inline)
Fogli di stile in cascata
- CSS = Cascading Style Sheets
- Ma perché in cascata (cascading)?
- Tutti gli aspetti stilistici sono definiti dai browser e continuano a valere, a meno di ridefinizione
- Ogni aspetto stilistico può essere definito più volte e ad uno stesso elemento si possono applicare regole in conflitto. Quale vince?
- Vince sempre la definizione più specifica
- Ma più specifica in che senso?
- Secondo la struttura gerarchica del documento
- Secondo la sorgente di provenienza dello stile
- L'ultimo definito
L'albero del documento
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My <em>home</em> page</h1>
<p>
Welcome to my home page! Let me
tell you about my favorite
<em>composers</em>:
</p>
<div>
<ul>
<li> Elvis Costello </li>
<li> Johannes Brahms </li>
<li> George Brassens </li>
</ul>
</div>
</body>
</html>
Gli stili vengono ereditati a meno di ridefinizione
I selettori e l'albero
- Ogni selettore seleziona un sottoinsieme degli elementi nell'albero
- Esempi
- H1
- LI
- DIV
- P EM
- LI più specifico di UL
- UL più specifico di DIV
- DIV allo stesso livello di H1
- P fratello di H1
Precedenza tra sorgenti di stile
- Esiste inoltre la seguente precedenza tra stili definiti su uno stesso elemento a seconda della provenienza. In ordine di precedenza:
- 1. Stili definiti inline nel corpo del documento (tramite l'attributo STYLE)
- 2. Stili definiti nella testa del documento, dei due tipi:
- - Stili definiti in file esterni riferiti tramite LINK
- - Stili definiti nel tag STYLE nella testa del documento
- 3. Stili definiti dall’utente (con opzioni del browser)
- 4. Stili definiti dai browser (quelli di default)
Precedenza temporale
Esempio
<html>
<head>
<link rel="stylesheet" type="text/css" href="stile.css" />
</head>
<style type="text/css">
h1 {color: green}
</style>
<body style="color: red">
...
<h1 style="color: blue">Come sono?</h1>
<p> Testo che segue il titolo.</p>
</body>
</html>
file stile.css:
h1 {
color: yellow;
}
Esempio
<html>
<head>
<style type="text/css">
h1 {color: green}
</style>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body style="color: red">
<h1 style="color: blue">Come sono?</h1> <p>Testo che segue il titolo.</p>
</body>
</html>
stile.css
Esempio
Sfruttate la cascata!
- Esempio 1
body {
font-family: verdana, arial, sans-serif
}
h1 {font-family: verdana, arial, sans-serif}
La ripetizione per h1 può non essere necessaria
- Esempio 2
body {
margin: 0; tutti i margini a 0
margin-left: 20px; a parte quello sx
}
Regole in forma abbreviata
h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold}
h1 {color: green}
h1 {text-align: center}
h1 {color: green}
h1 {color: red}
*.smaller {font-size: 9px}
h1 {font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal}
h1, h2, h3 {font-weight: bold}
h1 {color: green;
text-align: center}
h1 {color: red}
.smaller {font-size: 9px}
h1 {font: 36pt serif}
Selettori mediante pseudo-classi
- Selettori che si applicano ad elementi in un particolare 'stato'; sono classi “fantasma” che non sono indicate nel file HTML ma sono riconosciute dal browser
- Vediamo per ora queste pseudo-classi
:first-child | un elemento che compare come primo figlio |
li:first-child | primo elemento di una lista |
:last-child | l’ultimo figlio dell'elemento padre |
div#content p:last-child | ultimo paragrafo dentro il div con id 'content' |
li:last-child | ultimo elemento di una lista |
li:nth-child(n) | elemento n-esimo di una lista |
li:nth-child(even) | elemento figlio in posizione pari ('odd' per dispari) |
Indicazioni sui fogli di stile
- Meglio stili esterni (in file css collegato), nella head (embedded) o sull'elemento (inline)?
- Esterni: la migliore soluzione
- Embedded (incorporati): può essere accettabile se gli stili servono solo in quella pagina, ma si può caricare anche un file CSS diverso per le regole specifiche della pagina...
- Inline :-Q: di solito è un "toppino" messo per aggiustare le cose: ripensare alle regole, creare una nuova regola ...
- Fogli di stile del tutto separati per ogni media?
- Un foglio di stile per ogni pagina?
Una regola per tutte ...
- La regola è semplice: non replicare MAI le regole!
- Il foglio di stile deve essere leggero e gestibile
- Il foglio di stile deve agevolare l'aggiornamento del sito
- Il foglio di stile deve essere indipendente dai contenuti specifici
- Corollari:
- Corollario 1: due o più ID con lo stesso stile giustificano una nuova classe: no #img, #img2, #img3 ... con stili simili; stessa cosa per #sezione1, #sezione2, #sezione3 ...
- Corollario 2: astrarre le regole generali e poi pensare alle regole specializzate
Conclusioni
- Perché è una buona idea usare gli stili
- Regole, selettori, attributi, valori
- Stili esterni, embedded e inline
- L'albero del documento
- Regole di precedenza degli stili
- Prossimamente
- Esercitazione sui selettori
- Stili per la tipografia