CSS interni CSS interni

cli.di.unipi.it
  • No tags were found...

Lucidi

CSS interniSono incorporati direttamente neldocumento e si applicano ad esso soltanto…… Regole stile interneCSS interniRegola semplice:Sel { Prop 1 : Val 1 ; …. Prop n :Val n }Esempioh1{ color: green}Indipendentemente dall’eventuale stile esterno,in questo documento gli headings di livello 1saranno colorati in verde


Regole con liste di selettori!Se vogliamo applicare le stesseproprietà a selettori diversi usiamo laseguente sintassi:ListaSel{Prop 1 : Val 1 ; …. Prop n :Val n }con ListaSel = Sel 1 , Sel 2 , …., Sel mParentesi: div e span! I tag div e span offrono un meccanismo perstrutturare documenti.Blocco di testo 1 Blocco di testo 1Blocco di testo 2 Blocco di testo 2blocco 1blocco 2blocco 1 blocco 2! Div e span possono comparire tra liste di selettorinelle regole di stile


Esempio: liste di selettorip, h1, div{background:#0000ff}….Questo e’ un headingQuesto e’ un paragrafoQuesto e’ un divRegole con classi!Se vogliamo applicare delle proprietà adun selettore, ma non ogni qualvolta vieneusato, usiamo la seguente sintassi perdefinire una classeSel.Name{Prop 1 : Val 1 ; …. Prop n :Val n }!Name è il nome che servirà daidentificativo quando vorremo usareSel con le proprietà definite dalla regola


Regole con classiEsempio:P.pippo{color:red; text-align:center}!Per poter usare il selettore P di classepippo devo fare ricorso all’attributoclassSintassi:Esempio: classip{color: green}p.pippo{color: blue}…….Questo e' un paragrafoQuesto e' un paragrafo diclasse pippo


Regole con pseudo-classi!Se voglio applicare delle proprietà ad unselettore ma solo in conseguenza dialcune azioni dell’utente uso la seguentesintassi:Sel:Keyword{Prop 1 : Val 1 ; …. Prop n :Val n }dove Keyword è una parola riservata dellinguaggio usato nei cssPseudo-classi :KeywordSel:Keyword{Prop 1 : Val 1 ; …. Prop n :Val n }Valori possibili per keyword:!link!visited!active!hoverI primi due si applicano al selettore deilink, mentre gli altri si applicano a tutti iselettori.


Esempio: link, visiteda:link{color: green}a:visited{color: blue}…….Questo e' un linkEsempio: hovera:link{color: green}a:hover{color: blue}…….Questo e' un linkhover: quando il mouse passasopra il link


Esempio: activea:link{color: green}a:active{color: blue}…….Questo e' un linkactive: quando viene premuto ilpulsante del mouseCombinazioni: classi & pseudoSel.classe:Keyword{Prop 1 :Val 1 ; ..;Prop n :Val n }Esempio:a:link{color: green}a.pippo:link{color:red}…….


Esempioh1,!h2,!h3,!h4,!h5{color:!red}h1,!h2,!h3!{color:!blue}h1!!{color:!green}Se ho un elemento usatoin più regole per lastessa proprietà il browserprende l’ultimo valoredefinito.

More magazines by this user
Similar magazines