docPW11-CSS-HTML-6
download 
Reclamo Transcript
PW11-CSS-HTML-6
ALTROCSS
ProgrammazioneWeb
1
Commen-
• Ilcontenutofra/*e*/viene
ignorato
• Possousareicommen9inogni
puntodelfile
• Siusanoicommen9per
– delimitarelesezionilogichedelfile
– nasconderetemporaneamentedelle
dichiarazioni
ProgrammazioneWeb
2
l
l
;
t is
l
ed
.
.
e>
m
t.
You can include multiple link elements to different style sheets and they’ll
Nall
OTapply.
E
If there are conflicts, whichever one is listed last will override previouscan
settings,
due to
rulewithout
order the
andurl(
the cascade.
You
also supply
thethe
URL
) notation:
dire1va@import
@import "/path/style.css";
Importing
with @import
Again,
absolute pathnames,
beginning at the root, will ensure that the .css document
will
found. for attaching an external style sheet to a document is to
Thealways
otherbe
method
• @importèladireBvacssperincluderealtricss
import it with an @import rule. The @import rule is another type of rule you
– devofornirelaurlassolutaorela9va
can
add to aStyle
style sheet,
either in an external .css style sheet document, or
Modular
Sheets
right in the style element, as shown in the following example.
Because you can compile information from multiple external style sheets,
<head>
modular
style sheets have become a popular technique for style manage<style>
@import
url("/path/stylesheet.css");
ment. Many
developers
keep styles they frequently reuse,Inunfilehtml
such as typograp { font-face: Verdana;}
phy treatments,
layout rules, or form-related styles, in separate style sheets,
</style>
then combine
themare
in mix-and-match
<title>Titles
required.</title>fashion using @import rules. Again,
</head> rules need to go before rules that use selectors.
the @import
In thisofexample,
a relative URL is shown, but it could also be an absolute
Content
clientsite.css:
URL (beginning with http://). The @import rule must go in the beginning
/* basic typography */
of@import
the style
sheet before any selectors. You can import more than one style
url("type.css");
sheet and they all will apply, but rules from the last style sheet listed take
/* form inputs
*/
Inunfilecss
precedence
over earlier
ones.
@import url("forms.css");
You can try both the link and @import methods in Exercise 13-8.
/* navigation */
@import url("list-nav.css");
N OT E
You can also supply the URL without the url(
) notation:
ProgrammazioneWeb
@import "/path/style.css";
3
vertical-align: baseline;
reset.css
}
/* HTML5 display-role reset for older browse
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
N OT E
}
/* HTML5 display-role reset for older browsers */
is another
resetfigure,
made available
article, aside,There
details,
figcaption,
the developers
at section
Yahoo!.{ To use it, To use the reset, place these styles at the top o
footer, header,byhgroup,
menu, nav,
display: block;
simply paste the following line into the
can use them exactly as you see them here or cus
}
head of your HTML document:
body {
requires. I also recommend that you read Eric’s p
<link rel="stylesheet"
line-height: 1;
}
type="text/css" href="http:// went into his settings (meyerweb.com/eric/tools/c
ol, ul {
eric/thoughts/2007/04/18/reset-reasoning/).
yui.yahooapis.com/3.5.1/
list-style: none; build/cssreset/cssreset-min.
ProgrammazioneWeb
4
}
CSS resets aren’t for everyone. You may decide
POSIZIONEDEGLIELEMENTI
ProgrammazioneWeb
5
Posizionedeglielemen-block
Inline content reflows to fit the width of the block.
abcdefghijklmnopqrstuvwxyz
out in the
ey appear in
on a new line.
<p>
<h1>
abcdefghijkl
mnopqrstuv
wxyz
<p>
<p>
<h1>
<p>
<p>
<p>
Blocks fill the available width.
One more example of the normal flow behavior.
the normal flow affect the layout ofProgrammazioneWeb
the objects around them. This
6
Cambiareilflusso
• float
– clear
• posi9on
– top,boIom,leJ,right
– z-index
ProgrammazioneWeb
7
based web design, used to create multicolumn layouts, navigation too
from lists, and table-like alignment without tables. Let’s start with the
property itself.
float
float
Values:
left | right | none | inherit
Default:
none
Applies to: all elements
Inherits:
no
The best way to explain floating is to demonstrate it. In this example
property is applied to an img element to float it to the right. Figure
• float
muoveunelementotuIoadestraotuIoa
shows
how the paragraph and the contained image are rendered by de
sinistrapermeIendoagliatrielemen9di
(top) and how it looks when the float property is applied (bottom).
circondarlo
The markup
<p><img src="crown.gif" alt="">They went down, down,...</p>
ProgrammazioneWeb
8
padding: 15px;
background-color: #FFF799;
border: 2px solid #6C4788;
Esempio
}
Inline image in the normal flow
space next to the image is held clear
The style sheet
img {
float: right;
}
p {
padding: 15px;
background-color: #F
border: 2px solid #6
}
Inline image floated to the right.
image
moves over and text wraps around it
ProgrammazioneWeb
9
Inline image in the normal flow
’re absolutely right. I’ll add 10 pixels
g the margin property (Figure 15-3).
roperties work together in page lay-
Esempio
Figure 15-3. Adding a 10-pixel margin
around the floated image.
Indicates outer margin edge
(this rule would not appear in the actual web page)
you would add some
text? If you guessed “
of space on all sides
You can begin to see
out.
img {
float: right;
margin: 10px;
}
Chapter 15, Floating and Positioning
343
www.it-ebooks.info
Esempio:ogre-fl.html
ProgrammazioneWeb
10
CaraIeris-che
• Sistaccanodalflussonormalemainfluenzanoil
contenutodeiblocchiintorno
• Sonocontenu9nell'areadelcontenuto
dell'elementochelicon9ene
• Imarginisonomantenu9
ProgrammazioneWeb
11
by clearing the element that you want to start below the float.
has Applying
been used tothe
make h2 elem
clear property to an element prevents it from appearing next
a floated
start to
below
left-floated eleme
Figure
15-6 shows
how the h2 h
ments only
element and forces it to start against the next available “clear”
space
below
ing starts at the next available
the float.
edge below the float.
t | both | none | inherit
cleardeifloat
t you apply the clear property to the element you want to
oatedclear
element, not the floated element itself. The left value
t below
any elements
that| both
have| been
Values:
left | right
none | floated
inheritto the left.
ht value makes the element clear all floats on the right edge
Default:
none
block. If there are multiple floated elements, and you want
Applies to: block-level elements only
ment starts below all of them, use the both value to clear
es. Inherits: no
img {
float: left;
margin-right: 10px;
}
h2 {
clear: left;
Figure 15-6. Clearing amargin-top:
left-floated 2em;
element
}
the clear
Keepproperty
in mind that you apply the clear property to the element you want to
h2 elements
make
start
below the floated element, not the floated element itself. The left value
floated elements.
starts the element below any elements that have been floated to the left.
s how the h2 headSimilarly,
the right value makes the element clear all floats on the right edge
next available
clear
oat. of the containing block. If there are multiple floated elements, and you want
:
to be sure an element starts below all of them, use the both value to clear
floats on both sides.
10px;
In this example, the clear property
has been used to make h2 elements
2em;
start below left-floated elements.
ProgrammazioneWeb
Figure 15-6 shows how the h2 head-
12
Figure
elemen
Figure 15-11. The container box
Fortunately, there are
disappears entirely when all its contents
One
For instance, take the example in Figure
15-10. Clearly, it would be nicer straightforward.
if
are floated.
Contenereifloat
give it a width of 100%
the border stretched to contain all the content, but the floated image hangs
here are
few the
fixesbottom.
to this problem, and they are pretty
righta out
#container {
d. One option is to float the containing element as well and
of 100%.
t;
%;
-color: #GGG;
em;
float: left;
width: 100%;
background-color:
padding: 1em;
}
L'elementocontenitorenonsi
The other common s
allungapercontenereilfloat
overflow property. Se
or hidden will also ma
mmon solution is to take advantage of the behavior of the
Figure 15-10. The containing element does not stretch to accommodate the floated
erty. Setting the overflow of the containing element to auto
added an explicit wid
image.
also make it stretch to contain the floated elements. I’ve also
that if your container
cit width value to address bugs in old IE versions, but note
border hang outside o
And if you float
all the elements inFigure
a container
element—as
youaremight
do
Nell'elementocontenitoredevodichiarare
15-12.
Our
hanging
floats
now
ntainer element has a border, the 100% width will make the
contained.
overflowautoohidden
to create a multicolumn
layout—there
will be no elements remaining in the
#
utside of the browser window.
flow to hold the containing element open. This phenomenon is illustrated
#container {
in Figure
15-11.
overflow:
auto;The #container div contains two paragraphs. The view of
100%;
the width:
normal
flow (left) shows that the #container has a background color
background-color: #GGG;
andpadding:
border 1em;
that wraps around the content. However, when both paragraphs
are }floated, the element box for the #container closes up to have a height
F
ofFigure
zero, 15-12
leaving
the floats
hanging
down abelow
(you can still see the empty
shows
the result
of applying
containm
border
at
the
top).
This
clearly
is
not
the
effect
we
are
after.
ment
technique to the previous examples. Either one
w
Esempio:float-test.html
will do the trick.
ProgrammazioneWeb
Now it is time to spiff up that navigation section on the
13
N
(technically known as the viewport in the CSS Recommendations) and it will
stay put while the rest of the page scrolls.
Modalitàdiposizionamento
Types of positioning
position
Values:
static | relative | absolute | fixed | inherit
Default:
static
Applies to: all elements
Inherits:
no
The position property indicates that an element is to be positioned and
specifies which positioning method to use. I’ll introduce each keyword value
briefly here, and then we’ll take a more detailed look at each method in the
remainder of this chapter.
• sta-c:posizionenormale
• rela-ve:posizionabilerispeIoalsuoposto
• static
absolute:posizionabilerispeIoalsuocontenitore
This is the normal positioning scheme in which elements are positioned
• fixed:posizionabilerispeIoalviewport
as they occur in the normal document flow.
relative
Relative positioning moves the box relative to its original position in the
flow. The distinctive behavior ProgrammazioneWeb
of relative positioning is that the space
14
Specifying position
Once you’ve established the positioning method, the actual position is speciSpecificarelaposizione
fied with four offset properties.
top, right, bottom, left
Values:
length measurement | percentage | auto | inherit
Default:
auto
Applies to: positioned elements (where position value is relative, absolute, or fixed)
Inherits:
no
The values provided for each of the offset properties defines the distance the
should be moved away from that respective edge. For example, the
• element
SpecificaladistanzarispeIoalcontainingblock
value of top defines the distance the top outer edge of the positioned eleshould be offset from the top edge of the browser or other containing
• ment
Qualeèilcontainingblockdipendedal9podi
element. A positive value for top results in the element box moving down by
posi9onusataneiblocchiparent
that amount. Similarly, a positive value for left would move the positioned
element to the right (toward the center of the containing block) by that
amount.
Further explanations and examples of the offset properties will be provided
in the discussions of each positioning
method. We’ll start our exploration 15
of
ProgrammazioneWeb
NO
Neg
mov
tion
nega
effec
to relative, and then I used the to
pixels down from its initial position
to the right. Remember, offset prop
the specified edge, so if you want som
you use the left offset property. Th
em {
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}
posi-on:rela-ve
em {
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}
60px
30px
Figure 15-16. When an element is positioned with the relative method, the space it
would have occupied is preserved.
• I want
Lospaziooccupatooriginariamenteè
to point out a few things that are happening here.
conservato
The original space in the document flow is preserved.
Figure 15-16. When an element is positio
would have occupied is preserved.
You can see that there is a blank space where the emphasized text would
• have
Causasovrapposizioni
been if the element had not been positioned. The surrounding conI want to point out a few things tha
tent is laid out as though the element were still there, and therefore we
The original space in the documen
say that the element still “influences” the surrounding content.
Overlap happens.
ProgrammazioneWeb
You can see that there is a blank
16
have been if the element
had no
30px;
Absolute Positioning top:
left: 60px;
posizion:absolute
Absolute positioning works a bit differently
and is actually afuchsia;
more flexible
background-color:
method for accurately placing items} on the page than relative positioning.
Now that you’ve seen how relative positioning works, let’s take the same
example as shown in Figure 15-l6, only this time we’ll change the value of
the position property to absolute.
em {
position: absolute;
top: 30px;
left: 60px;
background-color: fuchsia;
}
60px
30px
30px
Figure 15-17.
When an element is absolutely positioned, it is removed from the flow and
60px
the space is closed up.
• loposizionarispeIoalprimoparentchedefinisce
As you can see in Figure 15-17, the space once occupied by the em element
uncontainingblock
is now closed up, as is the case for all absolutely positioned elements. In its
Figure 15-17. When an element is absolutely positioned, it is removed from the flow and
the space is closed up.
new position, the element box overlaps
the surrounding content. In the end,
positioned
have no influence whatsoever on the layout
As you can see in Figure 15-17, absolutely
the space once
occupied byelements
the em element
is now closed up, as is the case for
absolutely positioned
elements. In its
of all
surrounding
elements.
ProgrammazioneWeb
17
new position, the element box overlaps the surrounding content. In the end,
position the element higher in the stack.
position the element higher in the stack.
z-index
property.
document, but you can change the stacking order with theThe
The
markup
markup
id="A"><img src="A.gif" alt="A" /></p>
id="A"><img
src="A.gif"
alt="A"
Picture the z-axis as a line that runs perpendicular to the<p<p<ppage,
though
id="B"><imgas
src="B.gif"
alt="B" /></p>
/></p>
<p
id="B"><img
src="B.gif"
alt="B"
<p id="C"><img src="C.gif" alt="C" /></p>
/></p>
<p id="C"><img src="C.gif" alt="C" /></p>
from the tip of your nose, through this page, and out the The
other
side.
style sheet
Ges-resovrapposizioni
The style sheet
#A {
#A z-index:
{
10;
z-index:
position:10;
absolute;
position:
absolute;
top: 200px;
top:
left:200px;
200px;
left:
200px;
}
}
z-index
• pp
Values:
#C {
number | auto | inherit
Default:
auto
z-index:
1;
position:
absolute;
Applies
to: positioned
elements
top: 250px;
Inherits:
no
left: 225px;
}
Fixed Positioning
#B {
#B z-index:
{
5;
z-index:
position:5;absolute;
position:
absolute;
top: 225px;
top:
225px;
left: 175px;
} left: 175px;
}
#C {
The value of the z-index property is a number (positive or negative).
z-index: 1; The
position: absolute;
top: 250px;
higher the number, the higher the element will appear in the stack.
Lower
left: 225px;
}
z-index:
10;the element lower in the stack.
numbers and negative values
move
Let’s look
z-index: 1;
at an example to make this clear (Figure 15-25).
www
www.
z-index
Here are three paragraph elements, each containing a letter image (A, B, and
z-index:
5;
C, respectively) that have been
positioned
in a way that they overlap on the
z-i
page.
By default, paragraph “C”
would appear on top because it appears
Y
By default, elementslast
later in the document
You can change the stacking order with the
By default, elements later in the document
stack on top of preceding elements.
z
on top of preceding
elements. by assigning
Higher values
stack on values to paragraphs
z-index property.
z-index
in thestack
source.
However,
higher
top of lower values.
Figure 15-25. Changing the stacking order wit
“A” and “B,” we can force them to stack in our preferred order.
Figure 15-25. Changing the stacking order with the z-index property.
To be honest, the z-index property is
layouts, but you should know it’s there
antee that a positioned element always e
z-index value, such as:18
Note that the values of z-index do not need to be sequential, and they do not
relate
to anything
in particular.
that
higher
To
be honest,
the z-index
property is All
not
oftenmatters
required isforthat
most
page number values
ProgrammazioneWeb
layouts, but you should know it’s there if you need it. If you want to guar-
img#essential {
Blocchicontenitori
• Seunelementononècontenutoinnessunblocco
conposi9onnonsta9callorailBCèbody
• Seunancestordefinisceunaposi9onnonsta9c
quellodiventailBC
Esempio:ogre-pos.html
ProgrammazioneWeb
19
width: 300px;
border: 1px solid;
background-color: #CCC;
As mentioned previously, positive offset values push the positioned element
box away from the specified edge and toward the center of the containing
block. If there is no value provided for a side, it is set to auto, and the browser adds enough space to make the layout work. In this example, I’ve used
pixel lengths for all four offset properties to place the positioned element at
a particular spot in its containing element (Figure 15-21).
Dimensionieposi-on
}
div#b {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
border: 1px solid;
background-color: teal;
}
div#a {
position: relative;
/* creates the containing block */
height: 120px;
width: 300px;
border: 1px solid;
background-color: #CCC;
}
div#b {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
border: 1px solid;
background-color: teal;
}
div#a (width: 300px; height: 120px;)
top: 20px;
div#a (width: 300px; height: 120px;)
top: 20px;
left: 50px;
div#b
div#b
right:
left: 50px;
(calculated
at
220
pixels
wide x 60 pixels high)
(calculated at 220 pixels wide x 60 pixels high)
30px;
right:
30px;
bottom: 40px;
bottom: 40px;
Figure 15-21. Setting offset values for all four sides of a positioned element.
ProgrammazioneWeb
20
Menu
Floating
At the very least, you will want to add some padding and/or margins to the
anchor elements to give the links a little breathing room, but you can add any
of the styles we’ve seen so far—colors, borders, rounded corners, background
images—to give the navigation the look you want. The following styles turn
the earlier list example into the tab-like menu shown in Figure 15-9.
Figure 15-9. The unordered list is transformed into a tab-like menu using CSS alone and
no images.
Containing floats
• Navigazionever9caleoorizzontale
• 9picamentesiapplicaunos9leadunalistaul
As long as we’re talking about multiple floats, this is a good time to address
another float quirk, and that’s float containment. By default, floats are
designed to hang out of the element they are contained in. That’s just fine for
allowing text to flow around a floated image, but sometimes this behavior
can cause some unwanted behaviors.
For instance, take the example in Figure 15-10. Clearly, it would be nicer if
the border stretched to contain all the content, but the floated image hangs
right out the bottom.
Esempio:test-menu.html
Esempio:test-menu-sub.html
Figure 15-10. The containing element does not stretch to accommodate the floated
image.
And if you float all the elements in a container element—as you might do
to create a multicolumn layout—there will be no elements remaining in the
flow to hold the containing element open. This phenomenon is illustrated
in Figure 15-11. The #container div contains two paragraphs. The view of
the normal flow (left) shows that the #container has a background color
and border that wraps around the content. However, when both paragraphs
are floated, the element box for the #container closes up to have a height
ProgrammazioneWeb
of zero, leaving the floats hanging down below (you can still see
the empty
border at the top). This clearly is not the effect we are after.
21
