html&css 5 - intermediate css (2/2)
DESCRIPTION
Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: layout properties (margin, padding, border, width and height), backgrounds and lists.TRANSCRIPT
&DINIS CORREIA 2011
cbn
5HTMLCSS
CSS PROPRIEDADES DE LAYOUT1
BACKGROUNDS2LISTAS34
CSS
2LISTAS3
⇪
TABELAS4
CSS ⇪
TABELAS4
na sessão anterior...
LINKS
link, visited, hover, focus, active
PROPRIEDADES DE LAYOUT
PROPRIEDADES DE LAYOUT
marginpaddingborderwidthheight
MARGIN
p { margin-‐top: 10px;margin-‐right: 10px;margin-‐bottom: 10px;margin-‐left: 10px;
}
CSS
p { margin: 10px;
}
CSS
top
right
bottom
left <p>
top
right
bottom
left
1
2
3
4 <p>
p { margin-‐bottom: 10px; }
CSS
p { margin-‐bottom: 20px; }
CSS
p { margin-‐bottom: 20px; }
CSS
20px
Todos os elementos inline - com excepção do img - ignoram a propiedade margin.!
p { margin-‐top: -‐14px; }
CSS
p { margin-‐top: -‐14px; }
CSS
p { margin: 10px 0 20px 0; }
CSS
p { margin: 10px 0 20px 0; }
CSS
20px
p { margin: 10px 0 20px 0; }
CSS
BORDER
p { border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
CSS
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
p { border: 1px solid #000;
}
CSS
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
CSSp {
border-‐width: 5px;border-‐style: solid;border-‐color: #ff0000;
}
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
CSSp {
border-‐width: 1px;border-‐style: solid;border-‐color: #ff0000;
}
CSSp {
border-‐width: 1px;border-‐style: dashed;border-‐color: #ff0000;
}
border-‐style: dashed;
border-‐style: dotted;
border-‐style: double;
border-‐style: inset;
border-‐style: groove;
border-‐style: outset;
border-‐style: ridge;
border-‐style: solid;
PADDING
p { padding-‐top: 10px;padding-‐right: 10px; padding-‐bottom: 10px;padding-‐left: 10px;
}
CSS
p { padding: 10px;
}
CSS
p { padding: 10px; }
CSS
z
p { padding: 10px; }
CSS
z
10px
DIMENSÕESwidth height
! Os elementos inline ignoram width e height...
Os elementos inline ignoram width e height... exepto as imagens.
!
p { width: 160px; }
CSS
p { width: 160px; }
CSS
Definir alturas só quando estritamente necessário.!
p { width: 160px;height: auto;
}
CSS
p { width: 160px;height: 20px;
}
CSS
div { min-‐width: 200px;min-‐height: 500px;
}
CSS
div { min-‐width: 200px;min-‐height: 500px;max-‐width: 980px;max-‐height: 800px;
}
CSS
DIMENSÕESoverflow
p { overflow: visible; }p { overflow: hidden; }p { overflow: auto; }p { overflow: scroll; }
CSS
CSS
p { overflow: visible; }
CSS
p { overflow: hidden; }
CSS
p { overflow: auto; }
CSS
p { overflow: auto; }
UNIDADES
px
em%
ABSOLUTAS
RELATIVAS
width: 800px;
width: 20em;
width: 40%;
CSS
p { width: 120px; }
CSS
p { font-‐size: 20px;width: 3em;
}
CSS
p { font-‐size: 20px;width: 3em;
}
20px x 3 = 60px
BOX MODEL
Conteúdo de um elemento
Conteúdo de um elemento
PADDING
BORDER
MARGIN
Conteúdo de um elemento
PADDING
BORDER
MARGIN
WIDTHH
EIG
HT
BOX
CSS
p { width: 120px;border: 2px dotted #000;padding: 3px;margin: 10px;
}
?
CSS
p { width: 120px;border: 2px dotted #000;padding: 3px;margin: 10px;
}
150px
DISPLAY
http://bit.ly/html_elements
p { display: block; }p { display: inline; }p { display: none; }
CSS
CSS
p { display: inline;
}
BACKGROUND
body { background-‐color: #ccc;background-‐image: url(image.gif);background-‐attachment: scroll;background-‐repeat: no-‐repeat;background-‐position: 0 0;
}
CSS
body { background-‐color: #ccc;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐y;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: scroll;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: scroll;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: repeat-‐x;background-‐attachament: fixed;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 0 0;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 0 40px;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 40px 0;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: left top;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: right top;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: center top;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 20% 0;
}
CSS
body { background-‐color: #ccc;background-‐image: url(paper_green.jpg);background-‐repeat: no-‐repeat;background-‐attachament: fixed;background-‐position: 50% 0;
}
CSS
body { background: #ccc url(fundo.gif) no-‐repeat scroll left top }
CSS
-color
-image
-attachment
-repeat -position
LISTAS
list-‐style-‐type
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;
list-‐style-‐image?
ul { list-‐style-‐type: none;
}ul li {
padding: 0 0 0 20px;background: url(bullet.gif) no-‐repeat 0 2px;
}
CSS
ul { list-‐style-‐type: disc;
}
CSS
ul { list-‐style-‐type: disc;margin: 0;padding: 0;
}
CSS
ul { list-‐style-‐type: disc;margin: 0;padding: 0;
}ul li {
margin-‐left: 20px;}
CSS