Download PW10-CSS-HTML-5

ILINK
ProgrammazioneWeb
1
vernacular.
o
URL!
Indirizzidellepagineweb:URL
Some URLs are short and sweet. Others may look like crazy strings of characters separated by dots (periods) and slashes, but each part has a specific
purpose. Let’s pick one apart.
es use
ocol, the
plied.
ames are
as a way
member.
/
•  Ognipaginawebeognirisorsahaunindirizzo
The parts of a URL
•  QuestosichiamaURL(UniformResourceLocator)
A complete URL is generally made up of three components: the protocol,
the site name, and the absolute path to the document or resource, as shown
–  livedeteognigiorno:
nce to
t may
ut, but it
ehind the
to create
nts in
u’ll learn
e the
k to a
r.
– 
Figure 2-1.
• inh4p://www.google.it
1 Protocol
2 Name of site
3 Absolute path
http:// www.example .com /2011/samples/first.html
Host name
Domain name
Directory path
Document
Figure 2-1. The parts of a URL.
•  leURLsonofaEeditreparF
Ilprotocollo
http://
–  Ilnomedelserver
The first thing the URL does is define the protocol that will be used for
that particular transaction. The letters HTTP let the server know to use
–  Ilpathdellarisorsa
Hypertext Transfer Protocol, or get into “web mode.”
www.example.com
ProgrammazioneWeb
2
FilediDefault
•  alcuneURLnonincludonoilnomedelfile
–  indicanosolounadirectory
–  www.uniroma2.it/
–  ppl.eln.uniroma2.it/pw/
•  Seunarichiestanonpresentaesplicitamenteilfileilserverwebcercail
fileindex.html
–  www.uniroma2.it/index.html
–  ppl.eln.uniroma2.it/pw/index.html
•  Ilnomedelfiledidefaultpuòessereconfiguratoepuòvariaredaservera
server
– 
– 
– 
– 
– 
index.html
index.htm
default.html
index.php
index.asp
ProgrammazioneWeb
3
Elemen&ancora
<ahref="...">...</a>
•  Esempio
–  <ahref="hEp://www.oreilly.com"><imgsrc="orm.gif"
alt="O'Reillytarsierlogo"></a>
•  Ilcontenutodell'elementodiventaaVvo
–  ilbrowsercambiailcursore
–  untempovenivacoloratodibluesoEolineato
–  leimmaginiavevanounbordoblu
–  ilinkgiàvisitaFeranorappresentaFincolorporpora
ProgrammazioneWeb
4
A4ributohref
•  SpecificalaURLdiundocumentonelweb
–  VascriEofradoppiapici
DuemodiperspecificareleURL
•  URLassolute
–  inizianoconhEp://
–  href="hEp://www.oreilly.com/"
•  URLrelaFve
–  allaURLdeldocumentocorrente
–  href="recipes/index.html"
–  href="spoon.gif"
ProgrammazioneWeb
5
Linkesterni
Riferimento:serverdellapaginacorrente
•  Larisorsaèinunserverwebdiverso
•  Esempio
–  Sononellapagina:hEp://ppl.eln.uniroma2.it/pw/
–  <li><ahref="hEp://www.easyphp.org/">EasyPHP</a></li>
•  DevousareURLassolute
–  èsuunserverwebdiverso(normalmentesuunamacchinadiversa)
•  AEenzione:
–  hEp://web.uniroma2.it/èunserverdiverso!!
ProgrammazioneWeb
6
Linkinterni
•  Linkaunarisorsanellostessoserverweb
–  spessodellostessosito
•  PossoomeEereilprotocolloedilnomedelserver
•  Devoindicareilpathdelfile
–  Ilpathseguelaconvenzioneunixconcartelleseparateda/
•  DueFpidipath
–  PathrelaFvialpathcorrente
–  PathassoluF
•  relaFviallarootdelserver
•  quellochecomparirebbenellaurlassolutadopoilnomedelserver
ProgrammazioneWeb
7
with the root directory at the top of the hierarchy. For the Jen’s Kitchen site,
the root directory is named jenskitchen. For another way to look at it, there
is also a view of the directory and subdirectories as they appear in the Finder
on my Mac (Windows users see one directory at a time).
Stru4uradelsito
’ts
ve
you
common
/
(jenskitchen)
). Web
ward
e name
our
ther
are on
ce they
b server,
ant and
his also
ocal and
when it is
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
couscous html
linguine html
The diagram and the view of the
Mac OS Finder reveal the structure
of the jenskitchen directory.
Figure 6-4. A diagram of the jenskitchen site structure.
ProgrammazioneWeb
8
document with the link) for the file.
Linknellastessadirectory
In this example, I want to make a link from my home page (index.html) to
a general information page (about.html). Both files are in the same directory
(jenskitchen). So from my home page, I can make a link to the information
page by simply providing its filename in the URL (Figure 6-5):
A link to just the
indicates the linke
in the same direc
the current docum
•  <ahref="about.html">Aboutthesite...</a>
<a href="about.html">About the site...</a>
The diagram shows that index.html and
about.html are in the same directory.
/
(jenskitchen)
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
From index html:
<a href="about.html">About this page...</a>
The server looks in the same directory as the current document for this file.
couscous html
linguine html
Figure 6-5. Writing a relative URL to another document in the same directory.
ProgrammazioneWeb
9
Getting back to our example, my recipe files are stored in a subdirectory
called recipes. I want to make a link from index.html to a file in the recipes
directory called salmon.html. The pathname in the URL tells the browser to
look in the current directory for a directory called recipes, and then look for
the file salmon.html (Figure 6-6):
Linkadunaso4odirectory
<li><a href="recipes/salmon.html">Garlic Salmon</a></li>
•  <li><ahref="recipes/salmon.html">GarlicSalmon</a></li>
The diagram shows that salmon.html is
one directory lower than index.html.
/
(jenskitchen)
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
From index html:
<a href="recipes/salmon.html">Garlic Salmon</a>
The server looks in the same directory as the current document for the
recipes directory
couscous html
linguine html
Figure 6-6. Writing a relative URL to a document that is one directory level lower than
the current document.
ProgrammazioneWeb
10
the browser, “Look in the current directory for a directory called recipes.
There you’ll find another directory called pasta, and in there is the file I’d
like to link to, couscous.html.”
• 
subdirectories you g
through to get to th
Now that we’ve done two directory levels, you should get the idea of how
pathnames are assembled. This same method applies for relative pathnames
that drill down through any number of directories. Just start with the name
<li><ahref="recipes/pasta/couscous.html">CouscouswithPeas
of the directory that is in same location as the current file, and follow each
directory name with a slash until you get to the linked filename.
andMint</a></li>
The diagram shows that couscous.html is
two directories lower than index html.
/
(jenskitchen)
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
From index html:
<a href="recipes/pasta/couscous.html">Couscous</a>
The server looks in the same directory as the current document for the
recipes directory, and then looks for the pasta directory.
couscous.html
linguine html
Figure 6-7. Writing a relative URL to a document that is two directory levels lower than
the current document.
ProgrammazioneWeb
11
html). Because salmon.html is in the recipes subdirectory, we need to back
up a level to jenskitchen to find index.html. This pathname tells the browser
to “go up one level,” then look in that directory for index.html (Figure 6-8):
Linkadunadirectorysopra
<p><a href="../index.html">[Back to home page]</a></p>
• 
Note that we don’t need to write out the name of the higher directory (jen<p><ahref="../index.html">[Backtohomepage]</a></p>
skitchen)
in the pathname. The ../ stands in for it.
/
The diagram shows that index html is
one directory level higher than salmon.html. (jenskitchen)
jenskitchen directory
images/
about.html
index.html
../
recipes/
recipes
o
jenskitchen.gif
pasta/
spoon.gif
salmon.html tapenade.html
e
pasta
From salmon html:
<a href="../index.html">[Back to the home page]</a>
The . / moves you up one level: from within the recipes directory up and
into the jenskitchen directory. There you find index html.
couscous html
linguine html
Figure 6-8. Writing a relative URL to a document that is one directory level higher than
ProgrammazioneWeb
the current document.
12
A link on the couscous.html page back to the home page (index.html) would
look like this:
Linkadunadirectorysopra2
<p><a href="../../index.html">[Back to home page]</a></p>
• 
I confess to still someti
chanting “go-up-a-level, g
for each ../ when trying t
complicated relative URL.
sort things out.
The first ../ backs up to the recipes directory; the second ../ backs up to the
top-level directory where index.html can be found. Again, there is no need to
<p><ahref="../../index.html">[Backtohomepage]</a></p>
write
out the directory names; the ../ does it all.
The diagram shows that index html is two
directory levels higher than couscous.html.
/
jenskitchen
jenskitchen directory
images/
recipes/
about.html
jenskitchen.gif
index.html
../
recipes
../
spoon.gif
salmon.html tapenade.html
From couscous.html:
pasta/
pasta
<a href="../../index.html">[Back to the home page]</a>
The first ../ moves you up one level: from within pasta to recipes.
The second ../ moves you from recipes up to jenskitchen.
There you find index html.
couscous html linguine html
Figure 6-9. Writing a relative URL to a document that is two directory levels higher than
the current document.
ProgrammazioneWeb
13
e
o
tory for this site, open the recipes directory, then find the salmon.html file”
(Figure 6-10):
PathrelaMviallaroot
<a href="/recipes/salmon.html">Garlic Salmon</a>
• 
Note that you don’t need to (and you shouldn’t) write the name of the root
directory (jenskitchen) in the path—just start it with a forward slash (/), and
the browser will look in the top-level directory relative to the current file.
<ahref="/recipes/salmon.html">GarlicSalmon</a>
From there, just specify the directories the browser should look in.
/
(jenskitchen)
In pathnames, the root directory is
always identified by a slash (/), not
its directory name.
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
From any document on the site:
<a href="/recipes/salmon.html">Garlic Salmon</a>
The (/) at the beginning of the path name tells the browser to start at
the root directory (jenskitchen).
couscous html
linguine html
Figure 6-10. Writing a relative URL starting at the root directory.
ProgrammazioneWeb
Because this this type of link starts at the
root to describe the pathname, it
14
the Jen’s Kitchen site shown in Figure 6-4. When you diagram the structure
of the directories for a site, it generally ends up looking like an inverted tree
with the root directory at the top of the hierarchy. For the Jen’s Kitchen site,
the root directory is named jenskitchen. For another way to look at it, there
is also a view of the directory and subdirectories as they appear in the Finder
on my Mac (Windows users see one directory at a time).
A4ributosrcdi<img>
Important
Pathname Don’ts
When you are writing relative
pathnames, it is critical that you
follow these rules to avoid common
errors:
/
(jenskitchen)
•  aEributosrccomehref
Don’t use backslashes (\). Web
URL pathnames use forward
slashes (/) only.
Don’t start with the drive name
(D:, C:, etc.). Although your
pages will link to each other
successfully while they are on
your own computer, once they
are uploaded to the web server,
the drive name is irrelevant and
will break your links.
Don’t start with file://. This also
indicates that the file is local and
causes the link to break when it is
on the server.
images/
recipes/
about.html
jenskitchen.gif
index.html
pasta/
spoon.gif
salmon.html tapenade.html
couscous html
•  Quandoforniamoilpath
The diagram and the view of the
Mac OS Finder reveal the structure
of the jenskitchen directory.
Figure 6-4. A diagram of the jenskitchen site structure.
108
–  daindex:<imgsrc="images/jenskitchen.gif"alt="">
www.it-ebooks.info
–  dacuscus:<imgsrc="../../images/spoon.gif"alt="">
–  generale:<imgsrc="/images/spoon.gif"alt="">
Part II, HTML Markup for Structure
ProgrammazioneWeb
15
linguine html
PunMspecificidiunapagina
3
ProgrammazioneWeb
16
PunMspecificidiunapagina
IdenMficazionedell'ancora
•  Ogniidpuòessereusatocomeancora
–  <h1id="startH">H</h1>
Creazionedellink
•  Siusacome#edilnomedell'idenFficatore
–  <p>...F|G|<ahref="#startH">H</a>|I|J...</p>
ProgrammazioneWeb
17
PunMspecificiinaltrepagine
Siaggiungeallaurl,#nomeindenFficatore
•  Esempio
–  <ahref="glossary.html#startH">SeetheGlossary,leEerH</a>
–  <ahref="hEp://www.example.com/glossary.html#startH">See
theGlossary,leEerH</a>
•  Sel'idnonèpresentefunzionacomunquecome
unlinknormale
ProgrammazioneWeb
18
A4ributotarget
•  Specificainqualefinestradoveaprireillink
–  target="_blank"dicediaprireillinkinunanuovafinestra
•  Esempio
–  <ahref="hEp://www.oreilly.com"target="_blank">O'Reilly</a>
•  Possodareunnomeadunafinestraedusarlapiùvolte
–  <ahref="hEp://www.oreilly.com"target="display">O'Reilly</a>
–  SpessononhauneffeEopiacevole.sembracheilinknonfunzionano
•  Conjavascriptriescoacontrollaremegliolanuova
finestra
–  GesFscoipopup
ProgrammazioneWeb
19
Altrilink
•  Linkamail
–  <ahref="mailto:[email protected]">Pierpaolo
LoreF</a>
–  IlBrowserlancianormalmenteilvostroprogrammadipostacon
[email protected]
•  deveessereconfiguratoperfarlo
–  Possoanchespecificarealtricampidellamail
•  subject,body,etc.
•  Linkanumeriditelefono
–  <ahref="tel:+390672597440">PierpaoloLoreF</a>
–  Sucellularepartelachiamata
–  Sedesktopparteskype
ProgrammazioneWeb
20
ProgrammazioneWeb
21
GESTIONEDELBACKGROUND
ProgrammazioneWeb
22
Background
•  background-color
–  opacity
•  Immagininelbackground
–  background-image
–  background-repeat
–  background-posiFon
–  background-aEachment
ProgrammazioneWeb
23
d
n
Background Color
Use the background-color property to apply a background color to any eleColoredelbackground
ment.
background-color
Values:
colorthe
value
(name or numeric) |property
transparent
| inherit
when we use
background-color
to make
the background of the
blockquote light blue (Figure 13-9).
same sample
Default:
transparent
blockquote {
Appliesborder:
to: all elements
Background Color
4px dashed;
Inherits:color:no #508C19;
}
background-color: #B4DBE6;
when we use the background-color prop
light blue
same
sample blockquote
the
element
that includes
the(Figu
A background color fills the canvas behind
blockquote
{
D E S I G N (extra
TIP
content area, and any padding
space) added
around
the content,
border: 4px dashed;
extending behind the border out to its outer edge.color:
Let’s#508C19;
see what happens
Using Color
background-color: #B4DBE6;
}
Here are a few quick tips related to
working with color:
Figure 13-9. Adding a light-blue background color to the sample blockquote.
Limit the number of colors you
use on a page. Nothing creates
As expected, the background color fills the area behind the text, all the way
Cha
visual chaos faster than too many
to the border. Look closelycolors.
at theI tend
gapstoinchoose
the border,
one and you’ll see that the
background color actually dominant
goes all the
way
its highlight
outer edge. www.it-ebooks.info
But that’s where
color
andtoone
color.
I may
also use to
a couple
of
the background stops; if we
apply
a margin
this element,
the background
Figure 13-9. Adding a light-blue background c
shades ofWhen
each, but
I talk
resistabout
addingthe CSS
will not extend into the margin.
we
box model,
ProgrammazioneWeb
24
too
many
different
hues.
we’ll revisit all these components of an element. For now, just know that if
•  AEenFallaleggibilità
The value for opacity is a number between
(completely
transparent)
and
1
The 0value
for opacity
is a number
between
0 (completely transp
(completely
opaque).
value of .5to
gives
the element
an
opacity
of 50%.
The
ency
when
it is Aapplied
a(completely
color
oropaque).
background.
There
iselement
another
way
A value
of .5
gives the
an opacity
opacity setting applies to the entire element—both
theapplies
foreground
and
theelement—both the foregro
opacity setting
to thethe
entire
make
an
element
slightly
see-through,
and
that’s
CSS3 opacity proper
background (if one has been set). If youbackground
want to just(ifaffect
onebeen
or the
other,
one has
set).
If you want to just affect one
use an RGBa color value instead.
use an RGBa color value instead.
Trasparenza
opacity
In the following code example (and Figure
13-11),
a heading
has been(and
given
In the
following
code example
Figure 13-11), a heading ha
opacity propa color of green and a background color
of white.
When
a color
of green
andthe
a background
color of white. When the o
erty is set, itnumber
allows(0the
the ispage
show through
both theof the page to show throu
set, to
it allows
the background
Values:
to 1)background oferty
text and the element box.
text and the element box.
Default:
1
h1 {color: green; background: white; opacity:
.25;}
h1 {color:
green; background: white; opacity: .25;}
Applies to: all elements
h1 {color: green; background: white; opacity:
.5;}green; background: white; opacity: .5;}
h1 {color:
Inherits:
no green;
h1 {color:
background: white; opacity:
1;} green; background: white; opacity: 1;}
h1 {color:
The value for opacity is a number between 0 (completely transparent) an
(completely opaque). A value of .5 gives the element an opacity of 50%. T
opacity: .25
.25
opacity setting applies to the entireopacity:
element—both
the foreground
and
background (if one has been set). Ifopacity:
you want
to just affect oneopacity:
or the.5oth
.5
use an RGBa color value instead.
opacity: 1
opacity: 1
In the following code example (and Figure 13-11), a heading has been giv
a color of green and a background color of white. When the opacity pr
Figure
13-11.
the page
opacity
on
element affects
both25
the both
foregrou
erty
is set,Setting
it allows
of
toanshow
through
Figure 13-11.
the opacitythe
on anbackground
element
affects
bothSetting
the the
foreground
and
ProgrammazioneWeb
background colors.
background colors.
er”
me
nt-
”
e
-
Adding a background image
The background-image property adds a background image to any element. Its
primary
job is to provide the location
of the image
file. a background
The
background-image
property
adds
Immaginiperbg
image to any element. Its
background-image
primary
job is to provide the location of the image file.
Values:
url (location of image) | none | inherit
Default:
none
background-image
Applies to: all elements
Inherits:
Values:
no
url (location of image) | none | inherit
The value of none
background-image is a sort of URL holder that contains the locaDefault:
tion of the image (see the note).
Applies to: all elements
The URL is relative to wherever the CSS rule is at the time. If the rule is in
Inherits:
nostyle sheet (a style element in the HTML document), then
an embedded
the pathname in the URL should be relative to the location of the HTML
file. If value
the CSS of
rulebackground-image
is in an external style sheet,
the pathname
the
The
is then
a sort
of URLtoholder
image should be relative to the location of the .css file. See the related tip for
tion
the image (see the note).
anotherof
approach.
that contains the loca-
These examples and Figure 13-16 show background images applied behind
The
URL is relative to wherever the CSS rule is at the time. If the rule is in
a whole page (body) and a single blockquote element with padding and a
an
embedded
style sheet (a style element in the HTML document), then
border
applied.
{
thebodybackground-image:
pathname
in
the URL should be relative to the location of the HTML
url(star.gif);
} If the CSS rule is in an external style sheet, then the pathname to the
file.
blockquote {
image
should beurl(dot.gif);
relative to the location of the .css file. See the related tip for
background-image:
padding: 2em;
another
border: approach.
4px dashed;
}
These examples and Figure 13-16 show background
images applied behind
dot.gif (24 x 24 pixels)
blockquote element with padding and
a whole page (body) and a single
ProgrammazioneWeb
26 a
star.gif (100 x 96 pixels)
ond declaration
e ready to go for
As we saw in the last figure, images tile left and right, up and down, when
left to their own devices. You can limit this behavior with the backgroundrepeat property.
GesMreilMling
Controlling tiling direction
background-repeat
As we saw in the last figure, images tile left and right, up and down, when
repeat
| repeat-x
| repeat-y
| inherit
left Values:
to their own
devices.
You can
limit this| no-repeat
behavior with
the backgroundproperty.
repeat
Default:
repeat
Background Images
You can also restrict the image to tiling
Applies to: all elements
background-repeat
only horizontally (repeat-x) or vertically
Values:
repeat no
|(repeat-y
repeat-x ),
| repeat-y
| inherit
as shown| no-repeat
in these examples.
Inherits:
Default:
No-repeat
repeat
body {
background-image: url(star.gif);
Applies to: all elements background-repeat: repeat-x;
}
Inherits:
no
body {
background-image:
url(star.gif);
If you want
image to
appear just once,
use
bodya {background
Repeat-y
background-repeat: repeat-y;
word value,
like this:
}
background-image:
url(star.gif);
If you want a background image to appear just once, use the no-repeat keyword value, like this:
body { background-repeat:
no-repeat;
Figure 13-18 shows examples
of each
background-image:
url(star.gif);
You can} also restrict
image values.
to tilingNotice that in
of thethe
keyword
background-repeat:
no-repeat;
) or vertically
only horizontallyall(repeat-x
the examples,
the tiling begins
No-repeatin the
}
top-left
of the element (or browser
incorner
these examples.
(repeat-y), as shown
window when an image is applied to the
body {
In the next section, I’ll
body element).
background-image:
url(star.gif);
show yourepeat-x;
how to change that.
background-repeat:
}
body {
background-image: url(star.gif);
background-repeat: repeat-y;
}
the no-repeat keyBackground Images
Repeat-x
Repeat-y
ProgrammazioneWeb
27
just
horizontallyororvertically.
vertically.When
When the
the image
image tiles,
or or
just
horizontally
tiles, the
the position
positionofofthe
the
This might be used to keep a background
background-position
initial
image
might
not
be
obvious,
but
you
can
use
initial image might not be obvious, but you can use background-position
make
a tilepattern
patternstart
startatataapoint
point other
other than
than the
to to
make
a tile
the left
left edge
edgeofofthe
theimage.
image.
This
might
usedtotokeep
keepaabackground
background pattern
pattern centered
This
might
bebeused
centeredand
andsymmetrical.
symmetrical.
Posizionedelbg
NN
OT
EE
OT
background-position: left
background-position:
left bottom;
bottom;
ba
Notice
13-20
thatthat
when
an an
Noticein inFigure
Figure
13-20
when
origin
image
is placed
in the
corner
of an
origin
image
is placed
in the
corner
of an
element,
it
is
placed
inside
the
border.
element, it is placed inside the border.
Only repeated images extend under the
Only repeated images extend under the
border to its outer edge.
border to its outer edge.
ba
background-position: right center;
background-position: right center;
background-position: 200px 50px;
background-position: 200px 50px;
ba
background-position: 15% 100%;
background-position: 15% 100%;
ProgrammazioneWeb
ba
28
body
By of
default,
when the
doc- which
nt (the
ment
andelement).
off the top
the browser
window,
is
itsany
default
The
value,behavior.
which
was added in CSS
image
forlocal
element,
but unfortunateolls However,
too, moving
and
page, as shown ly, property
background-attachment
to the
free
the
backyouup
can
useoff
thethe
inside
a scrolling e
italong
won’twith
work
forcontent
users
with
Internet
background-attachment
to fixed
youground
set thefrom
value
Explorer
orscroll.
7. ThisIt
is
featurein IE6 t
theofcontent
and allow it to stay
in
one6 position
while
viewport
is another
notthe
supported
allyrest
placed,
the text
scrolls up over it.
to use as “icing.”
of theand
content
scrolls.
GesMonedelloscroll
background-attachment
ages/bigstar.gif);
Values:
scroll | fixed | local (new in CSS3) | inherit
peat;
terDefault:
300px; scroll
ixed;
Applies to: all elements
Inherits:
no
dded in CSS3, makes a background image scroll Figure 13-22. Preventing the background
With the background-attachment property, you have the choice of whether
a scrolling element, independent of the browser image from scrolling with the backgroundthe background image scrolls with the content or stays in a fixed position.
rted in IE6 through 8 or Firefox as of this writing. attachment property.
When an image is fixed, it stays in the same position relative to the viewport
A large non-repeating background image in the body
of the browser (as opposed to being relative to the element
it fills). You’ll see
of the document.
what I mean in a minute.
In the following example, a large, non-tiling image is placed in the background of the whole document (the body element). By default, when the document scrolls, the image scrolls too, moving up and off the page, as shown
in Figure 13-22. However, if you set the value of background-attachment to
fixed, it stays where it is initially placed, and the text scrolls up over it.
body {
background-image: url(images/bigstar.gif);
ProgrammazioneWeb
no-repeat;
background-attachment:
scroll;
background-attachment: fixed;
he body background-repeat:
N OT E
ba
By
bo
con
You can fix th
image for any
ly, it won’t wo
Explorer 6 or
to use as “icin
29
styles
in one declaration.
background
The
Shorthand
background
Property
Values:
background-color background-image background-repeat background-
Proprietàbackground
background
You canattachment
use the handy
background property| to
specify all of your background
background-position
inherit
styles inbackground-color
one declaration.
Values:
Default:
see indiviual properties background-image background-repeat backgroundattachment background-position | inherit
Applies
to: all elements
background
Default:
indiviual properties
Values: see
Inherits:
nobackground-color background-image background-repeat backgroundApplies to: allattachment
elements background-position | inherit
exerc
property, the value of the background property is a
Inherits:
no
Conv
Applies to: all elements
list of values that would be provided for the individual background propershort
AsInherits:
for thenoshorthand font property, the value of the background property
is a
indiviual propertiesfont
AsDefault:
for theseeshorthand
ties listed above. For example, this one background rule:
listAsofforvalues
that would
be provided
forofthe
background
properthe shorthand
font property,
the value
theindividual
background property
is a
This one i
body
{
background:
white
url(arlo.png)
no-repeat
right
top
fixed;
}
backgrou
of values
that For
would
be provided
the individual
background
tieslistlisted
above.
example,
thisforone
background
rule: properin the bod
ties listed above. For example, this one background rule:
replaces
rule with white
five separate
declarations:
body {this
background:
url(arlo.png)
no-repeat right top fixed; with
} a sin
body { background: white url(arlo.png) no-repeat right top fixed; }
body {
replaces
this
withfive
five
separate
declarations:
replaces
this rule
rule with
separate
declarations:
background-color:
white;
background-image:
url(arlo.png);
body
{{
body
background-color: white;
background-repeat:
no-repeat;
background-color:
white;
background-image: url(arlo.png);
background-position:
right top;
background-image:
url(arlo.png);
background-repeat: no-repeat;
background-attachment:
fixed;
background-repeat:
no-repeat;
background-position: right top;
} background-position:
right ProgrammazioneWeb
top;
background-attachment: fixed;
}background-attachment: fixed;
declaratio
30
body
fon
serif
fontlinemargi
backg
url(i
png)
EsercizioBG+Esempi
•  Esempiconogre-bg.html
•  Esempiconbgfisso
ProgrammazioneWeb
31
ProgrammazioneWeb
32
CommenM
•  Ilcontenutofra/*e*/viene
ignorato
•  PossousareicommenFinogni
puntodelfile
•  SiusanoicommenFper
–  delimitarelesezionilogichedelfile
–  nasconderetemporaneamentedelle
dichiarazioni
ProgrammazioneWeb
33