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.

Presentazione sul tema: "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."— Transcript della presentazione:

1 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.

2 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.

3 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: È possibile inserire contemporaneamente più stili (più attributi di stile). Ciao a tutti Il tag di fine paragrafo è obbligatorio se non si vuole applicare lo stesso stile agli oggetti successivi.

4 Esempio con fogli di stile in linea ESEMPIO CON FOGLIO DI STILE IN LINEA Esempio di H1 Esempio di P

5 Il documento precedente visualizza quanto segue Esempio di H1 Esempio di P

6 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 e 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.

7 SINTASSI <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} Selettore specifica l’elemento/i ai quali applicare lo stile.

8 ESEMPIO1 Fogli di stile incorporati ESEMPIO CON FOGLIO DI STILE INCORPORATO P {color:RGB(255,0,0)} Questo è il primo paragrafo Questo, invece, è il secondo paragrafo. Lo stile è lo stesso

9 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.

10 ESEMPIO2 Fogli di stile incorporati ESEMPIO CON FOGLIO DI STILE INCORPORATO BODY {font-size:18pt; color:RGB(255,255,0)}? Proviamo a vedere cosa succede al body col foglio di stile incorporato

11 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)

12 Selezionare un elemento Si sfrutta la proprietà ID, che serve ad identificare un elemento, assegnando un nome logico. ID=”NomeLogico” Es. 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

13 Esempio selettori ESEMPIO CON SELETTORI #Primo {color:RGB(255,0,0)} Questo e' il primo paragrafo Questo e' il secondo paragrafo Così coloreremo solo il primo paragrafo

14 Le Classi Una classe serve a raggruppare logicamente elementi anche di tipo diverso Definizione di classe:.NomeClasse1 {attributo1:valore1; …..} 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

15 Esempio Classi ESEMPIO CONCLASSI.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; } Questo e'un paragrafo con lo stile della classe Nuovo Questa e' un'intestazione con lo stesso stile