Tài liệu HTML & CSS: The Complete Reference- P13 ppt

576 P a r t I I : C o r e S t y l e

Compatibility

CSS 1, 2, 3 IE 4+ Netscape 4+, Firefox 1+ Opera 4+, Safari 1+

Notes

• Support for varying degrees of light or bold beyond simple bold or not bold is

generally not implemented by browsers though theoretically printing may support

such distinctions.

• Theoretically, application of bold to a font may allow a mapping from one font like

Helvetica to a related font like Helvetica Bold or Helvetica Black. In practice, such

mappings don’t happen.

height

This property sets the height of an element’s content region.

Syntax

height: length | percentage | auto | inherit

Standard positive length units can be used, and pixels (px) is often the assumed measurement

in browsers. Percentage values, based on the height of the containing element, can also be

used. The default value of auto automatically calculates the width of an element, based on

the height of the containing element and the size of the content.

Examples

p {height: 400px; width: 200px; padding: 10px; border: solid 5px;}

#div1 {height: 50%; width: 50%;}

Compatibility

CSS 1, 2, 3 IE 4+ Netscape 4+, Firefox 1+ Opera 4+, Safari 1+

Notes

• The actual size of an object on a browser canvas is not solely defined by the height

property, as values for borders and padding affect the space taken. For example,

given the CSS here

#div1 {height: 200px; padding: 30px; border: solid 20px;}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 5 : C S S S y n t a x a n d P r o p e r t y R e f e r e n c e 577

PART II

the height of the content itself may be 200px but the overall canvas space consumed

is 300px to account for the borders and padding:

left

This property defines the x (horizontal) coordinate for a positioned element, relative to the

left side of the containing element or browser window.

Syntax

left: length | percentage | auto | inherit

where length can be specified in the standard units of length, such as inches (in) and so on,

but is nearly always set in pixels (px), and percentage corresponds to a percentage of the

containing object’s dimensions. The default value, auto, lets this property function as placing

the object where it normally would fall in the document flow. For relative position, this will

likely be treated as 0. For absolute and fixed positioning, it will calculate a value based upon

other set properties, particularly right.

Examples

#div1 {position: absolute; left: 100px; top: 150px;}

#div2 {position: absolute; left: 50%; top: 30%;}

#div3 {position: absolute; left: auto; right: 500px; bottom: 5px; top: auto;}

/* left will evaluate to a position calculated off the right position */

#navBar {position: fixed; left: 0; top: 0;}

Compatibility

CSS 2, 3 IE 4+ Netscape 4+, Firefox 1+ Opera 6+, Safari 1+

200 px

300 px

30

px

30

px

20

px

20

px

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

578 P a r t I I : C o r e S t y l e

Note

• Browsers tend to assume pixel measurements if a length unit is not set.

letter-spacing

This property sets the amount of spacing between letters.

Syntax

letter-spacing: length | normal | inherit

Length values can be set in various units (negative values are permitted) or to the default

value normal.

Examples

.tight {font-family: Arial; font-size: 14pt; letter-spacing: 2pt;}

p {letter-spacing: 1em;}

p.norm {letter-spacing: normal;}

.superTight {letter-spacing: -5px;}

Compatibility

CSS 1, 2, 3 IE 4+ Netscape 6+, Firefox 1+ Opera 4+, Safari 1+

Note

• This property does not enable full kerning of text as it will not be possible to adjust

the space between two adjacent kerning pairs of letters without crossing tags. In

short because of the way markup and style intersect, it simply is not possible to

perfectly adjust spacing differently on either side of a letter. However, given the

fluid nature of screen displays, what is provided for is likely more than adequate.

line-height

This property sets the height (leading) between lines of text in a block-level element such as

a paragraph.

Syntax

line-height: number | length | percentage | normal | inherit

Values can be specified as a number of lines, a number of units (pixels, points, inches,

centimeters, and so on), or a percentage of the font size. Negative values are not allowed.

The default value of normal is typically equivalent to 1.0 to 1.2 depending on the

implementation.

Examples

.double {line-height: 2;}

.double2 {line-height: 200%;}

p {font-size: 14px; line-height: 16px;}

p.norm {line-height: normal;}

body {line-height: 4ex;}

div {line-height: 125%;}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 5 : C S S S y n t a x a n d P r o p e r t y R e f e r e n c e 579

PART II

Compatibility

CSS 1, 2, 3 IE 3+ Netscape 4+ (bugs), 6+, Firefox 1+ Opera 4+, Safari 1+

Note

• Alternatively, line-height can be set through the shorthand font property.

list-style

This shorthand property sets list-style-type, list-style-position, and list￾style-image.

Syntax

line-style: list-style-type | list-style-position | list-style-image

Each of the individual properties is detailed in the following entries. While the defined order

is suggested in practice, the properties can appear in any order.

Examples

ul {list-style: inside url("bullet.gif");}

#square {list-style: outside square;}

ol {list-style: lower-roman inside;}

Compatibility

CSS 1, 2, 3 IE 4+ Netscape 6+, Firefox 1+ Opera 4+, Safari 1+

list-style-image

This property assigns a graphic image to a list item.

Syntax

list-style-image: url(url of image) | none

Examples

ul {list-style-image: url(ball.gif);}

ul.remote {list-style-image: url(http://htmlref.com/book.png);}

Compatibility

CSS 1, 2, 3 IE 3+ Netscape 4+, Firefox 1+ Opera 4+, Safari 1+

list-style-position

This property specifies whether the labels for an element’s list items are positioned inside or

outside the “box” defined by the listed item.

Syntax

list-style-position: inside | outside | inherit

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

580 P a r t I I : C o r e S t y l e

The difference between the default value outside and setting the property to inside is

illustrated clearly here:

Examples

ol {list-style-type: upper-roman; list-style-position: outside;

background: yellow;}

ul {list-style-type: square; list-style-position: inside;

background: yellow;}

Compatibility

CSS 1, 2, 3 IE 4+ Netscape 6+, Firefox 1+ Opera 4+, Safari 1+

list-style-type

This property defines labels for a list of items.

Syntax

list-style-type: disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin |

upper-latin | armenian | georgian | lower-alpha |

upper-alpha | none | inherit

The value none prevents a list label from displaying. CSS1 defines disc, circle, and

square, which are typically used on unordered lists (<ul>). The values decimal, lower￾roman, upper-roman, lower-alpha, and upper-alpha are typically used on ordered lists

(<ol>). These property types correspond to the (X)HTML type attributes for lists. CSS2

adds more values, primarily for ordered lists in foreign languages.

Examples

ol {list-style-type: upper-roman;}

ol.none {list-style-type: none;}

.ichi-ni {list-style-type: hiragana;}

Compatibility

CSS 1, 2, 3 IE 4+ (partial), IE 8+ Netscape 4+, Firefox 1+ Opera 4+, Safari 1+

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.