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

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 p

• 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%;}

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

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;}

letter-spacing: length | normal | inherit

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

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%;}

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;}

The difference between the default value outside and setting the property to inside is illustrated clearly here:

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-

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;}

Notes

• The general characteristics of this property are supported by the type attribute for

• CSS2 also included values, such as hebrew, cjk-ideographic, hiragana,

removed from the CSS 2.1 specification

• CSS3 includes many more list-style-type values, such as arabic, binary,

margin: margin1 margin4 | inherit

where each margin value is either a length, percentage, auto, or inherit value As a shorthand form, it is possible to set the four margin values (margin-top, margin-right,

A single value will be copied to all four margins With two values, the first value will specify the top and bottom margins, and the second value will specify the right and left margins If three values are specified, the first defines the top margin, the second defines the left and right margins, and the third defines the bottom margin Note that the unspecified margin is inferred from the value defined for its opposite side Lastly, all four values can

3

2 4

p {margin: 15pt;} /* all sides 15pt */

#div1 {margin: 20px 10px;} /* 20px top-bottom, 10px left-right */

margin-bottom

This property sets an element’s bottom margin

Syntax

margin-bottom: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px),

and may take a negative value A percentage value is determined as a percentage of the

height of the containing block The default value for the property is 0.Examples

This property sets an element’s right margin

Syntax

margin-right: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px),

and may take a negative value A percentage value is determined as a percentage of the width

of the containing block The default value for the property is 0.Examples

margin-top

This property sets an element’s top margin

Syntax

margin-top: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px),

and may take a negative value A percentage value is determined as a percentage of the

height of the containing block The default value for the property is 0

This property defines the maximum height a region may expand to if it is relatively sized.Syntax

max-height: length | percentage | inherit

where the value of length is generally a measurement using a fixed value (for example, 100px) Percentages also may be used for relative layouts A value of inherit indicates that the value should be derived from an enclosing parent’s value

max-width: length | percentage | inherit

where the value of length is generally a measurement using a fixed value (for example,

100px) Percentages also may be used for relative layouts A value of inherit indicates that the value should be derived from an enclosing parent’s value

Examples

• While in many cases max-width has not been deemed as important as min-width,

it is quite useful to constrain large regions of text from having overly long lines, which can result in readability problems

min-height

This property defines the minimum height a region may reduce to if it is relatively sized and the browser window is adjusted

Syntax

min-height: length | percentage | inherit

where the value of length is generally a measurement using a fixed value (for example,

100px) Percentages also may be used for relative layouts A value of inherit indicates that the value should be derived from an enclosing parent’s value

Examples

#div1 {height: 50%; max-height: 400px; min-height: 200px;}

#div2 {height: 80%; min-height: 200px;}

min-width: length | percentage | inherit

where the value of length is generally a measurement using a fixed value (for example,

100px) Percentages also may be used for relative layouts A value of inherit indicates that the value should be derived from an enclosing parent’s value

Examples

#div1 {width: 50%; max-width: 800px; min-width: 400px;}

#div2 {width: 80%; min-width: 200px;}

• The default value should be 2 if unspecified.

• Negative values may not be used

outline

This property is a shorthand form that sets all outline properties at once

Syntax

outline: outline-color outline-style outline-width;

The allowed values are similar to border The meaning of each is detailed in each individual property that follows While outlines are similar to borders, their individual sides cannot be set No matter how outline properties are set they apply to the whole outline and not individual sides

p:hover {outline: dashed 1px;}

.test {outline: green solid 10px;}

• The outline is the same on all sides Unlike borders, there is no sense of

considering nonrectangular outlines

• There is unclarity in the specification and implementation on what to do with overlapping outlines, outlines around empty items, and outlines that may surround partially obscured elements Be aware in such cases of unclarity that visual

differences may occur For example, notice here that one browser created two separated outline boxes, given it surrounds empty elements, whereas in the previous illustration the empty elements were outlined:

outline-color

This property sets the color of an element’s outline

Syntax

outline-color: color | invert | inherit

where color is a supported CSS color value, as discussed earlier in the chapter The keyword

screen In other words, any background would be inverted for the outline:

In the case where there are two colors, this can change the outline in various locations

The following example changes the outline in one case to black given a white background and changes it to blue given an orange background:

Examples

p:hover {outline-style: dashed; outline-color: green; outline-width: 1px;}

.test {outline-width: 10px; outline-style: solid; outline-color: #f00;}

.xray {outline-color: invert;}

• Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value using a proprietary property –moz-outline-color

p:hover {outline-style: dashed;}

.test {outline-width: 10px; outline-style: solid; outline-color: black;}

• See the entry for the border-style property for a visual example of each outline style.

• Outlines may not present themselves as boxes, as borders tend to do, because they may wrap irregularly shaped elements; see the entry for outline for a visual example of this

outline-width

This property defines a width for an element’s outline

Syntax

outline-width: length | medium | thick | thin | inherit

Like border-width, this property’s values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on

Examples

p {outline-style: dashed; outline-width: thick;}

.test {outline-width: 10px; outline-style: solid; outline-color: black;}

overflow: auto | hidden | scroll | visible | inherit

By default, content will be visible, but a value of hidden will clip content that extends past the defined region size A value of scroll adds scroll bars appropriately so that content

#div1 {position: absolute; left: 20px; top: 20px;

width: 100px; height: 100px; overflow: scroll;}

#div2 {height: 100px; width: 100px; overflow: hidden;}

where each padding value is either a length, percentage, auto, or inherit value As a shorthand form, it is possible to set the four padding values (padding-top, padding-right,

The padding shorthand property is similar to margin A single value creates equal padding on all sides Up to four values can be used, in the following clockwise order:

defaults to the value defined for the side opposite to it However, unlike the marginproperty, the padding property cannot take negative values

Examples

#div1 {border-style: solid; padding: 10px 20px 10px 5px;}

/* all sides different */

#div2 {border-style: dashed; padding: 50px;}

/* padding of 50px on all sides */

3

2 4

This property sets the distance between an element’s bottom border and the bottom of its contained content

Syntax

padding-bottom: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels A

percentage value is determined as a percentage of the height of the containing block The default value for the property is 0

padding-left

This property sets the distance between an element’s left border and the left edge of its content

Syntax

padding-left: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px) A

percentage value is determined as a percentage of the width of the containing block The default value for the property is 0

Example

p {padding-left: 20px;}

.tight {padding-left: 0;}

#ex8 {padding-left: 40%;}

This property sets the distance between an element’s right border and the rightmost edge of its content

Syntax

padding-right: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px) A

percentage value is determined as a percentage of the width of the containing block The default value for the property is 0

padding-top

This property sets the distance between an element’s top border and the top of its content.Syntax

padding-top: length | percentage | auto | inherit

where the length is measured in any fixed measurement, such as inches (in) or pixels (px)

A percentage value is determined as a percentage of the height of the containing block The

default value for the property is 0

This property is used to control page breaks when printing a document after the bound element box ends

Syntax

page-break-after: always | auto | avoid | left | right | inherit

A value of always forces a page break after the associated element A value of avoidattempts to avoid a page break after the element A value of left forces one or two page breaks after the element so that the next page is considered a left page A value of rightforces one or two page breaks after the element so the next page is considered a right page

The default value of auto neither forces nor forbids a page break, allowing the user agent to decide how to break the content during print

Examples

#breakitdown {page-break-after: always;}

.getitright {page-break-after: right;}

page-break-before: always | auto | avoid | left | right | inherit

A value of always forces a page break before the associated element is encountered A value

two page breaks after the element so that the next page is considered a left page A value of

right forces one or two page breaks after the element so the next page is considered a right page The default value of auto neither forces nor forbids a page break, allowing the user agent to decide how to break the content during print.

Examples

#breakitdownagain {page-break-before: always;}

.lefty {page-break-before: left;}

page-break-inside: always | auto | avoid | left | right | inherit

A value of always forces a page break at any place within the element bound A value of

page breaks after the element so that the next page is considered a left page A value of

page The default value of auto neither forces nor forbids a page break, allowing the user agent to decide how to break the content during print

Examples

#breakitdownyetagain {page-break-inside: always;}

.nobreaks {page-break-inside: avoid;}

position: absolute | fixed | relative | static | inherit

When positioned absolute, the left, right, top, and bottom properties can be used to define the element’s precise location, using the affected element’s upper-left corner (0,0) as reference Because elements can contain other elements, a position of 0,0 is not necessarily the upper-left corner of the browser When a relative position is used, offsets will be related to the object’s natural position in the document flow An element with absoluteposition may be set to defined coordinates but will scroll with a window However, an

#region1 {position: relative; left: 190px; top: 30px;}

#region2 {position: absolute; left: 120px; top: 50px;}

#left {position: absolute; bottom: 10; right: 500px;}

#norm {position: static;}

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

quotes: quote-pair1 quote-pairN | none | inherit

where each quote-pair is a set of two strings, the first for the open quote value and the

second for the close quote value Having more than one quote-pair allows developers to specify different quote symbols for each level of nesting A value of none produces no quotation marks

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

right side of either the containing element or browser window if directly within the <body>.

Syntax

right: 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 left

Examples

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

#div2 {position: absolute; right: 50%; bottom: 30%;}

#div3 {position: absolute; left: 10px; right: auto;}

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

#sideBar {position: fixed; right: 0; top: 0; width: 200px; height: 100%;}

table-layout: auto | fixed | inherit

A value of fixed uses the fixed table layout algorithm, which relays not the content of the cells but simply the width of the tables, columns, borders, and defined cell spacing This should result in faster page rendering The default value of auto uses the standard automatic table layout algorithm, which may require multiple passes or take perceptible time to calculate, particularly when the table is complex or heavily nested

Examples

table.fast {table-layout: fixed;}

table.slow {table-layout: auto;}

text-align: center | justify | left | right | inherit

where the keyword values align the text of an element appropriately left, right or center

A value of justify will justify text on left or right side depending on document reading direction A value of inherit will derive this property value from an enclosing parent

Examples

.goleft {text-align: left;}

p.just {text-align: justify;}

h1.centered {text-align: center;}

text-decoration: blink | inherit | line-through | none | overline | underline

where line-through presents affected text as struck-thru, overline as text with a line over it, underline as underlined text, and blink (when supported by a browser) blinks the text A value of inherit will derive this property value from an enclosing element, while a value of none will override it

Example

a {text-decoration: none;}

a:visited {text-decoration: line-through;}

a:hover {text-decoration: underline;}

.onsale {text-decoration: blink;}

.underlined {text-decoration: underline;}

.struck {text-decoration: line-through;}

• Many user agents choose not to support the blink value for this property Action is

to present the text normally At the time of this writing, IE browsers (8 or less) and Safari browsers (3 or less) do not support the blink value

• The text-decoration property is often used with the a element and its associated pseudo-classes (a:active, a:hover, a:link, and a:visited) to turn off link underlining or set different looks for hover or visited states Page authors concerned about accessibility should be careful to provide alternate indicators such as position

or style if underlines are removed

text-indent

This property specifies the indent in the first line of a block-level element

Syntax

text-indent: length | percentage | inherit

where length is a standard length unit (10px), a percentage is a percentage value relative to

the enclosing element, and inherit derives the value of the property from some parent element

• This property applies to block elements, table cells, and inline block types

• The default value is 0, which indicates no indentation

text-transform

This property transforms the case of the affected text