PW6-CSS-2

color
•  coloredeltesto
–  vieneereditatodaglielemen.
–  noninfluenzasoloiltesto
•  h1{color:gray;}
h1{color:#666666;}
h1{color:#666;}
h1{color:rgb(102,102,102);}
ProgrammazioneWeb
1
Values
each color to mix in. Thecolor:
amount
in each
color “channel” is typically
#FC0;of light
or color:
#936;
from 0 (none) to 255 (full-blast), although it can also
About
values
provided
as a percent.
Thehexadecimal
closer the three
values get to 255 (100%), the
(255,be
255,
255)
closer
resulting color
gets to
to clarify
whitewhat’s
(Figure
13-3).
It’s time
going
on with that six-digit string of ch
(100%,
100%,the
100%)
There are four formats for providing
on a scale
RGB values in described
CSS:
ColoriRGB
rgb
rgb
What you’re looking at is actually a series of three two-digit num
#FFFFFF
Any color you see on your
can be
a series
of three(base-10,
num- th
each monitor
for red, green,
anddescribed
blue. But by
instead
of decimal
#FFF
bers: a red value, a green
value,
a blue
value.
is one
of the waysorthat
we’re
used and
to), these
values
areThis
written
in hexadecimal,
base-1
All of these examples
specify
white.
image editors such as13-5
Adobe
Photoshop
keep
track
of the
colors for every
shows
the structure
of the
hex RGB
value.
quan.tàdirosso,diverdeediblu
pixel in an image. With the RGB color system, a pleasant lavender can be
described as 200, 178,Hexadecimal
230. RGB values must
sonotrebyte
•  Specificoilcolorecontrevalorinumerici
– 
– 
#RRGGBB
Figure 13-3. Colors on computer
be preceded by the #
(octophorpe
or hash) symbol.
monitors are made by mixing different
Picking
a
color
amounts of red, green, and blue light
(thus, RGB). The color in the middle of each The easiest way to pick a color and find its RGB
hex color values
hex
is tohexuse an
RED
GREEN
BLUE
diagram shows what happens when the
image-editing
tool
such
as
Adobe
Photoshop,
Adobe
Fireworks,
or
Corel
value
value
value
three color
are combined. The
–  channels
percentualedelcolore
Most image tools provide a color picker similar to
more light there is in each channel (i.e., the Paint
T I P Shop Pro Photo.
Figure 13-5. Hexadecimal RGB values are made up of three two-digit numbers
–  number
valorenumerico:
higher the
value), the closer the
Photoshop’s, shown in
13-4.and
If one
you
red,Figure
one for green,
fordon’t
blue. have an image editor, you
combination is• to decimaleda0a255
white.
Handy Hex
Values
can select a color from an online tool like ColorPicker.com (Figure 13-4).
The hexadecimal numbering system uses 16 digits: 0–9 and A–F (
White = #FFFFFF or #FFF (the
•  esadecimaleda0x00a0xFF
senting the quantities 10–15). Figure 13-6 shows how this works.
equivalent of 255,255,255)
The RGB color model
system is used widely in computing because it reduces the space i
Black = #000000 or #000 (the
store certain information. For example, the RGB values are redu
equivalent of 0,0,0)
R: 255
R: 128
R: 0 once they’re converted to hexadecimal.
R: 200
three to two digits
(100%)
(50%)
(0%)
(78%)
•  Valoripercolore
Decimal
G: 255
(100%)
B: 255
(100%)
RGB: 255, 255, 255
White
G: 128
(50%)
B: 128
(50%)
0
1
G: 0
Hex (0%)
0 1
RGB: 128, 128, 128
ProgrammazioneWeb
Gray
2
2
RGB: 0, 0, 0
Black
3
4
B: 0
3 4
(0%)
5
6
5
6
7
8
9 10 11 12 13
G: 178
7 (70%)
8 9
B: 230
A (90%)
B C
D
The decimal number 32
The decima
is represented as
is repre
RGB: 200, 178, 230
2
Pleasant lavender
tional channel that controls the level of transparency on a scale from 0 (fully
transparent) to 1 (fully opaque). Here’s how it looks written in a style rule:
RGBa
color: rgba(0, 0, 0, .5);
first three values in the parentheses are regular old RGB values, in this
• TheRGB+canalealfa
case creating the color black. The fourth value, .5, is the transparency level.
–  controlloillivelloditrasparenza
So this
color is black with 50% transparency. That will allow other colors or
background patterns to show through slightly (Figure 13-7).
h1 {color: rgba(0, 0, 0, .1);}
h1 {color: rgba(0, 0, 0, .5);}
h1 {color: rgba(0, 0, 0, 1);}
Figure 13-7. Headings with various levels
of transparency using RGBa values.
ProgrammazioneWeb
3
ally
tem
adds support for the extended set of 140 (rather fanciful) color names. Now
we can specify names like “burlywood” and my long-time favorite, “papayawhip”! The extended colors are shown in (Figure 13-2), but if you want
a more accurate view, point your browser at www.learningwebdesign.com/
colornames.html.
nomideicolori
Black
#000000
Gray
#808080
Silver
#C0C0C0
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS 2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
ProgrammazioneWeb
4
line-height
•  altezzadelrigo
•  Valori
–  number|lengthmeasurement|percentage|
–  normal
allelements
yes
•  Esempio
–  p{line-height:2;}
p{line-height:2em;}
p{line-height:200%;}
baseline
•  Ilrapportofral'altezzadelrigoeilfontèimportanteperla
leggibilità
ProgrammazioneWeb
5
text-indent
•  indentazionedelprimorigo
•  Valore
Esempio
–  lengthmeasurement
–  percentage
ProgrammazioneWeb
p#1{text-indent:2em;}
p#2{text-indent:25%;}
p#3{text-indent:-35px;}
6
Applies to: block-level elements, table cells, and inline blocks
Inherits:
yes
This is a fairly straightforward property to use. The results of the various
text-align
values are shown in Figure 12-15.
text-align
aligns text on the left margin
•  allineamentoorizzontale
text-align: right
aligns text on the right margin
•  Valori
text-align: center
centers the text in the text block
text-align: left
– text-align:
le[|right|center|jus.fy
justify
aligns text on both right and left margins
N OT E
The CSS3
related pro
aligning th
justify (f
over how
text)—but
as of this w
text-align: left
text-align: right
text-align: center
text-align: justify
ProgrammazioneWeb
7
text-decora9on
•  decorazionideltesto
•  Valori
Underlines and Other “Decorations”
–  none|underline|overline|line-through|blink
•  Esempio
–  a{text-decora.on:none;}
text-decoration: underline
text-decoration: overline
text-decoration: line-through
ProgrammazioneWeb
Figure 12-16. Examples of textdecoration values.
8
text-trasform
When you apply the text-transform property to a text ele
its capitalization when it renders without changing the way
source. The values are as follows (Figure 12-17):
text-transform: none
text-transform: capitalize
•  cambiamaiuscoleeminuscole
as it is typed in the source
capitalizes the first letter o
text-transform: lowercase
makes all letters lowercas
text-transform: uppercase
makes all letters uppercas
•  Valori
–  none
–  capitalize
–  lowercase
–  uppercase
•  text-transform: none (as was typed in)
text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
Figure 12-17. The text-transform property changes the capitaliza
when they are displayed, regardless of how they are typed in the sourc
ProgrammazioneWeb
9
graph shown here.
le=er-spacingeword-spacing
<p>Black Goose Bistro Summer Menu</p>
Example 1
p { letter-spacing: 8px; }
•  Valori
Example
2
–  lengthmeasurement|normal
p { word-spacing: 1.5em; }
• 
It is worth noting that when you specify em measurements, the calculated
size is passed down to child elements, even if they have a smaller font size
Esempio
than the parent.
–  p{leber-spacing:8px;}
In Exercise
12-7, we’ll make one last trip back to the Black Goose Bistro
p{word-spacing:1.5em;}
menu to add some of these new properties and make a few tweaks.
letter-spacing: 8px;
word-spacing: 1.5em;
ProgrammazioneWeb
10
text-shadow
The value for the text-shadow property is up to three measurements (a horizontal offset, vertical offset, and an optional blur radius) and a color. Figure
12-19 shows an example of a minimal text shadow declaration.
•  h1ombrasultesto
{
color: darkgreen;
text-shadow: .2em .2em silver;
•  }Values
text-shadow: -.3em -.3em silver;
Figure 12-19. A minimal text drop shadow.
h1 {
The firstdarkgreen;
value is a horizontal offset that positions the shadow to the righ
color:
the
text (a negative
value-.3em
pulls the
shadow to the left of the text). The seco
text-shadow:
-.3em
silver;
} measurement is a vertical offset that moves the shadow down by the spe
fied amount (a negative value moves the shadow up). The declaration en
with the color specification (silver). If the color is omitted, the same color
the text will be used.
–  ‘horizontaloffset’‘ver9caloffset’‘blurradius’‘color’
That should give you an idea for how the first two measurements work,
.2em .2em
silverlook very…well…shadowy. What it needs is a b
thattext-shadow:
sharp shadow
doesn’t
radius measurement. Zero (0) is no blur, and the blur gets softer with hig
values (Figure 12-20). Usually you just have to fiddle with values until y
get the effect you want.
text-shadow: -.3em -.3em silver;
text-shadow: .2em .2em .05 em silver
Figure 12-19. A minimal text drop shadow.
The first value is a horizontal offset that positions the shadow to the right of
the text (a negative value pulls the shadow to the left of the text). The second
measurement is a vertical offset that moves the shadow down by the specified amount (a negative value moves the ProgrammazioneWeb
shadow up). The declaration ends
text-shadow: .2em .2em .15 em silver
text-shadow: .2em .2em11
.3 em silver
more than one shadow is listed, the first one in the list is rendered first and
subsequent shadows are layered behind it in the defined order. You can also
make text appear to glow by positioning a colored shadow directly behind
the text. Figure 12-21 demonstrates a few techniques using text-shadow.
ombremul9ple
Multiple shadows
Outer glow
text-shadow: -.7em -.5em .2em silver,
.2em .2em .1em gray;
text-shadow: 0 0 .7em purple;
Raised look
Embossed look
body {background-color: thistle;}
h1 {
color: #ba9eba;
text-shadow:
-.05em -.05em .05em white,
.03em .03em .05em purple;
}
body {background-color: thistle;}
h1 {
color: #ba9eba;
text-shadow:
-.05em -.05em .05em purple,
.03em .03em .05em white;
}
For a raised look, position a light shadow above and a
dark shadow below the text, using tiny offsets.
For an embossed look, the light shadow goes
below and the dark shadow goes above.
ProgrammazioneWeb
12
ProgrammazioneWeb
13
GESTIONEDELBACKGROUND
ProgrammazioneWeb
14
Background
•  background-color
–  opacity
•  Immagininelbackground
–  background-image
–  background-repeat
–  background-posi.on
–  background-abachment
ProgrammazioneWeb
15
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
16
too
many
different
hues.
we’ll revisit all these components of an element. For now, just know that if
•  Aben.allaleggibilità
ProgrammazioneWeb
17
LISTE
ProgrammazioneWeb
18
S9leperliste
•  list-style-type
•  list-style-posi9on
•  list-style-image
ProgrammazioneWeb
19
before each list item.
This section documents the CSS2.1
list-style types that are well supported
list-style-type
on current browsers. CSS3 extends on
Values:
none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha |
the marker
here,
Use theupper-alpha
list-style-type
property
to select
the |type
of marker
that functionality
appears shown
N
OT
E
| lower-latin | upper-latin
| lower-roman
| upper-roman
lower-greek
|
including a method for authors to
before inherit
each list item.
define their own list styles, allowing for
This section documen
Default:
disc
numbering in many languages (www.
list-style types that ar
Applies to: ul, ol, and li (or elements whose display value is list-item)
w3.org/TR/css3-lists/).
Choosing a Marker
Tipodilista
list-style-type
Inherits:
yes
on current browsers. C
Values:
none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha |
the marker functional
More often than not, developers use the list-style-type property with its
upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman | lower-greek |
value set to none to remove bullets or numbers altogether. This is handy
including a method
Changing List
Bullets and Numbers
inherit
when using list markup as the foundation for a horizontal navigation menu
define their own list sty
or the entries
in a web form. You can keep the semantics but get rid of the
Default:
disc
numbering
in many
The remaining keywords (Table 12-1) specify various
numbering
andla
pesky markers.
Applies to: ul, ol, and li (or elements whose display value is list-item)
w3.org/TR/css3-lists/).
ing styles for use with ordered lists.
disc
,
circle
,
and
square
values
generate
bullet
shapes
just
as
browsers
The
Inherits:
yes
have been doing since the beginning (Figure 12-23).
there
is numbering system (CSS2.1)
TableUnfortunately,
12-1. Lettering
and
no way often
to change
the appearance
(size, color,
etc.)
of generated
bullets, so property with its
More
than
not,
developers
use
the
list-style-type
You
may
have
noticed
that
the
list
you’re basically stuck with the browser’s default rendering.
numbers altogether. This
is handy
value
to none
styleset
properties
applytoto remove
“elements bullets or
Keyword
System
display
value
is list-item.
OT E
discwhose
circle
square
when
using
list
markup
as” the foundation
for
a horizontal Nnavigation
decimal
1, 2, 3, 4, menu
5…
The CSS2.1 specification allows any
CSS3 introduces box, check, diamond,
or element
the entries
in a like
web
form.
You candecimal-leading-zero
keep the semantics but
get marker
rid03,of04,
the
05…
to perform
a list
item by
and 01,
dash02,
types
using its new
setting
its display property to listpesky
markers.
@counter-style
rule.
See
the spec for
lower-alpha
a, b, c, d, e…
item. This property can be applied
details.
upper-alpha
A,as
B, C,
D, E…
any HTML
element
or elements
, circle
, and
squareinvalues generate bullet shapes just
browsers
Theto disc
another
language.
Forthe
example,
a, b, c, d,
e… (same
have
beenXML
doing
since
beginning lower-latin
(Figure 12-23). Unfortunately,
there
is as lower-alpha)
you could automatically bullet
upper-latin
Figure
12-23.toThe
list-style-typeappearance
values disc, circle(size,
, and
square
.
A, B,bullets,
C, D, E…so(same as upper-alpha)
no
way
color,
etc.) of generated
or
numberchange
a series ofthe
paragraphs
lower-roman
by setting
the display
property
you’re
basically
stuck
withofthe browser’s
default rendering. i, ii, iii, iv, v…
paragraph (p) elements to list-item,
upper-roman
i, ii, iii, iv, v…
as shown in this example:
N OT E
disc
circle
square , , , , …
lower-greek
p.bulleted {
ProgrammazioneWeb
20
CSS3 introduces
box,
display: list-item;
list-style-type: upper-
List Item Display
Role
is
ut
nd
a,
Values:
inside | outside | inherit
By default, the marker hangs outside the content area for the list item, disDefault:
outside
Nplaying
OT E as a hanging indent. The list-style-position
property allows you
to: into
ul, olthe
, andlist
li (or
elements whose display va
to pulladds
the bullet
inside the
content
area soApplies
it runs
content.
CSS3
the hanging
value
for this
Posizionemarker
property. It is similar to inside, but
list-style-position
the markers would appear outside and
Values:
inside | outside | inherit
abutting
the
left edge of the shaded area,
Default:
as
shown outside
in Figure 12-24.
Applies to:
Inherits:
Inherits:
yes
I’ve applied a background color to the
boundaries of their content area boxe
is set to) outside (left), the markers fal
ul, ol, and li (or elements whose display value is list-item
yes
is set to inside, the content area box
li in
{background-color:
#F99;}
I’ve applied a background color to the list items
Figure 12-24 to reveal
the
ul#outside
o
boundaries of their content area boxes. You can
see that {list-style-position:
when the position
ul#inside {list-style-position: in
fall outside the content area, and when it
is set Outside
to outside (left), the markers
Inside
is set to inside, the content area box extends to include the marker.
Make your own bullets
li {background-color: #F99;}
ul#outside {list-style-position: outside;}
You
ul#inside {list-style-position: inside;}
Make your own bullets
can also use your own image a
property.
list-style-image
You can also use your own image
as a bullet
Values: using
url |the
nonelist-style-image
| inherit
ProgrammazioneWeb
21
Figure 12-24. The list-style-position
property.
Make your own bullets
You can also use your own image as a bullet using the list-style-image
Immaginipermarker
property.
list-style-image
Values:
url | none | inherit
Default:
none
Applies to: ul, ol, and li (or elements whose display value is list-item)
Inherits:
Test Yourself
yes
www.it-ebooks.info
The value of the list-style-image property is the
want to use as a marker. The list-style-type is se
in case the image does not display or the property
browser or other user agent. The result is shown in F
ul {
list-style-image: url(/images/happy.gif);
list-style-type: circle;
list-style-position: outside;
}
Test Yourself
Figure 12-25. Using an image as a marker.
ProgrammazioneWeb
Here are
22 picked
a few questions to see how well you