HTML&CSS 5 - Intermediate CSS (2/2)
-
Upload
dinis-correia -
Category
Technology
-
view
1.175 -
download
12
description
Transcript of HTML&CSS 5 - Intermediate CSS (2/2)
![Page 1: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/1.jpg)
&DINIS CORREIA 2011
cbn
5HTMLCSS
![Page 2: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/2.jpg)
CSS PROPRIEDADES DE LAYOUT1
BACKGROUNDS2LISTAS34
![Page 3: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/3.jpg)
CSS
2LISTAS3
⇪
TABELAS4
![Page 4: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/4.jpg)
CSS ⇪
TABELAS4
na sessão anterior...
![Page 5: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/5.jpg)
LINKS
![Page 6: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/6.jpg)
link, visited, hover, focus, active
![Page 7: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/7.jpg)
PROPRIEDADES DE LAYOUT
![Page 8: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/8.jpg)
PROPRIEDADES DE LAYOUT
marginpaddingborderwidthheight
![Page 9: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/9.jpg)
MARGIN
![Page 10: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/10.jpg)
p { margin-‐top: 10px;margin-‐right: 10px;margin-‐bottom: 10px;margin-‐left: 10px;
}
CSS
![Page 11: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/11.jpg)
p { margin: 10px;
}
CSS
![Page 12: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/12.jpg)
top
right
bottom
left <p>
![Page 13: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/13.jpg)
top
right
bottom
left
1
2
3
4 <p>
![Page 14: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/14.jpg)
p { margin-‐bottom: 10px; }
CSS
![Page 15: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/15.jpg)
p { margin-‐bottom: 20px; }
CSS
![Page 16: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/16.jpg)
p { margin-‐bottom: 20px; }
CSS
20px
![Page 17: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/17.jpg)
Todos os elementos inline - com excepção do img - ignoram a propiedade margin.!
![Page 18: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/18.jpg)
p { margin-‐top: -‐14px; }
CSS
![Page 19: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/19.jpg)
p { margin-‐top: -‐14px; }
CSS
![Page 20: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/20.jpg)
p { margin: 10px 0 20px 0; }
CSS
![Page 21: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/21.jpg)
p { margin: 10px 0 20px 0; }
CSS
20px
![Page 22: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/22.jpg)
p { margin: 10px 0 20px 0; }
CSS
![Page 23: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/23.jpg)
BORDER
![Page 24: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/24.jpg)
p { border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
CSS
![Page 25: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/25.jpg)
p { border-‐top-‐width: 1px;border-‐top-‐style: solid;border-‐top-‐color: #ff0000;border-‐right-‐width: 1px;border-‐right-‐style: dotted;border-‐right-‐color: #000;...
}
CSS
![Page 26: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/26.jpg)
p { border: 1px solid #000;
}
CSS
![Page 27: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/27.jpg)
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
![Page 28: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/28.jpg)
CSSp {
border-‐width: 5px;border-‐style: solid;border-‐color: #ff0000;
}
![Page 29: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/29.jpg)
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
![Page 30: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/30.jpg)
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
![Page 31: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/31.jpg)
CSSp {
border-‐width: 1px;border-‐style: dashed;border-‐color: #ff0000;
}
![Page 32: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/32.jpg)
border-‐style: dashed;
border-‐style: dotted;
border-‐style: double;
border-‐style: inset;
border-‐style: groove;
border-‐style: outset;
border-‐style: ridge;
border-‐style: solid;
![Page 33: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/33.jpg)
PADDING
![Page 34: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/34.jpg)
p { padding-‐top: 10px;padding-‐right: 10px; padding-‐bottom: 10px;padding-‐left: 10px;
}
CSS
![Page 35: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/35.jpg)
p { padding: 10px;
}
CSS
![Page 36: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/36.jpg)
p { padding: 10px; }
CSS
z
![Page 37: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/37.jpg)
p { padding: 10px; }
CSS
z
10px
![Page 38: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/38.jpg)
DIMENSÕESwidth height
![Page 39: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/39.jpg)
! Os elementos inline ignoram width e height...
![Page 40: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/40.jpg)
Os elementos inline ignoram width e height... exepto as imagens.
!
![Page 41: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/41.jpg)
p { width: 160px; }
CSS
![Page 42: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/42.jpg)
p { width: 160px; }
CSS
![Page 43: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/43.jpg)
Definir alturas só quando estritamente necessário.!
![Page 44: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/44.jpg)
p { width: 160px;height: auto;
}
CSS
![Page 45: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/45.jpg)
p { width: 160px;height: 20px;
}
CSS
![Page 46: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/46.jpg)
div { min-‐width: 200px;min-‐height: 500px;
}
CSS
![Page 47: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/47.jpg)
div { min-‐width: 200px;min-‐height: 500px;max-‐width: 980px;max-‐height: 800px;
}
CSS
![Page 48: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/48.jpg)
DIMENSÕESoverflow
![Page 49: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/49.jpg)
p { overflow: visible; }p { overflow: hidden; }p { overflow: auto; }p { overflow: scroll; }
CSS
![Page 50: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/50.jpg)
CSS
p { overflow: visible; }
![Page 51: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/51.jpg)
CSS
p { overflow: hidden; }
![Page 52: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/52.jpg)
CSS
p { overflow: auto; }
![Page 53: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/53.jpg)
CSS
p { overflow: auto; }
![Page 54: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/54.jpg)
UNIDADES
![Page 55: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/55.jpg)
px
em%
ABSOLUTAS
RELATIVAS
width: 800px;
width: 20em;
width: 40%;
![Page 56: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/56.jpg)
CSS
p { width: 120px; }
![Page 57: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/57.jpg)
CSS
p { font-‐size: 20px;width: 3em;
}
![Page 58: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/58.jpg)
CSS
p { font-‐size: 20px;width: 3em;
}
20px x 3 = 60px
![Page 59: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/59.jpg)
BOX MODEL
![Page 60: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/60.jpg)
Conteúdo de um elemento
![Page 61: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/61.jpg)
Conteúdo de um elemento
PADDING
BORDER
MARGIN
![Page 62: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/62.jpg)
Conteúdo de um elemento
PADDING
BORDER
MARGIN
WIDTHH
EIG
HT
BOX
![Page 63: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/63.jpg)
CSS
p { width: 120px;border: 2px dotted #000;padding: 3px;margin: 10px;
}
?
![Page 64: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/64.jpg)
CSS
p { width: 120px;border: 2px dotted #000;padding: 3px;margin: 10px;
}
150px
![Page 65: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/65.jpg)
DISPLAY
![Page 66: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/66.jpg)
http://bit.ly/html_elements
![Page 67: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/67.jpg)
p { display: block; }p { display: inline; }p { display: none; }
CSS
![Page 68: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/68.jpg)
CSS
p { display: inline;
}
![Page 69: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/69.jpg)
BACKGROUND
![Page 70: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/70.jpg)
body { background-‐color: #ccc;background-‐image: url(image.gif);background-‐attachment: scroll;background-‐repeat: no-‐repeat;background-‐position: 0 0;
}
CSS
![Page 71: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/71.jpg)
body { background-‐color: #ccc;
}
CSS
![Page 72: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/72.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);
}
CSS
![Page 73: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/73.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;
}
CSS
![Page 74: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/74.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐y;
}
CSS
![Page 75: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/75.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;
}
CSS
![Page 76: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/76.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: scroll;
}
CSS
![Page 77: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/77.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: scroll;
}
CSS
![Page 78: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/78.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: fixed;
}
CSS
![Page 79: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/79.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 0 0;
}
CSS
![Page 80: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/80.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 0 40px;
}
CSS
![Page 81: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/81.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 40px 0;
}
CSS
![Page 82: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/82.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: left top;
}
CSS
![Page 83: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/83.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: right top;
}
CSS
![Page 84: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/84.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: center top;
}
CSS
![Page 85: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/85.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 20% 0;
}
CSS
![Page 86: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/86.jpg)
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 50% 0;
}
CSS
![Page 87: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/87.jpg)
body { background: #ccc url(fundo.gif) no-‐repeat scroll left top }
CSS
-color
-image
-attachment
-repeat -position
![Page 88: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/88.jpg)
LISTAS
![Page 89: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/89.jpg)
list-‐style-‐type
![Page 90: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/90.jpg)
list-‐style-‐type: disc;
list-‐style-‐type: square;
list-‐style-‐type: circle;
list-‐style-‐type: none;
list-‐style-‐type: decimal;
list-‐style-‐type: decimal-‐leading-‐zero;
list-‐style-‐type: lower-‐alpha;
list-‐style-‐type: upper-‐alpha;
list-‐style-‐type: upper-‐roman;
list-‐style-‐type: lower-‐roman;
![Page 91: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/91.jpg)
list-‐style-‐image?
![Page 92: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/92.jpg)
ul { list-‐style-‐type: none;
}ul li {
padding: 0 0 0 20px;background: url(bullet.gif) no-‐repeat 0 2px;
}
CSS
![Page 93: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/93.jpg)
ul { list-‐style-‐type: disc;
}
CSS
![Page 94: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/94.jpg)
ul { list-‐style-‐type: disc;margin: 0;padding: 0;
}
CSS
![Page 95: HTML&CSS 5 - Intermediate CSS (2/2)](https://reader038.fdocuments.us/reader038/viewer/2022102605/54961636b479595e728b4758/html5/thumbnails/95.jpg)
ul { list-‐style-‐type: disc;margin: 0;padding: 0;
}ul li {
margin-‐left: 20px;}
CSS