CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .
-
Upload
xaviera-nobile -
Category
Documents
-
view
215 -
download
0
Transcript of CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .
![Page 1: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/1.jpg)
CSS
Cascading Style SheetCSS2 – CSS/P
![Page 2: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/2.jpg)
The goal: see this site
http://www.csszengarden.com
![Page 3: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/3.jpg)
Style: local definition
<html><head></head><body>
<h1 style="color:blue;">primo capitolo</h1>nel mezzo del cammin di nostra vita<h1 style="color:blue;">secondo capitolo</h1>mi ritrovai per una selva oscura<h1 style="color:blue;">terzo capitolo</h1>che la diritta via m'era smarrita</body></html>
![Page 4: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/4.jpg)
Style: definition of a page style
<html><head><style>h1 {color:blue;}</style></head><body><h1>primo capitolo</h1>nel mezzo del cammin di nostra vita<h1>secondo capitolo</h1>mi ritrovai per una selva oscura<h1>terzo capitolo</h1>che la diritta via m'era smarrita</body></html>
![Page 5: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/5.jpg)
Style: definition of a shared style
<html><head><link rel="StyleSheet" type="text/CSS" href="../common/lodeStyles.css" ></head><body><h1>primo capitolo</h1>nel mezzo del cammin di nostra vita<h1>secondo capitolo</h1>mi ritrovai per una selva oscura<h1>terzo capitolo</h1>che la diritta via m'era smarrita</body></html>
![Page 6: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/6.jpg)
Style: stile condiviso - documentazione
A single style may also be given through multiple style sheets:
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css"><LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css"><LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">
In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.
![Page 7: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/7.jpg)
Style: stile condiviso - documentazione
Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style.
A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.
An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.
![Page 8: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/8.jpg)
Elementi di formattazione
color:colorbackground-color:colorbackground-image:uri
font-family:namefont-size:xx-small|x-small|small|medium|large|x-large|xx-large|
larger|smaller|absoluteSize|relativeSize|percentage|lenghtfont-style:normal|italicfont-weight:bold|bolder|lighter|normal|100|200|...|800|900
![Page 9: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/9.jpg)
Unita’ di lunghezza
LUNGHEZZE ASSOLUTE:Sistema Internazionalecm centimetrimm millimetri
Unita’ anglosassoniin inch (pollici)pt point:1/72 pollicepc pica:12 point=1/6 pollice
System dependent:px pixel
LUNGHEZZE RELATIVE:em altezza del font dell’elementoex altezza estesa del font dell’elemento
![Page 10: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/10.jpg)
Elementi di formattazione
line-height:normal|length|percentage
text-align:left|center|right|justifytext-decoration:blink|line=through|overline|underlinetext-indent:lenght|percentagetext-transform:none|capitalize|uppercase|lowercase
![Page 11: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/11.jpg)
Esempio di cascata di stili
<HTML><HEAD>
<STYLE TYPE="text/css">p {font-size:24pt;color:green;border-width:thick;border-style:ridge;border-color:red}p.red {color:red}
</STYLE></HEAD><BODY>
<p class="red">Pippo</p><div style="background:orange;border-color:green">
<p>Pluto</p><p class="red" style="font-size:12pt;background:yellow">Topolino</p>
</div></BODY>
![Page 12: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/12.jpg)
Elementi di formattazione
Element width
Element height
Box topBox left
Box width
Box height
MarginSpace(transparent)
Border Space
Padding Space
ContentSpace
![Page 13: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/13.jpg)
Elementi di formattazione
border-bottom-width,border-top-width,border-right-width,border-left-width:thin|medium|thick|n
border-color:colorborder-style:double|groove|none|inset|outset|ridge|solidborder-width:thin|medium|thick|length
margin:thicknessmargin-bottom,margin-left,margin-right,margin-top :thickness
padding :thicknesspadding-bottom,padding-left,padding-right,padding-top :thickness
![Page 14: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/14.jpg)
Elementi di formattazione - liste
<LI>
<OL> line-style:decimal|lower-alpha|lower-roman|upper-alpha|upper-roman
<UL>line-style:circle|disc|square
![Page 15: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/15.jpg)
Caratteristiche avanzate
Selettore di adiacenza H1+H2 {color:blue}I blocchi H1 e H2 consecutivi
Selettore Padre-figlio BODY > P{color:red}I Paragrafi direttamente contenuti nel BODY
Selettore di attributo P[ALIGN]{color:red}Individua solo i <P ALIGN=…>
P[ALIGN=“left”]{color:red}Individua solo i <P ALIGN=“left”>
*[ALIGN=“left”]{color:red}Individua solo qualunque tag con attributo ALIGN=“left”
![Page 16: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/16.jpg)
Caratteristiche avanzate
Pseudo-elementiP:first-letter prima letteraP:first-line prima linea
Pseudo-classiA:link ancore non visitateA:active ancore nell’atto di essere cliccateA:visited ancore visitate
![Page 17: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/17.jpg)
Esempio di posizionamento: CSS-P
<HTML><HEAD>
<STYLE TYPE="text/css">#aposition{position:relative;left:30;top:20}a {color:red}p {font-size:24pt;color:green;border-width:thick;
border-style=ridge;border-color=red}p.red {color:red}</STYLE>
</HEAD><BODY>
<p class="red">Pippo</p><div style="background:orange;border-color=green;
position:absolute;left:100;top:150"><p style="padding-left:20;margin:20">Pluto</p><span id="aposition">
<p class="red" style="font-size:12pt;background-color:yellow">Topolino</p>
</span></div>
</BODY></HTML>
![Page 18: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/18.jpg)
Elementi posizionabili – CSS/P
Specificazione del tipo di posizionamento:position:absolute|relative
Specificazione della posizione:top:sizeleft:size
Specificazione della dimensione: width:sizeheight:size
Specificazione del tipo di visibilita’:visibility:hidden|inherit|show
![Page 19: CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site .](https://reader035.fdocuments.net/reader035/viewer/2022070312/5542eb4f497959361e8bf031/html5/thumbnails/19.jpg)
Elementi posizionabili – CSS/P
Clip:rect(top right bottom left) Taglia un elemento lasciandolo al suo posto
z-index:nstabilisce l’ordine di visualizzazione degli elementi sovrapposti