CSS
12
CSS CSS CASCADING STYLE SHEETS CASCADING STYLE SHEETS : : Fogli di stile a cascata • Definisce il modo in cui verranno Definisce il modo in cui verranno visualizzati gli visualizzati gli elementi di una pagina html (o XML) in elementi di una pagina html (o XML) in un browser. un browser. • Permette di gestire il layout di una Permette di gestire il layout di una pagina pagina indipendentemente dal contenuto. indipendentemente dal contenuto. • Permette di aggiornare il layout di Permette di aggiornare il layout di piu pagine piu pagine modificando un solo file di modificando un solo file di estensione .css estensione .css Uno foglio di stile Uno foglio di stile:
description
CSS. INSERIMENTO IN UN DOCUMENTO E’ POSSIBILE ALLEGARE UN FOGLIO DI STILE ESTERNO :. SINTASSI. Elementi a cui applicare regole. Pseudoelementi :. CSS: Classi di stile. Restrizioni su applicazione classi. Pseudoclassi :. Selezione per ID. Selettori contestuali. Stili inline. - PowerPoint PPT Presentation
Transcript of CSS
CSSCSS
CASCADING STYLE SHEETSCASCADING STYLE SHEETS: : Fogli di stile a cascata
• Definisce il modo in cui verranno visualizzati gliDefinisce il modo in cui verranno visualizzati gli elementi di una pagina html (o XML) in un browser. elementi di una pagina html (o XML) in un browser.• Permette di gestire il layout di una paginaPermette di gestire il layout di una pagina indipendentemente dal contenuto. indipendentemente dal contenuto. • Permette di aggiornare il layout di piu paginePermette di aggiornare il layout di piu pagine modificando un solo file di estensione .css modificando un solo file di estensione .css• Permette la sovrapposizione a cascata di stili diversiPermette la sovrapposizione a cascata di stili diversi per elementi annidati. per elementi annidati.
Uno foglio di stileUno foglio di stile:
INSERIMENTO IN UN DOCUMENTOINSERIMENTO IN UN DOCUMENTO E’ POSSIBILE ALLEGARE UN FOGLIO DI STILE ESTERNOE’ POSSIBILE ALLEGARE UN FOGLIO DI STILE ESTERNO:: html:html:
attraverso il tag <link> ed i suoi attributiattraverso il tag <link> ed i suoi attributi:
XML:XML:Attraverso l’istruzioneAttraverso l’istruzione:<?xml-stylesheet type=“text/css” href=“nomefile.css”>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
SINTASSI SINTASSI
Un foglio di stile è un documento costituito da un Un foglio di stile è un documento costituito da un insieme di regole di stile:insieme di regole di stile:
La sintassi per una regola di stile è:La sintassi per una regola di stile è:
SelettoreSelettore { {proprietà1proprietà1: valore; : valore; proprietà2proprietà2: valore}: valore}
E’ anche possibile raggruppare più selettori che E’ anche possibile raggruppare più selettori che condividono le stesse proprietà:condividono le stesse proprietà:
Selettore1, Selettore2Selettore1, Selettore2 { {prop1prop1: val;: val;prop2prop2: val}: val}
Elementi a cui applicare regoleElementi a cui applicare regole
E’ possibile specificare allargamenti o restrizioniE’ possibile specificare allargamenti o restrizioni ulteriori utilizzando: ulteriori utilizzando:
• Pseudoelementi:Pseudoelementi:• ClassiClassi• Selettore.ClasseSelettore.Classe• PseudocalssiPseudocalssi• IDID• Selettori contestualiSelettori contestuali
Il selettore specifica a quale elementi saranno Il selettore specifica a quale elementi saranno applicate le regole di stile impostate nelle {}applicate le regole di stile impostate nelle {}
Pseudoelementi Pseudoelementi :
Esistono 4Esistono 4 pseudoelementipseudoelementi definiti nelle specifichedefiniti nelle specifiche CSS2CSS2::
SintassiSintassi: : selettoreselettore:pseudolemento {:pseudolemento {prop1prop1: val}: val}
first-letter Solo alla prima lettera del contenuto elemento
first-line Solo alla prima lineadel contenuto elemento
before Solo al contenuto elemento precedente
after Solo al contenuto elemento successivo
CSS: Classi di stileCSS: Classi di stile
Tutti gli elementi a cui e’ applicata la classe avrannoTutti gli elementi a cui e’ applicata la classe avranno
Il layout definito in { }:Il layout definito in { }:
Sintassi definizione:Sintassi definizione:.nomeclasse:.nomeclasse: { {prop1: prop1: valore }valore }
Applicazione ad un tag:Applicazione ad un tag:<titolo CLASS=“nomeclasse”>bla bla </titolo><titolo CLASS=“nomeclasse”>bla bla </titolo>
Restrizioni su applicazione classiRestrizioni su applicazione classi
E’ possibile limitare i tipi di elementi che potranno ricorrere alla E’ possibile limitare i tipi di elementi che potranno ricorrere alla
classe definita utilizzando la sintassi: classe definita utilizzando la sintassi:
selettoreselettore.classe {.classe {propprop: val}: val}
In tal caso solo gli elementi In tal caso solo gli elementi selettoreselettore
potranno richiamare lo stile di potranno richiamare lo stile di classeclasse
Pseudoclassi Pseudoclassi :
Nelle specifiche CSS sono definite anche diverse pseudoclassi: Nelle specifiche CSS sono definite anche diverse pseudoclassi:
SintassiSintassi: : selettoreselettore:pseudoclasse {:pseudoclasse {prop1prop1: val}: val}
:focus Rif Elemento attivo
:first-child Rif.Primo elemento figlio.
:link :visited etc. Collegamenti ipertestuali
:lang Elementi che utilizzano lingua specificata
Selezione per IDSelezione per ID
E’ possibile differenziare gli elementi dello stesso tipo utilizzandoE’ possibile differenziare gli elementi dello stesso tipo utilizzando
Un’ ID con le sue specifiche proprietà:Un’ ID con le sue specifiche proprietà:
selettoreselettore.#nomeID {.#nomeID {propprop: val}: val}
In tal caso solo uno tra gli elementi In tal caso solo uno tra gli elementi selettoreselettore potràpotrà
richiamare lo stile di richiamare lo stile di #nomeID #nomeID
(L’ ID e’ univoca all’interno del documento XML o html)(L’ ID e’ univoca all’interno del documento XML o html)
Selettori contestualiSelettori contestuali
E’ possibile differenziare lo stile che gli elementi dello stesso tipoE’ possibile differenziare lo stile che gli elementi dello stesso tipo
Devono adottare a seconda delc ontesto in cui appaionoDevono adottare a seconda delc ontesto in cui appaiono
selettoreselettore elementofiglio { elementofiglio {propprop: val}: val}
In tal caso In tal caso elementofiglioelementofiglio utilizzerà lo stile specificato utilizzerà lo stile specificato
solo se si troverà all’interno dell’elemento solo se si troverà all’interno dell’elemento selettoreselettore
Stili inlineStili inline
E’ possibile creare stili direttamente nel documento che E’ possibile creare stili direttamente nel documento che
deve utilizzarli con l’attributo styledeve utilizzarli con l’attributo style
Es. <p STYLE=“Es. <p STYLE=“propprop: val: val”> bla bla bla </p>”> bla bla bla </p>
In tal caso lo stile sarà applicato solo all’elemento pIn tal caso lo stile sarà applicato solo all’elemento p
EreditarietàEreditarietà
Gli elementi figli ereditano gli stili adottati dai loro elementi genitoriGli elementi figli ereditano gli stili adottati dai loro elementi genitori
Per tanto le proprietà definite negli elementi figli si aggiungeranno Per tanto le proprietà definite negli elementi figli si aggiungeranno
a quelle dei genitori. a quelle dei genitori.
Tali proprietà potranno anche essere modificate dagli elementi 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 stileE’ possibile impedire ad un elemento figlio dimodificare lo stile
stabilito dal genitore utilizzando la parola chiave stabilito dal genitore utilizzando la parola chiave !important:!important:
paragrafo paragrafo { { colorcolor: red : red !important!important; ….}; ….}
