14.4 Common Style Sheet Properties In the previous examples, font-family and color are properties also called attributes, and assigning values to them defines the style of the document.
Trang 114.4 Common Style Sheet Properties
In the previous examples, font-family and color are properties (also called attributes),
and assigning values to them defines the style of the document Listed in Table 14.1 are
some of the properties commonly used in style sheets Many of these properties are used
in the style sheets defined throughout this chapter and later as properties of the style
object used with JavaScript The Web Design Group provides a complete listing of this
information at http://www.htmlhelp.com/reference/css/properties.html.
E X P L A N A T I O N
1 Three selectors, h1, h2, and h3, are grouped together The declaration block
en-closed in curly braces sets the color property to blue Whenever any one of the h1,
h2, or h3 elements is used in the document, its text will be blue
2 The declaration block for the h1 selector consists of a group of properties and
val-ues to further define the font style for this heading
3 The font property, in this example, groups the font values as a list, rather than
cre-ating individual property/value pairs as done on line 2
4 Now the h1 tag is tested to see if the style was applied, and it is!
5 The style for the h2 tag is tested and it has been applied.
6 The only style set for the h3 tag is a blue font, and that’s all we get, as shown in
Figure 14.2
Figure 14.2 Grouping selectors and declarations for h1, h2, and h3 HTML elements.
Trang 2Table 14.1 Style Sheet Properties
Fonts
font 12pt/14pt sans-serif, 80% sans-serif,
x-large/110% arial, normal small-caps
All
font-family serif, sans-serif, cursive, fantasy, monospace; or
any specific font typeface name may be used
All
font-size 12pt, larger, 150%, 1.5em All
font-size-adjust xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, 12pt, 25%
All
font-stretch normal, wider, narrower, ultra-condensed,
extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
All
font-weight normal, bold, bolder, lighter,100, 200 900 All
Colors and Background
background-attachment scroll, fixed All
background-color red, blue, #F00, transparent All
background-image URL (bay.gif), none All
background-position right top, top center, center, bottom, 100% 100%,
0% 0%, 50% 50%
Block-level and replaced elements
background-repeat repeat, repeat-x (horizontally), repeat-y
(vertically), no-repeat
All
color red, green, #F00, rgb(255,0,0) All
Text Alignment
line-height normal, 1.2, 1.2em, 120% All
text-decoration underline, overline, line-through, blink All
text-transform capitalize, uppercase, lowercase, none All
Continues
Trang 3Text Alignment (Continued)
text-align left, right, center, justify All
vertical-align baseline, sub, super, top, text-top, middle,
bottom, text-bottom, 50%
Inline elements
Margins and Borders
border-bottom <border-bottom-width> or <border-style> or
<color>
All
border-bottom-width thin, medium, thick, 2em All
border-left <border-left-width> or <border-style> or <color> All
border-left-width thin, medium, thick, 3em All
border-right <border-right-width> or <border-style> or
<color>
All
border-right-width thin, medium, thick, 1cm All
border-style [none], dotted, dashed, solid, double, groove,
ridge[inset,outset]{1,4}
All
border-top <border-top-width> or <border-style> or <color> All
border-top-width thin, medium, thick, 3em All
border-width thin, medium, thick, 5cm All
clear none, left, right, both (allows or disallows
floating elements on its sides)
All
float left, right, or none (wraps text around an
element, such as an image)
All
replaced element
margin 5em, 3em, 2em, 1em (top, right, bottom, left) All
Table 14.1 Style Sheet Properties (continued)
Trang 414.4.1 Units of Measurement
You can express the size of a given property in different units of measurement; for
exam-ple, a font size can be expressed in pixels or ems or points (the default is pixels) Colors
can also be expressed in combinations of red, green, and blue, either by the name of the
color, or its hexadecimal value
Measurement is used in three categories: absolute units, relative units, and proportional
units For example, a point size measurement (e.g., 14pt) would be the actual size (absolute)
of a particular font; a value (e.g., 5em) could be relative to the size of the current font; and a
color (e.g., 50%80%100%) could represent red, green, and blue as a percentage value of the
original color Relative sizes larger and smaller (relative to the parent font) can be used when
defining a font These sizes are determined by browsers or other user agents.2 Tables 14.2
and 14.3 introduce the types of measurements that are often used in style sheets
Margins and Borders (Continued)
padding 2em, 4em, 6em (right, bottom, left) All
width 12em, 30%, auto (initial width value) Block-level and
replaced element a
a A replaced element has set or calculated dimensions, such as img, select, textarea.
2 User agents include Web browsers, search engine crawlers (spiders), cell phones, screen readers, and
Braille browsers used by people with disabilities.
Table 14.2 Font Size Units
Absolute Font Size Unit
inches (in)
centimeters (cm)
Continues
Table 14.1 Style Sheet Properties (continued)
Trang 5ptg Here are some examples:
• font-size: 10pt
• top: 20px
• margin: 1em
• margin-right: 20%
• font-size: xx-large
• font-size: 150%
14.4.2 Working with Colors
What is style without color? Tables 14.4 and 14.5 give information for managing color
You can use these properties to create color for the document’s background and fonts,
margins, borders, and more The colors can be expressed with real names (e.g., red, blue,
yellow, magenta) or their corresponding hexadecimal values (e.g., #FF0000, #0000Ff,
#ffff00, #ff00FF).
millimeters (mm)
points (pt) 1/72th of an inch
picas (pc) 12 points
Table 14.3 User Agent Determined Font Sizes
CSS Absolute Sizes HTML Font Size
Table 14.4 Color Properties
background-color red, blue, #F00 All
color red, green, #F00, rgb(255,0,0) All
Table 14.2 Font Size Units (continued)
Trang 6Table 14.5 Common Color Names and Hexadecimal Values
Color Depth. Sometimes colors don’t look as crisp and bright as you would expect;
pink might look like red, or some of the colors in a field of flowers might be pale In
Chapter 10, “It’s the BOM! Browser Objects,” we discussed the screen object It has a
property called colorDepth that will tell you how many distinct colors (bits per pixel) a
computer can handle For example, a color-bit depth of 4 will display 16 colors and a
color-bit depth of 24, represented as 2 to the 24th power, will provide 16.7 million
col-ors How many colors can your computer display?
There are a number of color charts available on the Web that provide Web-safe color
palettes.3 See www.lynda.com, www.paletteman.com, or www.visibone.com
Hexadecimal Codes. These are the codes that define colors They are groups of
three hexadecimal (base 16) numbers The first number is red, the second green, and
the third blue Each hexadecimal number is an RGB triplet 00 is the lowest hue, and FF
is the highest For example, red is ff0000, blue is 0000ff, green is 00ff00, and purple is
990099 For a complete list of CSS colors, their names, hex values, shades, and color
mixer, go to http://www.w3schools.com/css/css_colornames.asp These colors are
sup-ported by all major browsers
3 “Browser-Safe Palette only contains 216 colors out of a possible 256 That is because the remaining 40
col-ors vary on Macs and PCs By eliminating the 40 variable colcol-ors, this palette is optimized for
cross-plat-form use.” —Lynda Weinman (http://www.lynda.com/resources/webpalette.aspx).
Trang 7E X A M P L E 1 4 3
<html>
<head><title>Colors</title>
<style type="text/css">
font-family:cursive;
background-color: blue; }
2 h1 {color: #FFFF33;} /* yellow */
</style>
</head>
4 <body>
<font size="+2">
5 <h1>Welcome to my Stylin' Page</h1>
6 <p>This paragraph is all white text on a blue background.<br />
Do you like it? I think it has potential
</p>
</body>
</html>
E X P L A N A T I O N
1 A style is defined for the background of the document It will be blue
2 The text for all <h1> tags will be yellow (#FFFF33 is yellow).
3 Paragraphs will have white text
4 The body color of the page was defined in the CSS style sheet to be blue
5 The heading level <h1> is displayed in its yellow style.
6 Any text enclosed in <p> </p> will be white against a blue body The font was also
set by CSS See Figure 14.3 for output
Figure 14.3 Colored text and background.
Trang 814.4.3 Working with Fonts
The presentation of a document would be quite boring if you only had one font face and
size available CSS lets you specify a style for the fonts in a document in a variety of ways—
by family, size, color, and others (see Table 14.6) There are a huge number of fonts to pick
from, although it’s a good idea to specify fonts that users are likely to have installed Like
the HTML <font> tag, CSS lets you specify several font families (see Table 14.7), and will go
from left to right, selecting the one available on your computer See Figure 14.5 to sample
different font styles for your operating system
Table 14.6 Font Properties
Property Value/Example
Elements Affected
font 12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial,
normal small-caps
All
font-family serif, sans-serif, cursive, fantasy, monospace; or any
specific font family typeface name may be used
All
font-weight normal, bold, bolder, lighter, 100, 200 900 All
Table 14.7 Font Families
Family Names Specific Family Typeface Names
Serif
Sans serif
Monospace
Cursive
Fantasy