HTML & CSS: The Complete Reference- P13

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
56
lượt xem
10
download

HTML & CSS: The Complete Reference- P13

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'html & css: the complete reference- p13', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: HTML & CSS: The Complete Reference- P13

  1. 576 Part II: Core Style 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;}
  2. Chapter 5: CSS Syntax and Property Reference 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: 20 30 30 20 200 px px px px px PART II 300 px 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+
  3. 578 Part II: Core Style 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%;}
  4. Chapter 5: CSS Syntax and Property Reference 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. PART II 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
  5. 580 Part II: Core Style 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 (). The values decimal, lower- roman, upper-roman, lower-alpha, and upper-alpha are typically used on ordered lists (). 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+
  6. Chapter 5: CSS Syntax and Property Reference 581 Notes • The general characteristics of this property are supported by the type attribute for the , , and (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. PART II 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: 1 margin-top Border Padding 4 2 margin-right margin-left Content 3 margin-bottom 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.
  7. 582 Part II: Core Style 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.
  8. Chapter 5: CSS Syntax and Property Reference 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 PART II 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.
  9. 584 Part II: Core Style 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;}
  10. Chapter 5: CSS Syntax and Property Reference 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 PART II 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;}
  11. 586 Part II: Core Style 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 or various CSS tricks were often employed to emulate this property. orphans This property defines the minimum number of lines of a paragraph that must be left at the bottom of a page. Syntax orphans: integer | inherit Examples #hateorphans {orphans: 5;} .orphaned {orphans: 1;} Compatibility CSS 2, 3 IE 8+ Netscape 6+, Firefox 1+ Opera 7+, Safari 1+ Notes • This property is really only meaningful in a paged environment such as print output. • 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.
  12. Chapter 5: CSS Syntax and Property Reference 587 While outlines may resemble borders, they take up no additional space and may overlay other content outside of a block if need be, as shown here: PART II Because outlines are drawn over an item, rather than around it, they cause no reflow when applied dynamically: Hover Outline Hover Border Also note that outlines can appear as nonrectangular depending on how they are drawn around items:
  13. 588 Part II: Core Style Examples p:hover {outline: dashed 1px;} .test {outline: green solid 10px;} Compatibility CSS 2, 3 IE 8+ Firefox 1.5+ Opera 7+, Safari 1.2+ Notes • Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value using a proprietary property –moz-outline. • The outline is the same on all sides. Unlike borders, there is no sense of outline- top or outline-left. This apparent omission should make perfect sense when 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 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:
  14. Chapter 5: CSS Syntax and Property Reference 589 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;} PART II .test {outline-width: 10px; outline-style: solid; outline-color: #f00;} .xray {outline-color: invert;} Compatibility CSS 2, 3 IE 8+ Firefox 1.5+ Opera 7+, Safari 1.2+ Notes • Many browsers do not support the invert value the same and may invert based upon one color in the case of multiple colors found in different areas of an element’s background. • Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value using a proprietary property –moz-outline-color. outline-style This property defines a style for an element’s outline. Syntax outline-style: dashed | dotted | double | groove | inset | none | outset | ridge | solid | inherit The values supported should be the same as what is defined for border-style except the value hidden which is not defined for this property. Examples p:hover {outline-style: dashed;} .test {outline-width: 10px; outline-style: solid; outline-color: black;} Compatibility CSS 2, 3 IE 8+ Firefox 1.5+ Opera 7+, Safari 1.2+ Notes • Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value using a proprietary property –moz-outline-style.
  15. 590 Part II: Core Style • 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;} Compatibility CSS 2, 3 IE 8+ Firefox 1.5+ Opera 7+, Safari 1.2+ Notes • Older Firefox- and Mozilla-based browsers like Netscape 6+ could set this value using a proprietary property –moz-outline-width. • As described in the entry for outline, when setting outline-width the outline should not take up canvas space and may overlap other elements. overflow This property determines an element’s behavior when its content doesn’t fit into the space defined by the element’s other properties. Syntax 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
  16. Chapter 5: CSS Syntax and Property Reference 591 can be viewed. A value of auto allows the user agent to decide how to handle content that overflows. The following illustration should make the meaning of the values clear: Visible Hidden PART II Scroll Auto Examples #div1 {position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; overflow: scroll;} #div2 {height: 100px; width: 100px; overflow: hidden;} Compatibility CSS 2, 3 IE 4–5.5 (buggy), 6+ Netscape 4–4.8 (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ padding The padding property sets the space between an element’s border and its content. Syntax padding: padding1 [... padding4] | inherit
  17. 592 Part II: Core Style 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, padding-bottom, and padding-left) independently with this property: margin border 1 padding-top 4 2 padding-right padding-left Content 3 padding-bottom 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: padding-top, padding-right, padding-bottom, and padding-left. Any missing value defaults to the value defined for the side opposite to it. However, unlike the margin property, 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 */ #div3 {padding: 10px 20px;} /* top and bottom 10px and left and right 20px padding */ #div4 {padding: 5px 10px 15px;} /* top 5px, right and left 10px and bottom 15px */ Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+
  18. Chapter 5: CSS Syntax and Property Reference 593 Note • Elements may have default padding on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all padding values globally with a wildcard rule like * {padding: 0;} and build up individual values. padding-bottom This property sets the distance between an element’s bottom border and the bottom of its contained content. Syntax PART II 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. Examples p {padding-bottom: 10pt;} .tight {padding-bottom: 0;} #ex2 {padding-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 paddings on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all padding values globally with a wildcard rule like * {padding: 0;} and build up individual values. 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%;}
  19. 594 Part II: Core Style Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default paddings on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all padding values globally with a wildcard rule like * {padding: 0;} and build up individual values. padding-right 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. Example p {padding-left: 10px; padding-right: 50px;} .flush {padding-right: 0;} #demo {padding-right: 50%;} Compatibility CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+ Note • Elements may have default paddings on them, and these values may vary by user agent. Because of this inconsistency, many developers prefer to clear all padding values globally with a wildcard rule like * {padding: 0;} and build up individual values. 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.
  20. Chapter 5: CSS Syntax and Property Reference 595 Example p {padding-top: 10px; padding-bottom: 100px;} .flush {padding-top: 0;} #demo2 {padding-top: 50%; padding-left: 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 paddings on them and these values may vary by user PART II agent. Because of this inconsistency, many developers prefer to clear all padding values globally with a wildcard rule like * {padding: 0;} and build up individual values. page-break-after 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 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 to decide how to break the content during print. Examples #breakitdown {page-break-after: always;} .getitright {page-break-after: right;} Compatibility CSS 2, 3 IE 4+ Netscape 6+, Firefox 1+ Opera 7+, Safari 1+ page-break-before This property is used to control page breaks when printing a document before the bound element box starts. Syntax 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 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
Đồng bộ tài khoản