Appunti sui fogli di stile

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Appunti sui fogli di stile"

Angelina Piccinini
6 anni fa
Visualizzazioni

1 Appunti sui fogli di stile CSS ( Cascading Style Sheets): 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. Il 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. - CSS è case sensitive - STYLE è la proprietà per attribuire lo stile ad uno o più elementi - Per assegnare un valore ad un attributo si usa : - Gli attributi consecutivi sono separati da ; - Molti attributi sono separati da -, anche se fanno parte del nome. 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; text-indent: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 <TITLE> ESEMPIO CON FOGLIO DI STILE IN LINEA </TITLE> <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> Con Css si usano due tag HTML che servono esclusivamente come contenitori: DIV e SPAN. <DIV STYLE= font-size:18px; font-family:arial; color:green >.. </DIV>

2 Differenza tra DIV e SPAN: Div non lascia spazio prima e dopo la chiusura, ma essendo un elemento di blocco, va a capo. Span, essendo un elemento inline non va a capo e continua sulla stessa linea del tag che lo include. Misure di Font Punti: pt, ogni punto rappresenta 1/72 di pollice. I punti si riferiscono allo spazio verticale, la larghezza sarà proporzionale. Es. font-size:24pt Pixel: sono i punti presenti su uno schermo e la loro densità varia in funzione della risoluzione consentita dal video e impostata dall utente. Es. font-size:12px Pollice: un pollice è uguale a 2,54cm. font-size:1in Centimetri: font-size:3cm Percentuale: si riferisce alla grandezza di default impostata nel browser. Se il browser visualizza i font a 12 pixel, un valore del 400% corrisponde a 48 pixel. font-size:smaller indica il font immediatamente più piccolo rispetto a quello di default. 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 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. <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. <head> <TITLE> ESEMPIO CON FOGLIO DI STILE INCORPORATO </TITLE> P {color:rgb(255,0,0)} <P>Questo è il primo paragrafo </P> <P>Questo, invece, è il secondo paragrafo. Lo stile è lo stesso </P>

3 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. <TITLE> ESEMPIO CON FOGLIO DI STILE INCORPORATO </TITLE> BODY {font-size:18pt; color:rgb(255,255,0)}? Proviamo a vedere cosa succede al body col foglio di stile incorporato I SELETTORI - esistono molti tipi di selettori - Servono a specificare gli elementi sui quali applicare lo stile - possono essere: o Selettori di elemento o Selettori di classe (si possono raggruppare più elementi in una classe) Per selezionare uno specifico 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 <TITLE> ESEMPIO CON SELETTORI </TITLE> #Primo {color:rgb(255,0,0)} <P ID="Primo"> Questo e' il primo paragrafo </P> <P> Questo e' il secondo paragrafo </P> Così coloreremo solo il primo paragrafo. LE CLASSI

4 Una classe serve a raggruppare logicamente elementi anche di tipo diverso Definizione di classe: <STYLE [type= text/css ]>.NomeClasse1 {attributo1:valore1;..} La stessa classe può essere assegnata a elementi di tipo diverso. Se vlgliamo 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 <head> <TITLE> ESEMPIO CONCLASSI </TITLE>.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; } <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> Ogni elemento HTML supporta l attributo CLASS I FOGLI DI STILE ESTERNI (External Style Sheet) Sono fogli in un file esterno nel quale si specificano tutti gli stili, anche le classi. Possono essere utili in presenza di numerose pagine. I fogli esterni non hanno formattazione e si registrano con estensione.css. < HEAD > <LINK Rel= Stylesheet HREF= esempio.css TYPE="text/css"> <P CLASS="Codice"> Primo P </P>

5 <P CLASS="Pseudo"> Secondo P </P> File esempio.css p.codice {color: RGB(255,0,0} p.pseudo {color: RGB(0,0,255}

Documenti analoghi

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets