CSS
<head>
<title>Títol pàgina</title>
</head>
CSS
<head>
<title>Títol pàgina</title>
<style type="text/css" media="screen">
@import "estil.css" );
</style>
</head>
CSS
<head>
<title>Títol pàgina</title>
<style type="text/css">
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
CSS
<p style="color: sienna;
margin-left: 20px">...</p>
CSS
body{
color: #666;
background: #e5e5e5;
font: Georgia, serif;
}
El fons
body {
background: color imatge repetició? fixe?
posició
}
• Color:
– aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red,
silver, teal, white, yellow
– #rgb, #rrggbb
El fons
body {
background: color imatge repetició? fixe?
posició
}
• Imatge: url("banner.jpeg")
– repeat repeat-x repeat-y
– fixed scroll
– Posició: % %, llarg llarg, top center bottom,
left center right
El fons
body { background: red }
p { background: url("chess.png") gray 50%
repeat fixed }
Tipografia
p {
font: estil variant pes tamany/alçada
família
}
• Estil: normal italic oblique
• Variant: normal small-caps
• Pes: lighter normal bold bolder
100 … 400 … 700 … 900
Tipografia
p {
font: estil variant pes tamany/alçada
família
}
• Tamany/alçada
– Absolut: xx-small x-small small medium large
x-large xx-large
– Relatiu: larger smaller
– Em’s, ex’s, px’s
– % 10% … 90% 100% 110%...
Tipografia
p {
font: estil variant pes tamany/alçada
família
}
• Família
– serif, sans-serif, cursive, fantasy, monospace
– Helvetica, Arial, “Courier New”, “Times New
Roman”…
Tipografia
p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century
Schoolbook", serif }
p { font: bold italic large Palatino, serif
}
p { font: normal small-caps 120%/120%
fantasy }
Tipografia
p {
letter-spacing; word-spacing;
text-align; text-decoration;
text-indent; text-transform
}
• Espaiat: en em’s, ex’s, px’s (+ i -)
• text-align: left right center justify
• text-decoration:
none underline overline line-through
Tipografia
p {
letter-spacing; word-spacing;
text-align; text-decoration;
text-indent; text-transform
}
• text-indent: em’s ex’s, px’s, %
• text-transform:
capitalize uppercase lowercase none
Vores
img {
border: amplada estil color
}
• Amplada:
thin, medium, thick, em’s ex’s i px’s
• Estil: none, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Color…
Download
