text-transform Values: none | capitalize | lowercase | uppercase | inherit Default: none Applies to: all elements Inherits: yes When you apply the text-transform property to a text e
Trang 1The values for text-decoration are intuitive and are shown in Figure 12-19
text-decoration: underline underlines the element
text-decoration: overline draws a line over the text
text-decoration: line-through draws a line through the text
text-decoration: blink makes text flash on and off The most popular use of the text-decoration property is turning off the underlines that appear automatically under linked text, as shown here:
a { text-decoration: none; } There are a few cautionary words to be said regarding text-decoration First, be sure there are other cues such as color, weight, or a bottom bor-der to compensate
On the flip-side, because underlines are such a strong visual cue to “click here,” underlining text that is not a link may be misleading and
frustrat-ing Consider whether italics may be an acceptable alternative
Finally, there is no reason to make your text blink Internet Explorer won’t support it anyway
Changing Capitalization
I remember when desktop publishing programs introduced a nifty feature that let me change the capitalization of text on the fly This made it easy to see how my headlines might look in all capital letters without needing to retype them CSS includes this feature as well with the text-transform property
text-transform
Values: none | capitalize | lowercase | uppercase | inherit
Default: none
Applies to: all elements Inherits: yes
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-20):
text-transform: none as it is typed in the source
text-transform: capitalize capitalizes the first letter of each word
text-transform: lowercase makes all letters lowercase
text-transform: uppercase makes all letters uppercase
•
•
•
text-decoration: underline
text-decoration: overline
text-decoration: line-through
Figure 12-19
Examples of text-decoration values.
text-decoration: underline
text-decoration: overline
text-decoration: line-through
Figure 12-19
Examples of text-decoration values.
If you turn off underlines
under links, do so with
care because the underline
is a strong visual cue that
something is clickable.
If you turn off underlines
under links, do so with
care because the underline
is a strong visual cue that
something is clickable.
Trang 2Spaced Out
text-transform: normal (as was typed in)
text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
Figure 12-20 The text-transform property changes the capitalization of characters
when they are displayed, regardless of how they are typed in the source.
Spaced Out
The final two text properties in this chapter are used to insert space between
letters (letter-spacing) or words (word-spacing) when the text is displayed
letter-spacing
Values: length measurement, normal | inherit
Default: normal
Applies to: all elements
Inherits: yes
word-spacing
Values: length measurement, normal | inherit
Default: normal
Applies to: all elements
Inherits: yes
The best way to get to know these properties is by example When you
provide a length measurement, that much space will be added between the
letters of the text (letter-spacing) or words in a line (word-spacing) Figure
12-21 shows the results of these rule examples applied to the simple
para-graph shown here
The style sheet
p { letter-spacing: 8px; }
p { word-spacing: 1.5em; }
The markup
<p>Black Goose Bistro Summer Menu</p>
Trang 3word-spacing: 1.5em;
letter-spacing: 8px;
Figure 12-21 letter-spacing (top) and word-spacing (bottom).
In Exercise 12-3, we’ll make one last trip back to the Black Goose Bistro menu
to add some of these new properties and make a few tweaks
In the interest of saving space and keeping this an
introductory-level book, these properties were not given the full treatment
But being the type of author who doesn’t hold anything back,
I’m including them here Learn more about them at the W3C
site (www.w3.org/TR/CSS21/).
vertical-align
Values: baseline | sub | super | top | top | middle |
text-bottom | text-bottom | percentage | length | inherit
Specifies the vertical alignment of an inline element’s baseline
relative to the baseline of the surrounding text It is also used to
set the vertical alignment of content in a table cell (td).
white-space
Values: normal | pre | nowrap | pre-wrap | pre-line | inherit
Specifies how white space in the element source is handled
in layout For example, the pre value preserves the character
spaces and returns found in the source, similar to the pre
(X)HTML element.
visibility
Values: visible | hidden | collapse | inherit
Used to hide the element When set to hidden, the element is invisible, but the space it occupies is maintained, leaving a hole
in the content The element is still there; you just can’t see it
text-direction
Values: ltr | rtl | inherit
Specifies the direction the text reads, left to right (ltr) or right
to left (rtl).
unicode-bidi
Values: normal | embed | bidi-override | inherit
Related to bi-directional features of Unicode The Recommendation states that it allows the author to generate levels of embedding within the Unicode embedding algorithm
If you have no idea what this means, don’t worry Neither do
I But I guess it’s there should you need it for seriously multi-lingual sites.
The Other Text Properties
exercise 12-3 | Finishing up the menu
Let’s add a few finishing touches to the online menu, menu_summer.html It might
be useful to save the file and look at it in the browser after each step to see the effect
of your edits and to make sure you’re on track The finished style sheet is provided in Appendix A.
First, I have a few global changes to the body element in mind I’ve had a change
of heart about the font-family I think that a serif font such as Georgia would be more sophisticated and appropriate for a bistro menu Let’s also use the line-height property to open up the text lines and make them easier to read Make these updates to the body style rule, as shown:
1.
Trang 4Spaced Out
body {
font-family: Georgia, serif;
font-size: small;
line-height: 175%;
}
I also want to redesign the header section of the document First, remove the teal
color setting by deleting that whole rule Get rid of the font-variant property for
the h1 element as well Once that is done, make the h1 purple and the paragraph
in the header gray You can just add color declarations to the existing rules.
#header { color: teal; } /* delete */
h1 {
font-size: 1.5em;
font-variant: small-caps; /* delete */
color: purple; }
#header p {
font-style: italic;
color: gray; }
Next, to imitate a fancy print menu, I’m going to center a few key elements on
the page using the text-align property Write a rule with a grouped selector to
center the whole header div, the h2 elements, and the paragraphs contained
within the “appetizer” and “entrees” divs, like this:
#header, h2, #appetizers p, #entrees p {
text-align: center; }
I want to make the “Appetizer” and “Main Courses” h2 headings kind of special
Instead of large, bold type, I’m actually going to reduce the font-size, and use all
uppercase letters, extra letter spacing, and color to call attention to the headings
Here’s the new rule for h2 elements that includes all of these changes.
h2 {
font: bold 1em Georgia, serif; /* reduced from 1.2 em */
text-transform: uppercase;
letter-spacing: 8px;
color: purple; }
We’re really close now; just a few more tweaks Add a rule
using contextual selectors that makes the paragraphs in
the Appetizers and Main Courses sections italic
#appetizers p, #entrees p {
font-style: italic; }
Finally, we’ll add a softer color to the menu item names
(in dt elements) Note that the strong elements in those
dt elements stay maroon because the color applied to
the strong elements overrides the color inherited by
their parents.
dt {
font-weight: bold;
color: olive;}
And we’re done! Figure 12-22 shows how the menu looks
now an improvement over the unstyled version, and we
used text properties to do it Notice that we didn’t touch
a single character of the document markup in the process
That’s the beauty of keeping style separate from structure
2.
3.
4.
5.
6.
Adding letter spacing to small type
is one of my favorite heading design tricks It is a good alternative to large type for drawing attention to the element.
D e S I G n t I P
Adding letter spacing to small type
is one of my favorite heading design tricks It is a good alternative to large type for drawing attention to the element.
D e S I G n t I P
Figure 12-22 The formatted Black Goose Bistro menu.
Trang 5Test Yourself
Here are a few questions to see how well you picked up the fundamentals of selectors and text formatting
Here is a chance to get a little practice writing selectors Using the diagram shown in Figure 12-23, write style rules that makes each of the elements described below red (color: red;) Write the selector as efficiently as possible I’ve done the first one for you
html
title style h1 div id="intro" div id="main" p
p class="special" ul h2 p h2 p class="special" img strong li li li strong
Figure 12-23 Sample document structure.
All text elements in the document body {color: red;}
h2 elements
h1 elements and all paragraphs Elements belonging to the class “special”
All elements in the “intro” section
strong elements in the “main” section Extra credit: Just the paragraph that appears after an h2 (hint: this selector will not work in Internet Explorer 6)
1
a
b.
c.
d
e
f.
g
Trang 6Test Yourself
Match the style property with the text samples in Figure 12-24
_ {font-size: 1.5em;}
_ {text-transform: capitalize;}
_ {text-align: right;}
_ {font-family: Verdana; font-size: 1.5em;}
_ {letter-spacing: 3px;}
_ {font: bold italic 1.2em Verdana;}
_ {text-transform: uppercase;}
_ {text-indent: 2em;}
_ {font-variant: small-caps;}
Default font and size
1
2
3
4
5
6
7
8
9
Figure 12-24 Text samples.
2
a
b
c
d
e
f
g
h
i
Trang 7CSS Review: Font and Text Properties
In this chapter, we covered the properties used to format text elements Here
is a summary in alphabetical order
Property Description
font A shorthand property that combines font properties
font-family Specifies a typeface or generic font family
font-size The size of the font
font-style Specifies italic or oblique fonts
font-variant Specifies a small-caps font
font-weight Specifies the boldness of the font
letter-spacing Inserts space between letters
line-height The distance between baselines of neighboring text lines
text-align The horizontal alignment of text
text-decoration Underlines, overlines, and lines through
text-direction Whether the text reads left-to-right or right-to-left
text-indent Amount of indentation of the first line in a block
text-transform Changes the capitalization of text when it displays
unicode-bidi Works with Unicode bidirectional algorithms
vertical-align Adjusts vertical position of inline elements relative to the
base-line
visibility Whether the element is rendered or is invisible
white-space How white space in the source is displayed
word-spacing Inserts space between words
Trang 8IN THIS CHAPTER
Color names in CSS Specifying RGB color values
Foreground and background colors Pseudoclass and pseudoelement selectors
Adding tiling background images Controlling the repeat
and position of background images External style sheets Style sheets for print and
other media
Did you happen to see the Web back in 1993? It was a fairly dreary affair
back then, where every background was gray and all the text was black Then
came the Netscape browser and, with it, a handful of attributes that allowed
rudimentary (but welcome) control over font colors and backgrounds For
years, we made do
But thankfully, now we have style sheet properties that blow those old
attri-butes out of the water So if you happen to view the source of a web page and
see attributes such as bgcolor, background, link, and vlink floating around,
ignore them They are relics of the past Believe me, you’re much better off
without them
We’re going to cover a lot of ground in this chapter Of course, I’ll introduce
you to all of the properties for specifying colors and backgrounds This
chap-ter also rounds out your collection of selector types and shows you how to
create an external style sheet as well as a style sheet just for print Oh, and
there will be cabbages lots and lots of cabbages (you’ll see)
Our first order of business is to talk about the options for specifying color in
CSS, including a primer on the nature of color on computer monitors
Specifying Color Values
There are two main ways to specify colors in style sheets: with a predefined
color name as we have been doing so far:
color: red; color: olive; color: blue;
or, more commonly, with a numeric value that describes a particular RGB
color (the color model on computer monitors) You’ve probably seen color
values that look like these:
color: #FF0000; color: #808000; color: #00F;
We’ll get to all the ins and outs of RGB color in a moment, but first, a short
COLORS AND
BACKGROUNDS
(Plus Even More Selectors and External Style Sheets)
Trang 9Color names
The most intuitive way to specify a color is to call it by name Unfortunately, you can’t make up just any color name and expect it to work It has to be one
of the color keywords predefined in the CSS Recommendation CSS1 and CSS2 adopted the 16 standard color names originally introduced in HTML 4.01 CSS2.1 tossed in orange for a total of 17 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;
Figure 13-1 shows printed approximations of the 17 color keywords in CSS2.1 (they will look different on computer screens, of course) I threw in their numeric values for good measure
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.
RGB 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
For those who are not familiar with how computers deal with color, I’ll start with the basics before jumping into the CSS syntax
Extended Color
Names
CSS Level 3 has a new color module
that gives you a whopping 140
color names to choose from
The module uses a set of color
keywords originally introduced by
the X Window System These colors
have historically been supported
by browsers as (X)HTML attribute
values, but this is the first time
they’ve been standardized for CSS
Some day, we’ll be able to specify
names like blanchedalmond,
burlywood, and papayawhip Won’t
that be special?
Unfortunately, they’re not well
supported for use in style sheets
at this time, but if you’re curious,
you can see the full list online at
www.learningwebdesign.com/
colornames.html or in the CSS3
proposal at
www.w3.org/TR/css3-color/#svg-color
Extended Color
Names
CSS Level 3 has a new color module
that gives you a whopping 140
color names to choose from
The module uses a set of color
keywords originally introduced by
the X Window System These colors
have historically been supported
by browsers as (X)HTML attribute
values, but this is the first time
they’ve been standardized for CSS
Some day, we’ll be able to specify
names like blanchedalmond,
burlywood, and papayawhip Won’t
that be special?
Unfortunately, they’re not well
supported for use in style sheets
at this time, but if you’re curious,
you can see the full list online at
www.learningwebdesign.com/
colornames.html or in the CSS3
proposal at
www.w3.org/TR/css3-color/#svg-color
Trang 10Specifying Color Values
The RGB color model
R: 255
(100%)
G: 255
(100%) (100%) B: 255
RGB: 255, 255, 255
Gray RGB: 0, 0, 0
Pleasant lavender
R: 128 (50%)
G: 128 (50%) B: 128 (50%)
R: 0 (0%)
G: 0 (0%) (0%) B: 0
R: 200 (78%)
R: 178 (70%) R: 130 (51%)
Why 255?
In true RGB color, 8 bits of information are devoted to each color channel.
8 bits can describe 256 shades (288=256), so colors are measured on a scale from 0 to 255.
A word about RGB color
Computers create the colors you see on a monitor by combining three colors
of light: red, green, and blue This is known as the RGB color model You can
provide recipes (of sorts) for colors by telling the computer how much of
each color to mix in The amount of light in each color “channel” is typically
described on a scale from 0 (none) to 255 (full-blast), although it can also be
provided as a percent The closer the three values get to 255 (100%), the closer
the resulting color gets to white (Figure 13-2)
Any color you see on your monitor can be described by a series of three
numbers: a red value, a green value, and a blue value This is one of the ways
that image editors such as Adobe Photoshop keep track of the colors for every
pixel in an image With the RGB color system, a pleasant lavender can be
described as 200, 178, 230
Picking a color
The easiest way to pick a color and find its RGB color values is to use
an image editing tool such as Adobe Photoshop, Photoshop Elements or
Corel Paint Shop Pro Most image tools provide a Color Picker similar to
Photoshop’s shown in Figure 13-3 When you select a color from the spectrum
in the Color Picker, the red (R), green (G), and blue (B) values are listed, as
pointed out in the figure And look next to the # symbol—those are the same
values, converted so they are ready to go in a style sheet I’ll explain the 6-digit
hex values in a moment
Figure 13-2 Colors on computer monitors are made by mixing different amounts
of red, green, and blue light (thus, RGB) The color in the middle of each diagram shows what happens when the three color channels are combined The more light in each channel, the closer the combination
is to white.
Figure 13-2 Colors on computer monitors are made by mixing different amounts
of red, green, and blue light (thus, RGB) The color in the middle of each diagram shows what happens when the three color channels are combined The more light in each channel, the closer the combination
is to white.