Appunti lezioni Tecnologie web del turismo

Perché i fogli di stile?

Ho progettato un sito con 50 pagine HTML, in cui ho modificato gli attributi dei titoli. Adesso voglio cambiare il colore dei titoli, quante modifiche devo fare?

I fogli di stile permettono di separare le scelte di presentazione dal contenuto. È un'idea preparare un documento separato dal testo per contenere le informazioni necessarie alla formattazione e alla trasformazione dei contenuti a cui si applicano.

HTML + CSS: i contenuti sono nell'HTML, la parte grafica è indicata nel CSS. Nell'HTML c'è il link al file CSS. Di norma si usa un foglio di stile in CSS per tutti i file HTML.

Fogli di stile = vantaggi = possibilità di usare un unico foglio di stile per più documenti, risparmio di tempo e maggiore praticità nella gestione di un sito con tante pagine, possibilità di presentazione che HTML non fornisce.

I fogli di stile sono linguaggi di procedural markup che permettono di applicare in modo omogeneo ed efficiente.

una formattazione agli elementi con cui è marcato il documento. Il Cascading style sheets CSS è il linguaggio di fogli di stile sviluppato per l'HTML. Modello a scatole (box) = una pagina HTML è un insieme di rettangoli disposti sullo schermo: - elemento blocco può contenere altri elementi e lascia una riga bianca - elemento Inline non può contenere altri elementi e il testo intorno a loro non si interrompe. Box model = elementi di ogni scatola: - area del contenuto: zona in cui si trova il contenuto vero e proprio (immagini, testo) - padding: spazio vuoto che si può inserire tra il contenuto e il bordo, è la zona che prende il colore dello sfondo - border: linea di confine che circonda il padding e può cambiare spessore - margin: spazio di dimensioni variabili che separa l'elemento dagli altri. Se cambio il colore dello sfondo di un box, cambio il colore di tutta l'area di contenuto e di padding. La formattazione degli elementi HTML vienetesto fornito utilizzando tag html.

La formattazione di un documento HTML può essere specificata attraverso una lista di statement composti da un selector che identifica l'elemento e una declaration che specifica quali proprietà di formattazione devono essere assegnate. La declaration è delimitata da parentesi graffe, ed è costituita da una serie di coppie proprietà: valore separate dal carattere punto e virgola.

Ad esempio, il selector "p" indica che la declaration si applica agli elementi di paragrafo. La declaration "font-family: Times; font-size: 12pt" specifica che il font-family deve essere "Times" e il font-size deve essere "12pt".

I fogli di stile contengono regole di visualizzazione, ogni regola contiene un elenco di proprietà associate a uno o più tag. Le regole sono racchiuse tra parentesi graffe, le proprietà sono separate da due punti e i valori sono separati da punto e virgola.

Le differenze con HTML sono le seguenti:

• La lista delle proprietà/attributi è racchiusa tra parentesi graffe { }
• Al posto del segno = vengono usati i due punti :
• Le proprietà successive vengono separate da punto e virgola
• Se il nome di un attributo è un nome composto, i nomi vengono separati da trattino (es. background-image)
• Se il nome di un attributo contiene caratteri speciali, come ad esempio gli spazi, è necessario utilizzare le virgolette (es. font-family: "Times New Roman")

valore dell'attributo è composto da più parole, sono necessarie le virgolette " " (es. "sans serif"). La stessa regola si può definire per selettori diversi in una volta sola: selettore1, selettore2 { proprietà: valore; } p, h1 { font-family: Times; }. La stessa regola può definire diversi valori per una proprietà se è previsto selettore { proprietà: valore1 valore2; } SI p { font-family: Times Arial; }. La stessa regola non può definire lo stesso valore per diverse proprietà: selettore { proprietà1 proprietà2: valore; } NO Foglio di stile interno o esterno = Un foglio di stile può essere messo: 1. all'interno di un documento: 2. all'interno di un tag: contenuto <link> (sempre "stylesheet") type:indica il tipo di foglio di stile (sempre "text/css") href: indica dove trovare il foglio distile (dipende da noi...) Vantaggio: si può riutilizzare lo stesso foglio di stile per più documenti HTML, infatti un documento HTML: - non è generalmente isolato, ma parte di un sito Web - le pagine di un sito Web condividono la maggior parte delle caratteristiche tipografiche È possibile gestire la situazione in cui diverse sezioni dello stesso sito Web hanno caratteristiche tipografiche diverse. In questo caso: Si realizza un foglio di stile relativo alle caratteristiche tipografiche comuni a tutti i documenti HTML. Ereditarietà delle proprietà: ogni elemento annidato in un altro eredita le proprietà dell'elemento padre nel foglio di stile: p {color: blue; font-family: Arial;} In questo modo è possibile attribuire le proprietà di formattazione comuni a un insieme di elementi.

elementi assegnandole esclusivamente all'elemento che le contiene.

Ordine di ereditarietà = se ci sono definizioni multiple per lo stesso tag l'ordine in cui le regole vengono applicate è:

1. Definito dal Browser
2. Foglio di stile esterno (External Style Sheet)
3. Foglio di stile interno (Internal Style Sheet)
4. Definizione del tag html (Inline Style)

quello con la numerazione più alta è quello che "vince".

L'ereditarietà è un vincolo debole in quanto indica una proprietà implicita, per assegnare una proprietà di formattazione diversa a un elemento figlio è quindi insufficiente assegnare esplicitamente tale proprietà all'elemento.

Proprietà di formattazione = il linguaggio css dispone di un numero elevato di proprietà di formattazione applicabili a tutti gli elementi html. Un elenco di alcune delle proprietà più usate:

• color: specifica il colore di primo

piano dell'elemento – background-color: specifica il colore di sfondo dell'elemento – text-align: specifical'allineamento orizzontale del contenuto dell'elemento – font-family: specifica il tipo di carattere da utilizzare per il testo contenuto nell'elemento – font-size: specifica la dimensione del carattere – font-style: specifica lo 'stile' del carattere (ad es.: corsivo) – font-weight: specifica il 'peso' del carattere (ad es.: grassetto).

Per impostare il colore del testo si usa la proprietà: color che può assumere gli stessi valori del colore dello sfondo. Es. nel css: p {color:red;}

Per impostare l'allineamento del testo si usa la proprietà: text-align che può assumere i valori: left (allineamento a sinistra), right (allineamento a destra), center (allineamento al centro), justify (giustificato).

Per impostare un'eventuale decorazione del testo si usa la proprietà: text-decoration che può assumere i valori: none (nessuna decorazione), underline (sottolineato), overline (linea sopra il testo), line-through (linea attraverso il testo).

assumere i valori: none: nessuna underline: sottolineato overline: linea sopraline trough: barrato.

Per impostare il colore di sfondo di un box (della pagina, ma anche di un titolo o un elenco...) si usa la proprietà background-color che può avere come valori:

• il nome di un colore (tra i soliti 16)
• un esadecimale (es. #ff00ff)
• le percentuali dei colori: rgb(rrr%,ggg%, bbb%)
• i colori in decimale: rgb (rrr,ggg,bbb)

Esempio: body{background-color: red;}.

Per impostare un'immagine di sfondo si usa la proprietà background-image: url("path/immagine.jpg").

Per impostare la posizione di un'immagine di sfondo si usa la proprietà background-position che può assumere i valori: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, percentuali.

Esempio: body {background-image:url("sfondo.gif")}.

Per impostare la ripetizione di un'immagine di sfondo si usa la

Le proprietà "background-repeat" possono assumere i seguenti valori: - "repeat": ripete l'immagine sia orizzontalmente che verticalmente. - "repeat-x": ripete l'immagine solo orizzontalmente. - "repeat-y": ripete l'immagine solo verticalmente. - "no-repeat": non ripete l'immagine. Per impostare la mobilità o meno di un'immagine di sfondo si utilizza la proprietà "background-attachment" che può assumere i seguenti valori: - "scroll": l'immagine rimane ferma mentre si scorrono le righe della pagina. - "fixed": l'immagine segue lo scorrimento (scroll) delle righe della pagina. Tuttavia, su alcuni browser questa funzionalità potrebbe non funzionare correttamente. I valori che possono essere assegnati alle proprietà dipendono dalle stesse proprietà stesse. Per i colori si utilizza la codifica sRGB già presente nell'introduzione al linguaggio HTML. Per i valori numerici, a differenza degli attributi HTML, è necessario indicare esplicitamente l'unità di misura da utilizzare. I valori simbolici variano a seconda delle proprietà.

delle lunghezze = Una lunghezza si esprime come: segno +/- (opzionale), un numero, un'unità di misura senza spazi nel mezzo

Alcune unità di misura: px: pixel em: dimensione del carattere in: Inches cm: centimetri mm: millimetri

Esempi: 2em,-3px, 4cm .... non mettere spazi vuoti.

Unità di misura = Unità di misura assolute: in (pollici), cm (centimetri), mm (millimetri), pt (punti tipografici) • Unità di misura relative: –em: fa riferimento all'altezza media del carattere dell'elemento genitore. Ad es., se il valore di riferimento è 12pt, 1em = 12pt, 1.5em = 18pt, 2em = 24pt –px (pixel): la dimensione effettiva dipenderà dalla dimensione e dalla risoluzione dello schermo –%: dimensione percentuale relativa all'elemento genitore o al contesto (ad es., la dimensione della finestra del browser).

Nota: se si volesse modificare la dimensione dei caratteri, sarebbe necessario modificare tutte le asserzioni in cui

è presente la proprietà font-size. Specificare nell'elemento BODY la dimensione 'base' del carattere, usando un'unità di misura assoluta (pt), e utilizzare un'unità di misura relativa per tutti gli altri elementi (em). Ad es. body {font-family: Times; font-size: 10pt}, h1 {font-size: 1.6em}, h2 {font-size: 1.4em}, p {font-size: 1.0em}. In questo modo, qualora si volesse modificare la dimensione del carattere, sarà possibile intervenire solo sull'asserzione relativa all'elemento BODY. Ad es. body {font-family: Times; font-size: 12pt}, h1 {font-size: 1.6em}, h2 {font-size: 1.4em}, p {font-size: 1.0em}. Caratteri = font size può anche assumere i valori = xx-small, x-small, small, medium, large, xlarge, xx-large, smaller, larger. Caratteri = font-family che di solito ha come valore una lista di tre tipi (per dare al browser delle alternative se non riuscisse a caricare uno dei tipi della lista) di

cuil'ultimo è una famiglia. Famiglie di caratteri: caratteri ‘