CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

22
CSS <head> <title>Títol pàgina</title> </head>

Transcript of CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

Page 1: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

CSS

<head>

<title>Títol pàgina</title>

</head>

Page 2: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 3: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 4: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

CSS

<head>

<title>Títol pàgina</title>

<style type="text/css" media="screen"> @import "estil.css" );

</style>

</head>

Page 5: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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>

Page 6: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

CSS

<p style="color: sienna;

margin-left: 20px">...</p>

Page 7: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

CSS

body{

color: #666;

background: #e5e5e5;

font: Georgia, serif;

}

Page 8: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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

Page 9: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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

Page 10: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

El fons

body { background: red }

p { background: url("chess.png") gray 50% repeat fixed }

Page 11: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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

Page 12: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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%...

Page 13: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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”…

Page 14: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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 }

Page 15: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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

Page 16: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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

Page 17: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );

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…

Page 18: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 19: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 20: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 21: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );
Page 22: CSS Títol pàgina. CSS Títol pàgina @import "estil.css" );