Cascading Stile Sheets Introduzione ai CSS

Transcript

Cascading Stile Sheets
Introduzione ai CSS
Cascading Style Sheets | Introduzione ai CSS 2/21
I fogli di stile consentono di migliorare la presentazione delle
pagine web evitando di usare in modo inappropriato le istruzioni
HTML che originariamente avevano una funzione di definizione
esclusivamente semantica del contenuto della pagina.
In questo modo:
1) si semplifica il codice delle pagine, si riduce la banda
utilizzata, si produce un html di alto valore semantico.
2) si dispone di migliori strumenti di presentazione (rientri,
interlinea, ecc.) e si semplifica il lavoro di definizione/
mantenimento del layout del sito intero (fogli di stile esterni)
Nell’HTML standard (senza CSS)
1) le istruzioni di formattazione del testo devono essere
inserite direttamente nel tag <body> in prossimità del testo
da formattare;
2) devono essere ripetute ad ogni variazione della
formattazione e contenere il testo da formattare
ad esempio:
<p><font color=”#FF0000” size=”4”><b> tutto questo testo deve
essere corpo 4, colore rosso e grassetto</b></font></p>
Con i CSS, invece:
1) si definisce la regola di formattazione una sola volta, lo si memorizza nel tag <head> o in un file esterno con estensione .css
2) La regola CSS può essere imposta ad un dato tag, oppure può
essere impostata con un nome univoco che consente di applicarla
tramite un attributo (class o id) di uno specifico tag.
Per esempio, nell <head>
.red_b {font-size: 15px; font-weight: bold; color: #FF0000;}
nel <body>
<p class=”red_b”> tutto questo testo deve essere in corpo 15
pixel, colore rosso, grassetto </p>
I CSS possono essere di tre tipi:
1) CSS in linea (inline): quando lo stile viene specificato in
prossimità del testo da formattare (nel tag body);
2) CSS interni (embedded): quando gli stili vengono definiti
all’interno della pagina html nel tag <head> e possono essere
richiamati solo nel tag <body> della pagina stessa;
3) CSS esterni (external): quando gli stili sono definiti in un file
esterno e possono essere condivisi da diverse pagine del sito.
In questa modalità, i CSS sono un potente strumento di gestione
dell’aspetto testuale di un’intero sito: un singolo foglio stile
contenente le regole di formattazione viene applicato a più pagine.
I CSS in sostanza sono delle regole di formattazione definite
in forma testuale che possono essere scritte all’interno dalla
pagina html o in un file esterno di testo con estensione .css,
collegato alla pagina html.
La sintassi di una regola impostata con i fogli stile è:
selettore { proprietà:valore; }
La struttura per dichiarare una regola è
1) selettore
2) parentesi graffa aperta
3) proprietà - due punti - valore - punto e virgola
4) parentesi graffa chiusa
All’interno della regola CSS possono essere dichiarate più
coppie proprietà/valore, separate da punto e virgola ( ; )
selettore { proprietà:valore; altraproprietà:valore; }
Un selettore può identificare un tag HTML generico (p, h1,
h2, ecc.) che si vuole modificare, oppure può indicare una
classe (attributo assegnabile a diversi tag) o un id (attributo
assegnabile ad un unico elemento di una determinata pagina).
Le proprietà definiscono quale caratteristica (colore, sfondo,
interlinea, dim. txt, ecc.) di quell’elemento si vuole definire.
Il valore indica come quella proprietà deve essere modificata.
[ ! ] Se il valore prevede un’unità di misura, tra valore e unità
non ci devono essere spazi (10px è ok, 10 px è sbagliato)
Una regola può essere associata ad generico tag html, per es.:
p {font-size:10px; color: #FFFF00}
La regola viene applicata a tutti i tag indicati nel selettore
(nell’esempio a tutti i <p> della pagina)
Oppure una regola può essere associata ad altri due tipi di
selettori: CLASS (applicabile a più elementi) e ID (applicabile
ad un solo elemento). In questo caso le regole vengono
associate solo ai tag che hanno lo specifico attributo.
Ad esempio:
<p class=”mia_classe”> testo del paragrafo </p>
<p id=”mio_id”> testo del paragrafo </p>
CLASS (applicabile a più tag di una pagina)
Si definisce impostando un nome preceduto dal punto ( . )
.miaclasse { color:#ffffff; size:13px}
si applica assegnando l’attributo class a tutti gli elementi
html che si vogliono formattare
<h1 class=”miaclasse”>titolo formattato</h1>
<p>testo non formattato</p>
<p class=”miaclasse”>altro testo formattato</p>
<h1> e <p> ereditano le caratteristiche assegnate dai
selettori generici, ma a quelli con l’attributo class vengono
aggiunte le caratteristiche specifiche della classe
CLASS + <SPAN>...</SPAN> (tag senza valore semantico)
Il tag <span>...</span> può essere usato per definire porzioni
di testo da presentare secondo un certo stile CSS, senza
attribuire a quella porzione di testo un valore semantico.
Definita una classe nell<head> o in un file .css esterno,
.miaclasse { color:#ffffff; size:13px}
nella pagina è sufficiente racchiudere una o più porzioni di
testo nel tag <span>...</span>, assegnandogli l’attributo
class=”...” che richiama la classe CSS
<p>testo base <span class=”miaclasse”> testo formattato
da .miaclasse </span> altro testo non formattato</p>
ID (applicabile ad un solo elemento per pagina)
Si definisce impostando un nome preceduto da #
#mioid { color:#ffffff; size:13px}
si applica assegnando l’attributo id ad un solo elemento
html di ogni pagina
<h1 id=”mioid”>testo del tag h1 formattato</h1>
<p>testo non formattato</p>
<p id=”mioid”>altro testo non formattato</p> *
* ERRORE! Il <p> con attributo id=”mioid” non viene formattato:
l’ID è già stato usato nella pagina dall’<h1> precedente
Altri selettori o metodi di raggruppamento:
Selettore universale (assegna regola a tutti i tag)
* {color:#ffffff;}
Raggruppamento (assegna la regola a più selettori):
h1,h2,p {color:#ffffff;}
Child selector (assegna ai selettori contenuti in un dato selettore):
div#header p {color:#ffffff;}
Pseudoclassi (assegna regola ad uno stato del selettore):
a:link {color:#ffffff;} /* link a riposo */
a:hover {color:#ff0000;} /* link quando passa cursore */
Alcune proprietà definibili con i CSS (per elementi testo):
font-family: Arial, Helvetica, sans-serif; (specifica famiglia font)
font-size: 10px; (unità di misura px o em *)
color: #ffffff; (specifica colore testo)
line height: 25px; (specifica altezza interlinea)
text decoration: none; | underline; | ... (decorazione testo)
text-align: right; | left; | center; | justify; (giustificazione testo)
* 10px è CORRETTO | 10 px (valore-spazio-u.misura) è SBAGLIATO
Unità di misura: px vs. em
Normalmente con i CSS si definiscono le misure adottando
l’unità di misura px (unità di misura assoluta. 1 pixel = unità
base della rappresentazione a schermo = 1 “punto luminoso”).
Per una progettazione più fluida, almeno per i testi, è possibile
adottare l’unità di misura em (unità di misura relativa. Per
esempio 1.5em = 1.5*misura font ereditata)
Se definisco a 10px la misura dei testi del tag <body> posso
definire la misura del testo di un paragrafo in 1.5em (il testo
risulterà alto 10px*1.5 = 15px) e quella di un <h1> in 2em (20px).
In questo modo, modificando la dimensione del testo del <body>
posso modificare tutti gli altri testi in modo proporzionale.
Proprietà BoxModel definibili con i CSS (per elementi blocco):
width: ... / height: ... (larghezza | altezza)
margin: ... (spazio da elementi esterni)
border: ... (bordo del blocco)
padding: ... (spazio tra bordo ed elementi interni)
border (spessore del bordo)
padding (distanza tra bordo e contenuti)
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue eum iriure dolor.
height
margin (distanza tra blocco e altri blocchi)
width
margin / border / padding possono essere impostati con
valori diversi per ognuno dei quattro lati di un blocco (top,
right, bottom e left)
margin-top
margin-left
border-left
padding-left
border-top
padding-top
ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
eum iriure dolor.
(...)-bottom
(...)-right
Per impostare margin / border / padding con valori diversi per
ognuno dei quattro lati è possibile scrivere le regole separatamente:
p { margin-top:10px;
margin-right:5px;
margin-bottom:1px;
margin-left:7px; }
Oppure (meglio) accorpando tutto in un unica regola:
p { margin:10px 5px 1px 7px; }
top | right | bottom | left (da top in senso orario)
E’ possibile anche accorpare sopra+sotto e destra+sinistra:
p { margin:10px 5px; }
top + bottom | right + left
Per impostare border si devono dichiarare oltre allo
spessore (-width) anche lo stile (-style) ed il colore (-color)
p { border-width: 2px;
border-style: solid;
border-color: #3399FF; }
Oppure (meglio) accorpando tutto in un unica regola:
p { border:#3399FF 2px solid; }
-color | -width | -style
Lo stesso si può fare per bordi specifici:
p { border-top:#3399FF 1px solid;
border-bottom:#FF6633 2px dotted;}
Anomalia di Internet Explorer 5.0:
interpreta border e padding inclusi in width.
width per IE 5.0
margin (distanza tra blocco e altri blocchi)
border (spessore del bordo)
padding (distanza tra bordo e contenuti)
Soluzione: Non dichiarare mai
insiema width, border e padding.
Impostarli separatamente per
elementi nidificati
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue eum iriure dolor.
width
per altri browser
Altre proprietà definibili con i CSS (per elementi blocco):
background-color: imposta colore di sfondo (tipo #3399FF);
background-image: assegna immagine di sfondo;
background-repeat: imposta la ripetizione dell’immagine
di sfondo (no-repeat = non si ripete; repeat-x = ripetizione
orizzontale; repeat-y = ripetizione verticale);
background-position: posizione dell’immagine di sfondo
(bottom, top, center, left, right, o valore in pixel);
display: block (attribuisce forma retangolare a elementi . normalmente inline, in questo modo è possibile controllare Larg. e Alt. );
display: none (nasconde l’elemanto associato ).
CSS / concetti chiave:
Ereditarietà: le regole imposte ad un elemento (ad es.
<body>) ricadono anche sui suoi discendenti (ad es. <p>).
Peso: la regola imposta da un ID (#mioid) è prevalente su
quella imposta da una CLASS (.miaclass) che a sua volta è
prevalente sulla regola imposta da un semplice selettore.
Compatibilità: in linea generale, senza adottare particolari
strategie, i CSS non sono supportati dai browser versione 4.0
o precedenti.
Diversità di rendering: i browser interpretano i css in modo
(più o meno) diverso. Bisogna testare il lavoro fatto sui browser
più diffusi per essere certi della stabilità della visualizzazione.

Cascading Stile Sheets Introduzione ai CSS

Transcript

Documenti analoghi

Programma di WebDesign

PROGRAMMA CORSO WEBMASTER

OSPEDALE CASA SOLLIEVO DELLA SOFFERENZA

Accedi - "Leonardo da Vinci" Borgomanero

Esercitazione 2 - HTML "avanzato" + CSS base

Specifiche - Volagratis

Soluzioni capitolo 11 1

centro italiano firenze