Css - Appunti

Cascading Style Sheets
Fogli di stile a cascata
I CSS:
 servono per definire lo stile di presentazione di
un documento HTML o di alcuni suoi elementi;
 permettono di ottenere una separazione tra
contenuto e layout (struttura).

CSS 1 dal 1996
CSS2 dal 1998
CSS 2.1 dal 2011 – versione supportata da tutti i browser
CSS 3 specifiche non ancora pubblicate. Prevedono: nuove
proprietà – suddivisione in moduli –
N.B.: non tutti i browser li supportano!
Versioni:

Un foglio di stile CSS è costituito da una sequenza di
regole. Ogni regola è composta da:
• un selettore: che definisce la parte di documento a cui
si applica lo stile;
• dichiarazioni racchiuse tra parentesi graffe (e ognuna
terminata da ;) a loro volta identificate da:
• una proprietà;
• un valore.
selettore { proprietà1:valore1; proprietà2:valore2; ...}
p { font-family:Arial; font-size:12pt; }

I fogli di stile CSS possono essere:
• dentro al
documento
.html. In questo
caso si dicono:
INTERNI
• in un altro file. In
questo caso si
dicono:
ESTERNI
N.B.: il risultato finale non cambia!
In uno stesso documento possono essere inseriti stili
con diverse modalità!!!
File . html con
contenuto del
documento e stili
File . html con
contenuto del
documento
File . css con stili

In generale, viene applicata la regola più vicina
all’elemento nel codice del documento.
L’ordine, se le dichiarazioni degli stili sono fatte
nell’ordine più corretto e logico, è quindi il
seguente: gli stili in linea prevalgono su quelli
incorporati che a loro volta prevalgono su quelli
collegati.

Gli stili interni al documento possono essere
posizionati:
1. direttamente nel tag di riferimento tramite
l'attributo style (in linea o inline style);
2. all'interno di un tag <style> (incorporati o
internal style sheet);

1. CSS posizionato direttamente nel tag di riferimento tramite
l'attributo style (in linea o inline style):
<html>
<head>
<title >Pagina di prova </title >
</head>
<body>
<h1 style ="color: blue;">Questo titolo deve
essere blu </h1>
<p>Contenuto della pagina di prova </p>
</body>
</html>

2. CSS all'interno di un tag <style> (incorporati o internal style
sheet)
<html>
<head>
<style type =" text / css ">
h1 { color: blue; }
</ style >
</head>
<body>
<h1>Questo titolo deve essere blu </h1>
</body>
</html>
<html>
<head>
h1 { color: blue; }
</ style >
</head>
<body>
</body>
</html>

Gli stili esterni al documento possono essere
richiamati:
1.dal tag <style> (esterni o external style sheet);
2.dal tag <link> (esterni o external style sheet).

3. CSS importato dal tag <style> (esterni o external style sheet)
File .html File extfile.css
<html>
<head>
@import url ( extfile .css)
</ style >
</head>
<body>
</body>
</html>
h1 {color:
blue; }

4. CSS indicato dal tag <link> (esterni o external style sheet)
File .html File extfile.css
<html>
<head>
<link type =" text / css " rel ="
stylesheet " href ="extfile.css">
</head>
<body>
</body>
</html>
h1 {color:
blue; }

VANTAGGI SVANTAGGI
CSS IN LINEA
• Agiscono su singole istanze
all'interno della pagina,
senza influenzare il resto
della pagina.
• Non separano stile da
contenuto
• Non dinamici come i CSS
esterni
CSS INCORPORATI
• Trasportabilità (il file
contiene sia contentuto che
stili)
• Dinamicità ridotta
• Ridondanza
CSS ESTERNI
• Modificare lo stile di più file
.html
• Non appesantiscono i file
.html
• Caricamento delle pagine
più veloce. Il css viene
caricato la prima volta e poi
solo richiamato.
• Trasportabilità (ci vuole
sempre anche il file .css)

La sintassi della regola CSS è:
selettore { proprietà1:valore1; proprietà2:valore2; ...}
dove il selettore può essere costituito da:
1.un tag html
h1 {color: green;}
1.un carattere jolly * (selettore universale)
* {color: red;}

Un selettore può avere diverse classi e questo permette ad uno stesso oggetto
HTML di avere differenti stili, a seconda della classe a cui appartiene.
Selettore.classe { proprietà1:valore1; proprietà2:valore2}
<html>
<head>
h1.title { color: blue; }
h1.sutitle { color: red; }
</ style >
</head>
<body>
<h1 class="title">Questo titolo deve essere blu </h1>
<h1 class=“subtitle">Questo titolo deve essere
rosso</h1>
</body>
</html>

E’ possibile creare un selettore di classe senza
specificare a quale tag sarà applicato lo stile.
Esempio
<html>
<head>
.testorosso { color: red; }
</ style >
</head>
<body>
<h1 class="testorosso">Questo titolo deve essere rosso </h1>
<p class=“testorosso">Questo paragrafo deve avere il testo
rosso</p>
</body>
</html>

Css - Appunti

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Css - Appunti

Ähnlich wie Css - Appunti (20)

Css - Appunti