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 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 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 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 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 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 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 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. 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 581 PART II 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 581 Notes • The general characteristics of this property are supported by the type attribute for the <ol>, <ul>, and <li> (X)HTML tags. • CSS2 also included values, such as hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, and katakana-iroha. These values were later removed from the CSS 2.1 specification. • CSS3 includes many more list-style-type values, such as arabic, binary, lower hexadecimal, mongolian, thai, ethiopic, hangul, norwegian, and somali. • Some CSS2 and most CSS3 values for this property are not supported in browsers. margin This property sets a consistent margin on all four sides of the affected element. Syntax 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, margin-bottom, and margin-left) independently with this property: 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 also be set in order of top, right, bottom, left. Content margin-right margin-left margin-bottom Border margin-top Padding 1 3 2 4 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 582 P a r t I I : C o r e S t y l e 582 P a r t I I : C o r e S t y l e Examples p {margin: 15pt;} /* all sides 15pt */ #div1 {margin: 20px 10px;} /* 20px top-bottom, 10px left-right */ #div2 {margin: 10px 10px 5px 10px;} /* 10px top, 10px right 5px bottom, 10px left */ Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default margins on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all margins with a wildcard rule like * {margin: 0;} and build up individual values. 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 p {margin-bottom: 10pt;} .tight {margin-bottom: 0;} #spec {margin-bottom: 10%;} Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default margins on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all margins with a wildcard rule like * {margin: 0;} and build up individual values. margin-left This property sets an element’s left margin. Syntax margin-left: 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. 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 583 PART II 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 583 Examples p {margin-left: 3em;} .tight {margin-left: 0;} #spec {margin-left: 15px;} Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default margins on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all margins with a wildcard rule like * {margin: 0;} and build up individual values. margin-right 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 p {margin-right: 1em;} .tight {margin-right: 0;} #spec {margin-right: 25px;} Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default margins on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all margins with a wildcard rule like * {margin: 0;} and build up individual values. 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 584 P a r t I I : C o r e S t y l e 584 P a r t I I : C o r e S t y l e Example p {margin-height: 3em;} .tight {margin-height: 0;} #spec {margin-height: 15px;} Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default margins on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all margins with a wildcard rule like * {margin: 0;} and build up individual values. max-height 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. Examples #div1 {width: 50%; max-width: 800px; min-width: 400px; height: 50%; max-height: 1000px;} #div2 {height: 100%; max-height: 1200px;} Compatibility CSS 2, 3 IE 7+ Netscape 6+, Firefox 1+ Opera 7+, Safari 1+ max-width This property defines the maximum width a region may expand to if it is relatively sized. Syntax 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 #div1 {width: 50%; max-width: 800px; min-width: 400px;} #div2 {width: 80%; max-width: 500px;} 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 585 PART II 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 585 Compatibility CSS 2, 3 IE 7+ Netscape 6+, Firefox 1+ Opera 7+, Safari 1+ Note • 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;} Compatibility CSS 2, 3 IE 7+ Netscape 6+, Firefox 1+ Opera 7+, Safari 1+ Note • In Internet Explorer 6 and other nonconforming older browsers, JavaScript and various CSS tricks were often employed to emulate this property. min-width This property defines the minimum width a region may reduce to if it is relatively sized and the browser window is adjusted. Syntax 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;} Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... of the font in the containing element, while text-bottom aligns things with the bottom of the font A value of middle aligns the middle of text or images to the middle of the x-height of the containing element A value of bottom aligns the bottom of text or images with the bottom of the lowest element, relative to the baseline The sub and super values provide subscript and superscript style Positive and... sets the vertical positioning of text and images with respect to the baseline setting Syntax vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | percentage | length | inherit A value of top aligns the top of text or images with the top of the tallest element, relative to the baseline A value of text-top aligns the top of text or images with the top of the font in the. .. lines, as in normal HTML/ XHTML The pre value makes the element act much like a tag and preserves all white space The value of nowrap prevents lines from wrapping if they exceed the element’s content width The value of pre-line collapses white space, save newlines, which are preserved The value of pre-wrap breaks newlines that would cause text to break out of an element’s box; otherwise, it acts... place within the element bound A value of avoid attempts 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 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... indicate the playing sound may mix with inherited sounds; otherwise, the playing sound replaces any currently playing sounds When a value of repeat is present, the sound will repeat if the time of reading is longer than the background sound play-during: url(holdmusic.wav) mix repeat;} richness number | inherit Specifies the richness or power of a speaking voice in a range from 0 to 100 The higher the value,... 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... inherit specifies that the visibility state is inherited from the containing parent • This property is not the same as display: none as it simply makes the item invisible; it does not completely remove it from the display canvas The following example demonstrates this: PART II Note 604 Part II: Core Style However, this distinction may not matter when an appropriate z-index value has made the hidden object... 1, 2 IE 4+ Netscape 4+ (incomplete), Netscape 6+ (complete) , Firefox 1+ Opera 4+, Safari 1+ Notes • 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... 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 invert is also supported and should perform a color inversion on the pixels on the screen In other words, any background would be inverted for the outline:... 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 absolute position . 581 Notes • The general characteristics of this property are supported by the type attribute for the <ol>, <ul>, and <li> (X )HTML tags. •. 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