CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina.

Presentazione sul tema: "CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina."— Transcript della presentazione:

1 CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina html (o XML) in un browser. Definisce il modo in cui verranno visualizzati gli elementi di una pagina html (o XML) in un browser. Permette di gestire il layout di una pagina indipendentemente dal contenuto. Permette di gestire il layout di una pagina indipendentemente dal contenuto. Permette di aggiornare il layout di piu pagine modificando un solo file di estensione.css Permette di aggiornare il layout di piu pagine modificando un solo file di estensione.css Permette la sovrapposizione a cascata di stili diversi per elementi annidati. Permette la sovrapposizione a cascata di stili diversi per elementi annidati. Uno foglio di stile Uno foglio di stile:

2 INSERIMENTO IN UN DOCUMENTO E POSSIBILE ALLEGARE UN FOGLIO DI STILE ESTERNO : html: attraverso il tag ed i suoi attributi attraverso il tag ed i suoi attributi: XML: Attraverso listruzione XML: Attraverso listruzione:

3 SINTASSI Un foglio di stile è un documento costituito da un insieme di regole di stile: La sintassi per una regola di stile è: Selettore {proprietà1: valore; proprietà2: valore} E anche possibile raggruppare più selettori che condividono le stesse proprietà: Selettore1, Selettore2 {prop1: val;prop2: val}

4 Elementi a cui applicare regole Elementi a cui applicare regole E possibile specificare allargamenti o restrizioni ulteriori utilizzando: E possibile specificare allargamenti o restrizioni ulteriori utilizzando: Pseudoelementi: Pseudoelementi: Classi Classi Selettore.Classe Selettore.Classe Pseudocalssi Pseudocalssi ID ID Selettori contestuali Selettori contestuali Il selettore specifica a quale elementi saranno applicate le regole di stile impostate nelle {}

5 Pseudoelementi Pseudoelementi : Esistono 4 pseudoelementi definiti nelle specifiche CSS2: Sintassi: selettore:pseudolemento {prop1: val} Sintassi: selettore:pseudolemento {prop1: val} first-letter Solo alla prima lettera del contenuto elemento first-line Solo alla prima linea del contenuto elemento before Solo al contenuto elemento precedente after Solo al contenuto elemento successivo

6 CSS: Classi di stile CSS: Classi di stile Tutti gli elementi a cui e applicata la classe avranno Il layout definito in { }: Sintassi definizione:.nomeclasse: {prop1: valore } Applicazione ad un tag: bla bla Applicazione ad un tag: bla bla

7 Restrizioni su applicazione classi Restrizioni su applicazione classi E possibile limitare i tipi di elementi che potranno ricorrere alla classe definita utilizzando la sintassi: classe definita utilizzando la sintassi: selettore.classe {prop: val} selettore.classe {prop: val} In tal caso solo gli elementi selettore potranno richiamare lo stile di classe

8 Pseudoclassi Pseudoclassi : Nelle specifiche CSS sono definite anche diverse pseudoclassi: Nelle specifiche CSS sono definite anche diverse pseudoclassi: Sintassi: selettore:pseudoclasse {prop1: val} :focus Rif Elemento attivo :first-child Rif.Primo elemento figlio. :link :visited etc. Collegamenti ipertestuali :lang Elementi che utilizzano lingua specificata

9 Selezione per ID Selezione per ID E possibile differenziare gli elementi dello stesso tipo utilizzando Un ID con le sue specifiche proprietà: selettore.#nomeID {prop: val} selettore.#nomeID {prop: val} In tal caso solo uno tra gli elementi selettore potrà richiamare lo stile di #nomeID (L ID e univoca allinterno del documento XML o html)

10 Selettori contestuali Selettori contestuali E possibile differenziare lo stile che gli elementi dello stesso tipo Devono adottare a seconda delc ontesto in cui appaiono selettore elementofiglio {prop: val} In tal caso elementofiglio utilizzerà lo stile specificato solo se si troverà allinterno dellelemento selettore

11 Stili inline Stili inline E possibile creare stili direttamente nel documento che deve utilizzarli con lattributo style Es. bla bla bla Es. bla bla bla In tal caso lo stile sarà applicato solo allelemento p

12 Ereditarietà Ereditarietà Gli elementi figli ereditano gli stili adottati dai loro elementi genitori Per tanto le proprietà definite negli elementi figli si aggiungeranno a quelle dei genitori. Tali proprietà potranno anche essere modificate dagli elementi figli le cui proprietà di stile avranno priorità in caso di difformità. figli le cui proprietà di stile avranno priorità in caso di difformità. E possibile impedire ad un elemento figlio dimodificare lo stile stabilito dal genitore utilizzando la parola chiave !important: paragrafo { color: red !important; ….}