CSS ( Cascading Style Sheets)
Fogli di Stile
Linguaggi di formattazione stilistica e
strutturale di un documento HTML o
di una serie di documenti in cascata.
Può aggiornare lo stile di un
documento interno o di uno o più
elementi HTML.
CSS può essere implementato in tre
modi diversi
• Direttamente su un elemento HTML (Fogli di
stile in linea), è legato ad un singolo elemento;
• Nell’Header della pagina (Fogli di stile
incorporati), agisce su tutti gli elementi della
pagina;
• In un file esterno con estensione .CSS (Fogli di
stile esterni), agisce su più documenti.
FOGLI DI STILE IN LINEA
• si usano quando è necessario impostare lo stile ad uno
specifico elemento o blocco di elementi, senza che questo
influisca sulle altre parti del documento.
Sintassi: <TagHtml=”attributo1:valore1; ”attributo2:valore2;
…”attributon:valoren”>
È possibile inserire contemporaneamente più stili (più
attributi di stile).
<P STYLE=”color:RGB(0,0,255); text-align:justify; textindent:12px”>
Ciao a tutti
</P>
Il tag di fine paragrafo è obbligatorio se non si vuole applicare lo
stesso stile agli oggetti successivi.
Esempio con fogli di stile in linea
<HTML>
<HEAD>
<TITLE> ESEMPIO CON FOGLIO DI STILE IN LINEA
</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color:RGB(0,0,255);
background:magenta">Esempio di H1 </H1>
<P STYLE="color:RGB(0,0,255); background:magenta">
Esempio di P </p>
</BODY>
</HTML>
Il documento precedente visualizza
quanto segue
Esempio di H1
Esempio di P
FOGLI DI STILE INCORPORATI
• Si usano quando allo stesso stile fanno
riferimento diversi elementi HTML.
• Lo stile viene specificato nella sezione HEAD
mediante i tag <STYLE> e </STYLE>
• I fogli di stile incorporati possono essere usati
con i fogli di stile in linea, questi ultimi hanno
priorità rispetto a quelli inseriti nella Head.
SINTASSI
<HEAD>
<STYLE [type=”text/css”]
Specifica il formato
MIME del foglio, text/jass per javascript
Selettore1 {attributo1:valore1; attributo2:valore2;
….attributon:valoren}
delimitano il blocco
Selettore2 {attributo1:valore1; attributo2:valore2;
….attributon:valoren}
</STYLE>
Selettore specifica l’elemento/i ai quali
applicare lo stile.
</HEAD>
ESEMPIO1 Fogli di stile incorporati
<HTML>
<HEAD>
<TITLE> ESEMPIO CON FOGLIO DI STILE INCORPORATO </TITLE>
<STYLE TYPE="text/css">
P {color:RGB(255,0,0)}
</STYLE>
</HEAD>
<BODY>
<P>Questo è il primo paragrafo </P>
<P>Questo, invece, è il secondo paragrafo. Lo stile è lo stesso </P>
</BODY>
</HTML>
Fogli di stile incorporati
• Tutto ciò che si troverà all’interno di qualsiasi
paragrafo sarà visualizzato con lo stile
impostato a inizio pagina.
• Lo stile può essere associato a qualsiasi
elemento di HTML, se si associa lo stile
all’elemento BODY, lo stile definito agirà su
tutta la pagina.
ESEMPIO2 Fogli di stile incorporati
<HTML>
<HEAD>
<TITLE> ESEMPIO CON FOGLIO DI STILE INCORPORATO </TITLE>
<STYLE TYPE="text/css">
BODY {font-size:18pt; color:RGB(255,255,0)}?
</STYLE>
</HEAD>
<BODY>
Proviamo a vedere cosa succede al body col foglio di stile
incorporato
</BODY>
</HTML>
Selettori Fogli di stile incorporati
- esistono molti tipi di selettori
- Servono a specificare gli elementi sui quali
applicare lo stile
- possono essere:
• Selettori di elemento
• Selettori di classe (si possono raggruppare più
elementi in una classe)
Selezionare un elemento
Si sfrutta la proprietà ID, che serve ad identificare
un elemento, assegnando un nome logico.
ID=”NomeLogico”
Es. <P ID=”Primo”> ID assegna un nome univoco,
non ci sono due elementi con lo stesso nome
#NomeLogico Per riferirci ad un elemento al
quale abbiamo assegnato un nome
Esempio selettori
<HTML>
<HEAD>
<TITLE> ESEMPIO CON SELETTORI </TITLE>
<STYLE TYPE="text/css">
#Primo {color:RGB(255,0,0)}
</STYLE>
</HEAD>
<BODY>
<P ID="Primo"> Questo e' il primo paragrafo </P>
<P> Questo e' il secondo paragrafo </P>
</BODY>
</HTML>
• Così coloreremo solo il primo paragrafo
Le Classi
Una classe serve a raggruppare logicamente elementi
anche di tipo diverso
Definizione di classe:
<STYLE [type=”text/css”]>
.NomeClasse1 {attributo1:valore1; …..}
</STYLE>
La stessa classe può essere assegnata a elementi di tipo
diverso. Se vogliamo applicare lo stile solo a elementi
di un certo tipo all’interno di una classe, nel selettore,
prima del punto, dobbiamo specificare il tipo
dell’elemento: TipoElemento.NomeClasse
Esempio Classi
<HTML>
<head>
<TITLE> ESEMPIO CONCLASSI </TITLE>
<STYLE TYPE="text/css">
.Nuovo {
/* da notare che tra il punto e il nime della classe non c'è spazio */
font-family:Verdana, Arial, Helvetica;
color:red;
font-weight: lighter;
font-style: italic;
}
</STYLE>
</HEAD>
<BODY>
<P CLASS="Nuovo"> Questo e'un paragrafo con lo stile della classe Nuovo </P>
<H2 CLASS="Nuovo"> Questa e' un'intestazione con lo stesso stile </H2>
</BODY>
</HTML>
Scarica
