CSS-2
2013/14 Il box model • Ogni elemento html è contenuto in un box re8angolare – sia block che inline • Le proprietà css sono applicate al box – width, height, padding, borders, e margins • Visualizziamo i box con la proprietà border – border: 1px solid black; 2014-‐2015 Programmazione Web 1 2014-‐2015 Programmazione Web 2 1 Figure 11-9 shows the results. The borders reveal the shape of each b
element box. There are boxes around the inline elements (em and im
well. Notice that the block element boxes expand to fill the available w
of the browser window, which is the nature of block elements
in the no
2013/14 document flow. Inline boxes encompass just the characters or image
contain.
2014-‐2015 Programmazione Web 3 Figure 11-9. Rules around all the elements reveal their element boxes.
Grouped selectors
z
why I didn’t just add
perty to the body
t it inherit to all the
e grouped selector?
Hey! This is a good opportunity to show you a handy style rule shortc
you ever need to apply the same style property to a number of elements
can group the selectors into one rule by separating them with commas.
one rule has the same effect as the five rules listed previously. Grouping
makes future edits more efficient and results in a smaller file size.
h1, h2, p, em, img { border: 1px solid blue; }
Now you have two selector types in your toolbox: a simple element sel
FORMATTARE TESTO and grouped selectors.
2014-‐2015 Programmazione Web 4 Because border is o
properties that is no
SS for Presentation
www.it-ebooks.info
2 2013/14 Forma-are il testo • Prorietà realiQve ai font – font-‐family – font-‐size – font-‐weight – font-‐style – font-‐variant • Proprietà relaQve al testo – line-‐heigth – color – ... 2014-‐2015 Programmazione Web 5 font family • forniamo una lista di "typeface" da applicare al testo – body { font-‐family: Arial; } 8 { font-‐family: Courier, monospace; } p { font-‐family: “Duru Sans”, Verdana, sans-‐serif; } • Regole: – Tu] i font cominciano con la le8era maiuscola, tranne i font generici – Sono separaQ da virgole – Se il loro nome conQene spazi vanno fra virgole8e 2014-‐2015 Programmazione Web 6 3 2013/14 Famiglie di font The Font Properties
Decorative
serif stroke
Serif
Sans-serif
Straight
strokes
Times
Georgia
Times New Roman
Lucida (Mac)
Veranda
Trebuchet MS
Arial
Arial Black
Monospace
Courier
Monospace font
(equal widths)
Proportional font
(different widths)
Courier New
Andale Mono
Apple Chancery
Comic Sans
Snell
Imapct
Stencil
Mojo
Cursive
Fantasy
2014-‐2015 Programmazione Web 7 Figure 12-2. Examples of the five generic font families.
cursive
Examples: Apple Chancery, Zapf-Chancery, and Comic Sans
Cursive fonts emulate a script or handwritten appearance.
Font stack fantasy
Examples: Impact, Western, or other decorative font
Fantasy fonts are purely decorative and would be appropriate for headlines and other display type. Fantasy fonts are rarely used for web text
due to cross-platform availability and legibility.
• Non tu] i font sono disponibili nei browser – dipendono dal sistema operaQvo – sono installaQ nel pc 230
h8p://www.awayback.com/revised-‐font-‐stack/ Part III, CSS for Presentation
www.it-ebooks.info
2014-‐2015 Programmazione Web 8 4 2013/14 Font stack • Non tu] i font sono disponibili nei browser – dipendono dal sistema operaQvo – sono installaQ nel pc 2014-‐2015 h8p://www.awayback.com/revised-‐font-‐stack/ Programmazione Web 9 Strategia di stack • Si specifica il font desiderato e quindi delle opzioni alterna=ve simili • Esempio –
–
–
–
–
–
–
–
font-‐family: Verdana, Geneva, sans-‐serif; font-‐family: Georgia, "Times New Roman",Times, serif; font-‐family: "Courier New", Courier, monospace; font-‐family: Arial, HelveQca, sans-‐serif; font-‐family: Tahoma, Geneva, sans-‐serif; font-‐family: "Trebuchet MS", Arial, HelveQca, sans-‐serif; font-‐family: "Arial Black", Gadget, sans-‐serif; ... 2014-‐2015 Programmazione Web 10 5 2013/14 Web Font • Posso caricare dei font esterni con la regola @font-‐
face • Non funziona allo stesso modo su tuD i browser – usano forma= di font differen= • Nota: – non potete distribuire un font via web se non permesso dalla licenza • Soluzione google – h8p://www.google.com/fonts – @import url(h8p://fonts.googleapis.com/css?family=Lobster); 2014-‐2015 Programmazione Web 11 font-‐size Specifica la dimensione del cra-ere – h1 { font-‐size: 150%; } h1 { font-‐size: 22px; } h1 { font-‐size: 1.5em; } h1 { font-‐size: x-‐large; } h1 { font-‐size: larger; } • Valori ammessi – length unit | percentage – xx-‐small | x-‐small | small | medium | large | x-‐large | xx-‐large – smaller | larger 2014-‐2015 Programmazione Web 12 6 2013/14 Unità di misura assolute • px pixel, defined as an absolute measurement equal to 1/96 of an inch in CSS3 • pt points (1/72 inch in CSS2.1) • pc picas (1 pica = 12 points) • mm millimeters • cm cenQmeters • in inches (2.54 cm) • Non c'è certezza di rendering, non vanno usate a video 2014-‐2015 Programmazione Web 13 Unità di misura rela=ve • px pixel, considered relaQve in CSS2.1 because it varies with display resoluQon • em a unit of measurement equal to the current font size • ex x-‐height, approximately the height of a lowercase “x” in the font Nuove in CSS3 • rem root em, equal to the em size of the root element (html) • ch zero width, equal to the width of a zero (0) in the current font and size • vw viewport width unit, equal to 1/100 of the current viewport (browser window) width • vh viewport height unit, equal to 1/100 of the current viewport height vm viewport minimum unit, equal to the value of vw or vh, whichever is smaller 2014-‐2015 Programmazione Web 14 7 2013/14 Pixel 2014-‐2015 Programmazione Web 15 % e em Specifico il size rispe-o al valore ereditato <body> • % la percentuale • em la frazione <h1> <arQcle> • Esempio <h2> – body { font-‐size: 100%; } /* 16px */ h1 { font-‐size: 150%; } /* 150% of 16 = 24 */ – arQcle {font-‐size: 0.875em;} /* 0.875 * 16 = 14*/ h2{font-‐size: 1.2857142857em;} /*calcolo della frazione 18 / 14 = 1.2857142857 */ 2014-‐2015 Programmazione Web 16 8 The Font Properties
2013/14 Introducing the Root Em
There is a new relative measurement in CSS3 called a rem (for root em) that bases
font size on the size of the root (html) element. If you specify the size of the html
element (presumably to 100%), all elements that are specified in rem measurements
will be relative to that size, not their inherited size. This gets rid of the compounding
issue that makes ems potentially aggravating. The drawback is that IE8 and earlier and
other older browsers do not support rems, so you need to provide a fallback font size
in pixels. Browsers that support rems will use the last declaration in the stack.
html {
font-size: 100%;
}
#main {
font-size: 12px;
font-size: .75rem;
}
Best prac=ces • font-‐face – cerco una combinazione di font che copra tu8e le pria8aforme The rem unit is gaining popularity in the web development community. For a more
thorough introduction, I recommend the article “Font Sizing with rem” by Jonathan
Snook (snook.ca/archives/html_and_css/font-size-with-rem).
• font-‐size Working with keywords
– si imposta il body con un valore % – si specificano gli altri font con % o em The remaining way to specify font-size is one of the predefined absolute
keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
The keywords do not correspond to particular measurements, but rather are
scaled consistently in relation to one another. The default size is medium in
current browsers. Figure 12-5 shows how each of the absolute keywords
renders in a browser when the default text is set at 16 pixels. I’ve included
samples in Verdana and Times to show that, even with the same base size,
there is a big difference in legibility at
sizes small and below.
2014-‐2015 Programmazione Web 17 The benefit of keywords is that current browsers won’t let text sized in
keywords render smaller than 9 pixels, so they protect against illegible type.
On the downside, keywords are imprecise and unpredictable. For example,
while most browsers scale each level up by 120%, some browsers use a scaling factor of 150%.
font keyword The relative keywords, larger and smaller, are used to shift the size of
text relative to the size of the parent element text. The exact amount of the
size change is determined by each
browser and is out of your control.
Despite that limitation, it is an
easy way to nudge type a bit larger
or smaller if the exact proportions
are not critical.
Figure 12-5. Text sized with absolute
keywords.
Chapter 12, Formatting Text
237
• Non swww.it-ebooks.info
i usano molto perché non riesco a predire il risultato 2014-‐2015 Programmazione Web 18 9 Font weight (boldness)
After font families and size, the remaining font properties are straightforward. For example, if you want a text element to appear in bold, use the
font-weight property to adjust the boldness of type.
font-weight
Values:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
inherit
Default:
normal
Applies to: all elements
Inherits:
yes
As you can see, the font-weight property has many predefined values,
including descriptive terms (normal, bold, bolder, and lighter) and nine
numeric values (100 to 900) for targeting various weights of a font if they
are available. Because most fonts commonly used on the Web have only
two weights, normal (or roman) and bold, the only font weight value you
will use in most cases is bold. You may also use normal to make text that
would otherwise appear in bold (such as strong text or headlines) appear at
a normal weight.
font-‐weight About inherit
You will see that CSS properties
include inherit in their list of
keyword values. The inherit value
allows you to explicitly force an
element to inherit a style property
value from its parent. This may come
in handy to override other styles
applied to that element and to
guarantee that the element always
matches its parent.
2013/14 • imposta il grasse-o al cara-ere The numeric chart is an interesting idea, but because there aren’t many fonts
with that range of weights, and because browser support is spotty, they are
not often used. In general, numeric settings of 600 and higher result in bold
text, although even that can vary by browser, as shown in Figure 12-7.
Rendered on Safari
• Valori – normal |bold Rendered on Firefox (Mac)
– bolder |lighter Figure 12-7. The effect of font-weight
– 100 |200 |300 |400 |500 |600 |700 |values.
800 |900 exercise 12-3 |
Making text bold
2014-‐2015 Programmazione Web 19 Back to the menu. I’ve decided that I’d
like all of the menu item names to be
in bold text. What I’m not going to do is
wrap each one in <b> tags…that would
be so 1996! I’m also not going mark
them up as strong elements…that is not
semantically accurate. Instead, the right
thing to do is simply apply a style to the
Font style (italics)
semantically correct dt (definition term)
elements
to make
The font-style property affects the posture of the text, that
is, whether
thethem all bold at once.
Add
this
rule
to
the end of the style
letter shapes are vertical (normal) or slanted (italic and oblique).
sheet, save the file, and try it out in the
browser (Figure 12-8).
font-style
The Font Properties
font-‐style • imposta in cara-ere a italico o obliquo Values:property
normalto
| italic
| oblique |ininherit
Figure 12-8. Applying the font-weight
dt elements
the menu.
Default:
dt { font-weight: bold; }
normal
Applies to: all elements
• Valori Inherits:
–
yes
Chapter 12, Formatting Text
Italic and oblique are both slanted versions of the font. The difference is
normal | italic |is ousually
blique that the italic
version
a separate
typeface design with curved letwww.it-ebooks.info
ter forms, whereas oblique text takes the normal font design and just slants
it. The truth is that in most browsers, they may look exactly the same (see
Figure 12-9). You’ll probably only use the font-style property to make text
italic or to make text that is italicized in the browser’s default styles (such
as emphasized text) display as normal.
239
• Normalmente italic è un font separato oblique Figure 12-9. Italic and oblique text.
2014-‐2015 Programmazione Web 20 exercise 12-4 |
Making text italic
Now that all the menu item names are
bold, some of the text I’ve marked as
strong isn’t standing out very well, so
I think I’ll make them italic for further
emphasis. To do this, simply apply the
font-style property to the strong
element.
strong { font-style: italic;}
Once again, save and reload. It should
look like the detail shown in Figure 12-10.
10 2013/14 font-‐variant • cambia il cara-ere in maiuscole-o • Valori – normal | small-‐caps 2014-‐2015 Programmazione Web 21 Programmazione Web 22 font 2014-‐2015 11 2013/14 color • colore del testo – viene ereditato dagli elemenQ – non influenza solo il testo • h1 { color: gray; } h1 { color: #666666; } h1 { color: #666; } h1 { color: rgb(102,102,102); RGB color values } Specifying Color Values
Names are easy, but as you can see, they are limited. By far, the most common way to specify a color is by its RGB value. It also gives you millions of
colors to choose from.
Specifying Color Values
For those
who are not familiar with how computers deal with color, I’ll start
Programmazione Web 23 with the basics
before jumping
into the CSS syntax.
2014-‐2015 There is one last shorthand way to specify hex color values. If your value
happens to be made up of three pairs of doubled digits or letters, such as:
A word about RGB color
color:
#FFCC00; or color: #993366;
AT A
G L A N C E create
Computers
the you
colors
see on
a monitor
threeThe
colors
can you
condense
each
pair downby
to combining
one digit or letter.
benefit is slightly
of light: red, green, and
blue.the
This
known
thedocument.
RGB color
model.
Youare equivalent
reducing
file is
size
of youras
CSS
These
examples
Specifying
RGB
forlisted
colors
by telling the computer how much of
the ones
above:
Values can provide recipes (oftosorts)
each color to mix in. Thecolor:
amount
in each
color “channel” is typically
#FC0;of light
or color:
#936;
There are four formats for providing
on a scale from 0 (none) to 255 (full-blast), although it can also
RGB values in described
CSS:
About
values
provided
as a percent.
Thehexadecimal
closer the three
values get to 255 (100%), the
rgb (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 characters.
rgb (100%,
100%,the
100%)
Colori RGB What you’re looking at is actually a series of three two-digit numbers, one
#FFFFFF
Any color you see on your
can be
a series
of three(base-10,
num- the system
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-16. Figure
All of these examples
white.such as Adobe Photoshop keep track of the colors for every
imagespecify
editors
13-5 shows the structure of the hex RGB value.
quanQtà di rosso, di verde di image.
blu With the RGB color system, a pleasant lavender can be
pixel inean
described as 200, 178,Hexadecimal
230. RGB values must
sono tre byte • Specifico il colore con tre valori numerici –
–
#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, value
Adobe Fireworks,
or
value
valueCorel
three color
are combined.
The
– channels
percentuale del colore Paint
Shop
Pro
Photo.
Most
image
tools
provide
a
color
picker
similar
to
more light there is in each channel (i.e., the
TIP
Figure 13-5. Hexadecimal RGB values are made up of three two-digit numbers, one for
– number
valore numerico: 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 decimale white.
Values
da Handy
0 a 255 Hex
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 (for repre#FFFFFF
#FFF (the
• esadecimale White
da 0= x00 a or0xFF senting the quantities 10–15). Figure 13-6 shows how this works. The hex
equivalent of 255,255,255)
The RGB color model
system is used widely in computing because it reduces the space it takes to
Black = #000000 or #000 (the
store certain information. For example, the RGB values are reduced from
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%)
• Valori per colore Decimal
G: 255
(100%)
B: 255
(100%)
RGB: 255, 255, 255
2014-‐2015 White
G: 128
(50%)
B: 128
(50%)
0
G: 0
Hex (0%)
0
1
2
4
5
6
7
1
2 (0%)
3 4
5
6
7 (70%)
8 9
00
RGB: 128, 128, 128
Programmazione Web Gray
RGB: 0, 0, 0
Black
Why 255?
In true RGB color, 8 bits of information are devoted to each color channel.
sixteens ones
scale from
0 to 255.
8 bits can describe 256 shades (28=256), so colors are measured on aplace
place
3
B: 0
8
G: 178
9 10 11 12 13 14 15
B: 230
A (90%)
B C
D
E
F
The decimal number 32
The decimal number 42
is represented as
is represented as
RGB: 200, 178, 230
24 Pleasant lavender
20
2 sixteens and 0 ones
2A
2 sixteens and 10 ones
Figure 13-6. The hexadecimal numbering system is base-16.
268
Part III, CSS for Presentation
270
Part III, CSS for Presentation
www.it-ebooks.info www.it-ebooks.info
12 Now that most graphics and web development software provides easy access
to hexadecimal color values (as we saw in Figure 13-4), there isn’t much
need to translate RGB values to hex yourself, as we needed to do back in the
old days. But should you find the need, the Hexadecimal Calculators sidebar
should help you out.
Hexadecimal
Calculators
2013/14 RGBa color
RGBa color allows you to specify a color and also make it as transparent or
as opaque as you like. The “a” in RGBa stands for alpha, which is an additional 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);
The• first
three+values
in the
parentheses are regular old RGB values, in this
RGB canale alfa case creating the color black. The fourth value, .5, is the transparency level.
– controllo livello di transparency.
trasparenza That will allow other colors or
So this color
is blackil with
50%
background patterns to show through slightly (Figure 13-7).
In Windows, the standard calcula
has a hexadecimal converter in
the Scientific view. Mac users can
download the free “Mac Dec Bin H
Calculator” for OS X (search for it a
download.com).
Of course, you could calculate a
hex value yourself by dividing you
number by 16 to get the first digi
and then using the remainder for
the second digit. For example, 20
converts to C8 because 200=(16
12) + 8. That’s {12,8} in base-16, o
in hexadecimal. Whew! I think I’ll
sticking with my Color Picker.
h1 {color: rgba(0, 0, 0, .1);}
h1 {color: rgba(0, 0, 0, .5);}
h1 {color: rgba(0, 0, 0, 1);}
Specifying Color Values
names with various levels of transparency using RGBa values.
FigureColor
13-7.
Headings
2014-‐2015 Programmazione Web 25 The most intuitive way to specify a color is to call it by name. Unfortunately,
make up just any color name and expect it to work. It has to be
Thereyou
is acan’t
complication,
however, and its name is Internet Explorer. IE verone of the color keywords predefined in the CSS Recommendation. CSS1
sions
8
and
earlier
do
not
support
RGBa
sointroduced
you need
and
CSS2
adopted
the
16
standard
color
namescolor,
originally
in to provide a fallN OT E
orange
for
a
total
of
17
(Figure
13-1).
CSS3
HTML
4.01.
CSS2.1
tossed
in
back for users with those browsers. The easiest is to just pick a fully opaque
The extended color names, also known
adds support for the extended set of 140 (rather fanciful) color names. Now
as the X11 color names, were originally
color that approximates the look you are going for and list it first in the style
provided with the X Window System we can specify names like “burlywood” and my long-time favorite, “papayawhip”!
extended
colors
are shown
in (Figure
if you want will override the
for Unix.
rule. IE
willThe
ignore
the
RGBa
value,
and 13-2),
otherbutbrowsers
a more accurate view, point your browser at www.learningwebdesign.com/
opaque
color when they get to the second declaration.
colornames.html.
nomi dei colori h1 {
color: rgb(120, 120, 120);
color:
rgba(0,Gray0, 0, 50%); Silver
Black
} #000000
#808080
#C0C0C0
N OT E
HSL colors can be given a tra
ency level as well using the HSL
format, which has the same syn
RGBa:
color: hsla(0, 0%, 0%, .5);
White
#FFFFFF
But if you simply must have true transparency in IE, then you can provide
Maroon
Red
Fuchsia
alternatives
(a transparent
PNG Purple
or an IE-proprietary
filter) specifically to IE
#800000
#FF0000
#800080
#FF00FF
8, 7, and 6 by wrapping the rules or style element in conditional comments
that only IE understands (see the Targeting IE with Conditional Comments
Green Fortunately,
Lime RGBa is supported
Olive
Yellow and higher, so as older versidebar).
by IE9
#008000
#00FF00
#808000
#FFFF00
sions fade into disuse, we won’t need to jump through extra hoops.
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Chapter 13, Colors and Background
Orange (CSS 2.1)
#FFA500
www.it-ebooks.info
Figure
13-1. The 17 standard color names in CSS2.1.
2014-‐2015 Programmazione Web 26 Color names are easy to use—just drop one into place as the value for any
color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
13 266
Part III, CSS for Presentation
2013/14 line-‐height • altezza del rigo • Valori – number | length measurement | percentage | – normal all elements yes • Esempio baseline – p { line-‐height: 2; } p { line-‐height: 2em; } p { line-‐height: 200%; } • Il rapporto fra l'altezza del rigo e il font è importante per la leggibilità 2014-‐2015 Programmazione Web 27 text-‐indent • indentazione del primo rigo • Valore Esempio – length measurement – percentage 2014-‐2015 Programmazione Web p#1 { text-‐indent: 2em; } p#2 { text-‐indent: 25%; } p#3 { text-‐indent: -‐35px; } 28 14 hanging text may disappear off the
left edge of the browser window.
wide with a 10% indent, a text-indent of 80 pixels will be passed down (not
the 10% value) to elements the div contains.
Horizontal alignment
You can align text for web pages just as you would in a word processing or
desktop publishing program with the text-align property.
2013/14 text-align
Values:
left | right | center | justify | inherit
Default:
left for languages that read left to right; right for languages that read right to left
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
• allineamento orizzontale 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:
lew | right | center aligns
| jusQfy both right and left margins
justify
text on
N OT E
The CSS3 Text Module defines two new
related properties—text-align-last (for
aligning the last line of text) and textjustify (for more fine-tuned control
over how space is inserted in justified
text)—but they are not well supported
as of this writing.
text-align: left
text-align: right
text-align: center
text-align: justify
2014-‐2015 Programmazione Web 29 Figure 12-15. Examples of text-align values.
Good news—only four more text properties to go! Then we’ll be ready to try
a few of them out in the Black Goose Bistro menu.
text-‐decora=on • decorazioni del testo • Valori Underlines and Other “Decorations”
Chapter 12, Formatting Text
www.it-ebooks.info
– none | underline | overline | line-‐through | blink • Esempio 251
Underlines and O
If you want to put a line under
the underline off under links, t
text-decoration
– a { text-‐decoraQon: none; } text-decoration: underline
Values:
none | underline | overline
Default:
none
Applies to: all elements
Inherits:
text-decoration: overline
no, but since lines are drawn across
The values for text-decoratio
text-decoration: underline
text-decoration: overline
text-decoration: line-through
2014-‐2015 Programmazione Web Figure 12-16. Examples of text30 decoration values.
text-decoration: line-throug
text-decoration: blink
The most popular use of the
underlines that appear automa
a { text-decoration: none;
There are a few cautionary wo
Ɇ First, if you get15 rid of the u
N OT E
The CSS3 Text Module includes
enhancements to text-decoration ,
including text-decoration-line, textdecoration-color , text-decoration-
cues to compensate, such a
Ɇ On the flip side, because un
here,” underlining text tha
ing. Consider whether itali
hadow
2013/14 When you apply the text-transform property to a text element, it changes
its capitalization when it renders without changing the way it is typed in the
source. The values are as follows (Figure 12-17):
text-‐trasform text-transform: none
text-transform: capitalize
• cambia maiuscole e minuscole as it is typed in the source
capitalizes the first letter of each word
text-transform: lowercase
makes all letters lowercase
text-transform: uppercase
makes all letters uppercase
• 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 capitalization of characters
when they are displayed, regardless of how they are typed in the source.
2014-‐2015 Programmazione Web 31 Spaced Out
The letter-spacing and word-spacing properties do what they say: add
The final two text properties in this chapter are used to insert space between
space between the letters of the textletters
or words
in a line, respectively. Figure
(letter-spacing) or words (word-spacing) when the text is displayed.
12-18 shows the results of these rule examples applied to the simple paraletter-spacing
graph shown here.
Values:
length measurement | normal | inherit
le-er-‐spacing e word-‐spacing Default:
<p>Black Goose Bistro Summer Menu</p>
normal
Applies to: all elements
Example 1
Inherits:
p { letter-spacing: 8px; }
• Valori yes
word-spacing
Values:
Example
2 measurement | normal Default:
– length length measurement | normal | inherit
normal
Applies to: all elements
p { word-spacing: 1.5em; }
Inherits:
yes
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 { le8er-‐spacing: 8px; } In Exercise
12-7, we’ll 1
make
one
p { word-‐spacing: .5em; } last trip back to the Black Goose Bistro
menu to add some of these new properties and make a few tweaks.
Chapter 12, F
www.it-ebooks.info
letter-spacing: 8px;
word-spacing: 1.5em;
2014-‐2015 Programmazione Web 32 Figure 12-18. letter-spacing (top) and word-spacing (bottom).
Text Shadow
Drop shadows that make text and graphic elements “pop” from the page
have become all the rage over the last decade. Now there is a way to add a
drop shadow to text using CSS alone with the text-shadow property. Text
shadows are drawn behind the text but in front of the background and border if there is one.
16 Text Shado
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.
h1 {
color: darkgreen;
text-shadow: .2em .2em silver;
}
h1 {
color: darkgreen;
text-shadow: -.3em -.3em silver;
}
2013/14 text-shadow: .2em .2em silver
Text Shadow
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.
• h1ombra sul testo {
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 right of
color:
the
text (a negative
value-.3em
pulls the
shadow to the left of the text). The second
text-shadow:
-.3em
silver;
} measurement is a vertical offset that moves the shadow down by the specified amount (a negative value moves the shadow up). The declaration ends
with the color specification (silver). If the color is omitted, the same color as
the text will be used.
– ‘horizontal offset’ ‘ver9cal offset’ ‘blur radius’ ‘color’ That should give you an idea for how the first two measurements work, but
.2em .2em
silverlook very…well…shadowy. What it needs is a blur
thattext-shadow:
sharp shadow
doesn’t
radius measurement. Zero (0) is no blur, and the blur gets softer with higher
values (Figure 12-20). Usually you just have to fiddle with values until you
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.
Text 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 specieb fied 2014-‐2015 amount (a negative value moves the Programmazione shadow up).WThe
declaration ends
with the color specification (silver). If the color is omitted, the same color as
the text will be used.
text-shadow: .2em .2em .15 em silver
text-shadow: .2em .2em33 .3 em silver
Adding a blur radius to a text drop shadow.
That should give you an idea for how theFigure
first 12-20.
two measurements
work, but
You can even apply more than one shadow to a single text element. When
that sharp shadow doesn’t look very…well…shadowy. What it needs is a blur
more than one shadow is listed, the first one in the list is rendered first and
radius measurement. Zero (0) is no blur, and the blur gets softer with higher
subsequent shadows are layered behind it in the defined order. You can also
values (Figure 12-20). Usually you just have to fiddle with values until you
appear to glow by positioning a colored shadow directly behind
get the make
effect text
you want.
www.it-ebooks.info
the text. Figure 12-21 demonstrates a few techniques using text-shadow.
ombre mul=ple Multiple shadows
Chapter 12, Formatting Text
Outer glow
text-shadow: .2em .2em .05 em silver
text-shadow: -.7em -.5em .2em silver,
.2em .2em .1em gray;
Raised look
text-shadow: 0 0 .7em purple;
text-shadow: .2em .2em .15 em silver
Embossed look
text-shadow: .2em .2em .3 em silver
body {background-color: thistle;}
body {background-color: thistle;}
Figure 12-20.
h1 { Adding a blur radius to a text drop shadow. h1 {
}
color: #ba9eba;
text-shadow:
-.05em -.05em .05em white,
.03em .03em .05em purple;
}
color: #ba9eba;
text-shadow:
-.05em -.05em .05em purple,
.03em .03em .05em white;
Chapter 12, Formatting Text
255
For a raised look, position a light shadow above and a
For an embossed look, the light shadow goes
www.it-ebooks.info
dark shadow below the text, using tiny offsets.
below and the dark shadow goes above.
2014-‐2015 Programmazione Web 34 Figure 12-21. Special effects with text shadows.
So go have some fun with text shadows, but be careful not to overdo it. Not
only can drop shadows make text difficult to read, but adding a shadow to
everything can slow down page performance (scrolling, mouse interactions,
etc.), which is particularly problematic for mobile browsers without much
processing power. In addition, be careful that your text doesn’t require a
shadow in order to be visible. Folks with non-supporting browsers won’t see
a thing. My advice is to use drop shadows as an enhancement in a way that
isn’t critical if they don’t appear.
And speaking of non-supporting browsers, what about Internet Explorer?
Versions 9 and earlier won’t know what to do with the text-shadow prop-
17 2013/14 Esercizi • Scaricare la pagina menu del cap. 12 • Impostare al body il font-‐family – vedere il funzionamento del font stack rimuovendo o aggiungendo dei font – usare un web font da google • Impostare il font-‐size –
–
–
–
visualizzare il font applicato in chrome webdev cambiare il size al body con % cambiare il size all'elemento #appeQzers a 14px cambiare il size all'elemento dl in #appeQzers a 18px usando em • Impostare i colore – Cambiare il colore del testo al body (e.g. #999) – cambiare il colore a "lime" dell'elemento #entrees – impostare anche il bordo dell'elemento #entrees 2014-‐2015 Programmazione Web 35 18
© Copyright 2024