Pro CSS Techniques- P8

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

0
43
lượt xem
7
download

Pro CSS Techniques- P8

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 'pro css techniques- p8', 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: Pro CSS Techniques- P8

  1. 322 CHAPTER 14 ■ EVERYTHING FALLS APART Summary You now have the tools and knowledge to diagnose and fix the major issues you’re likely to encounter developing with (X)HTML and CSS. No CSS problem is impossible to solve; it just takes patience and a logical process, along with a handful of resources and reference material. If you fol- low these suggestions, you’ll be able to hold onto most of your sanity during the testing process.
  2. APPENDIX A ■■■ CSS Reference A ppendix A serves as a full reference to all CSS 2.1 properties, including basic browser sup- port information for the four most commonly used desktop browsers: Firefox, Safari, Opera, and Internet Explorer. CSS Units, Keywords, and Other Property Values CSS includes a fixed set of units and keywords as values for several of its properties. The first section of this appendix covers these property values. Later in the appendix, when we cover individual properties you’ll find references to these predefined values. Factors and Integers Numeric values in CSS can be either factors (decimal numbers) or integers (whole numbers). In most cases, negative versions of both are allowed. Colors CSS colors can be specified as a red, green, and blue (RGB) value, a hexadecimal value, or one of 17 predefined color name keywords. Few web designers use RGB values. Hexadecimal is the most common method used, followed by color keywords. Hexadecimal Value A hexadecimal value is the hash symbol, or pound sign (#), followed by pairs of hexadecimal digits specifying red, green, and blue components of the intended color. Hexadecimal digits are numbers or letters in the range 0–9 or a–f. Three-digits shortcuts in the form #rgb can be substituted for #rrggbb. Examples: #50017c, #d0cecf, #dfdfdf, #f80, #9c0 323
  3. 324 APPENDIX A ■ CSS REFERENCE Color Name The available color names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. RGB Value Red, green, and blue components are specified as either percentages or integers in the range 0–255. Examples: rgb(100%, 50%, 0%), rgb(255, 128, 0) Fonts The different font families and system font keywords are listed here. Generic Font Families First, here are the generic font families: • Sans-serif • Serif • Monospace • Cursive • Fantasy System Font Keywords There are six possible system font keywords: caption, icon, menu, message-box, small-caption, and status-bar. These are not intended to be used by CSS designers, but rather are used by the browsers themselves. They’re included here for the sake of completeness, but you, as the CSS author, needn’t concern yourself with them that much. Length CSS lengths are indicated as a decimal number followed by an absolute or relative unit. All CSS length values must include a unit, unless that value is 0. Also, note that the line-height property can accept a number without a unit, but this is actually a scaling factor, not a length. Absolute Units Absolute units that can accompany length values include the following: • mm (millimeter) • cm (centimeter) • in (inch) • pt (point) • pc (pica)
  4. APPENDIX A ■ CSS REFERENCE 325 Relative Units Relative units that can accompany length values include the following: • em (size of em square in current font) • ex (size of x-height in current font) • px (pixel) Percentages Several CSS properties allow for percentages as values. A percentage in CSS is indicated as a decimal number in the range 0–100 followed by a percent symbol (%). Position Keywords Five position keywords as available as values for several properties: left, right, center, top, and bottom. URLs Some properties can take a URL to a file (often an image) as a value. In these cases, the possible syntaxes are as follows: url(protocol://server/pathname) url(pathname) Properties That Accept Multiple Instances The following properties can be used to set the associated individual top, right, bottom, and left properties: margin, padding, border-width, border-style, and border-color. When multiple instances of a property are used, the following ordering applies: top, right, bottom, left (clockwise around the element). Examples include • margin: 1em; /* all margins set to 1em */ • margin: 1em 2em; /* top and bottom margin set to 1em, left and right margin set to 2em */ • margin: 1em 2em 3em; /* top margin set to 1em, left and right margin set to 2em, bottom margin set to 3em */ • margin: 1em 2em 3em 4em; /* top, right, bottom, left, respectively */ Inherit The keyword inherit is a valid value for all CSS properties. Anytime inherit is stated, the associated property will be set to the same value as the parent of the selected element or elements. Most properties inherit naturally, so many times you will not need to specify it explicitly, but it is available if you need it.
  5. 326 APPENDIX A ■ CSS REFERENCE CSS Properties The following is a reference to all CS properties. In the Value component of each, the pipe character (|) indicates the word “or.” In the “Supported by” component, Firefox refers to Firefox 1.5, Safari refers to Safari 2.0, Opera refers to Opera 9, and Internet Explorer refers to Internet Explorer 6 (the current versions of these browsers at the time of this writing). Typefaces, Text Color, Text Size, and Similar Properties The following properties control the appearance of text on your page. color Indicates the text color. Note that the value of the color property is also applied for text decorations (such as underlines) and as an initial value for border colors (but it’s overridden if a border color is explicitly specified). Value: | | Initial value: Determined by user agent Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font A shorthand property for specifying all font properties as well as line height. Value: font-style font-variant font-weight font-size/line-height font-family | Initial value: See individual properties Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer ■Note line-height is optional. font-style, font-variant, and font-weight are optional and may appear in any order. font-family Indicates the font family (typeface) to be used. The first listed font family (whether specific or generic) found to be available to the user agent will be used.
  6. APPENDIX A ■ CSS REFERENCE 327 Value: A comma-separated list of | Initial value: Determined by user agent Inherited: yes Applies to: all elements (except replaced elements) Supported by: Firefox, Safari, Opera, Internet Explorer font-size Indicates the size of the type. Note that sizes refer to the size of the font’s em square, not the size of any particular character within the font. Value: | | | | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger Initial value: medium Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font-style Used to specify an oblique or italic style within the current font family. Value: normal | italic | oblique Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font-variant Used to specify a small-caps style within the current font family. Value: normal | small-caps Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
  7. 328 APPENDIX A ■ CSS REFERENCE font-weight Used to specify the weight of the current font. Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 800 | 800 | 900 Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer text-decoration Used to specify underlining, overlining, strikeout, and blinking effects. Value: none | any combination of: underline, overline, line-through, blink Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer text-transform Used to specify the case of text. Value: capitalize | uppercase | lowercase | none Initial value: none Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer Type Spacing and Alignment CSS offer several properties related to the spacing and alignment of type. white-space Used to specify how tabs, line breaks, and extra whitespace in an element’s content are handled. Value: normal | pre | nowrap | pre-wrap | pre-line Initial value: normal Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note)
  8. APPENDIX A ■ CSS REFERENCE 329 ■Note No major browser supports pre-wrap and pre-line. text-align Used to specify the horizontal alignment of text. Value: left | right | center | justify Initial value: Determined by user agent Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer text-indent Used to specify the indention of the first line of text. Value: | Initial value: 0 Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer line-height Used to specify the distance between baselines of lines of text. Value: | | Initial value: Determined by user agent Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer word-spacing Used to specify an additional amount of space to be added between words in text. Negative lengths can be used to reduce space between words. Value: normal | Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
  9. 330 APPENDIX A ■ CSS REFERENCE letter-spacing Used to specify an additional amount of space to be added between letters in text. Negative lengths can be used to reduce space between letters. Value: normal | Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer vertical-align Used to raise or lower letters and images above or below the baseline of text. Value: | | sub | super | top | text-top | middle | bottom | text-bottom Initial value: baseline Inherited: no Applies to: Inline elements and table cells Supported by: Firefox, Safari, Opera, Internet Explorer direction Used to specify the writing direction, the direction of table column layout, the direction of horizontal overflow, and the position of incomplete last lines of text. Value: ltr | trl Initial value: ltr Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer unicode-bidi Controls the Unicode standard bidirectional rendering algorithm. Value: normal | embed | bidi-override Initial value: normal Inherited: No Applies to: All elements Supported by: Firefox, Opera, Internet Explorer
  10. APPENDIX A ■ CSS REFERENCE 331 Box Model Next we look at the various properties that can be used to control the box model of your page elements. margin A shorthand property used to specify all four individual margin properties in one step. Value: Multiple instances of | | auto Initial value: 0 Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer margin-top, margin-right, margin-bottom, margin-left Used to specify the space between the element’s bounding box and the bounding boxes of adjacent elements. Value: | | auto Initial value: Determined by user agent, and different for different elements Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, several margin-related bugs are exhibited. Among them: margins may double when element is floated, percentages may refer to the incorrect parent element, and auto may act in an unexpected manner when elements are absolutely positioned. The Position Is Everything web site (www.positioniseverything.net/) covers all IE 6 bugs in exhaustive detail. padding Used to specify all four individual padding properties in one step. Value: Multiple instances of | Initial value: 0 Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
  11. 332 APPENDIX A ■ CSS REFERENCE padding-top, padding-right, padding-bottom, padding-left Used to specify how much space to insert between the contents of an element and its margin or border (if they exist). Value: | Initial value: 0 Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer border, border-top, border-right, border-bottom, border-left Used to specify the width, color, and style of the element’s borders. Value: border-width border-style border-color Initial value: See individual properties Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer ■Note Individual values are optional and may appear in any order. 1px solid black, 1em dotted, and red are all valid border property values. border-width Used to specify the border’s thickness. Value: Multiple instances of thin | medium | thick Initial value: medium Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
  12. APPENDIX A ■ CSS REFERENCE 333 border-top-width, border-right-width, border-bottom-width, border-left-width Used to specify the border’s thickness for one side of the element. Value: thin | medium | thick Initial value: medium Inherited: no Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer border-style Used to specify all individual border styles in one step. Value: Multiple instances of: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, border-style is not implemented for row groups and the dotted value is not supported when the border-width is 1px (dashed is displayed instead). border-top-style, border-right-style, border-bottom-style, border-left-style Used to specify the style of the border for one side of the element. Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note)
  13. 334 APPENDIX A ■ CSS REFERENCE ■Note In Internet Explorer 6 and lower, border-style is not implemented for row groups and the dotted value is not supported when the border-width is 1px (dashed is displayed instead). border-color Used to specify all border colors in one step. Value: Multiple instances of | | | transparent Initial value: Set to the value of the color property of the element Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, border-color is not implemented for row groups (indicated by the thead, tbody, and tfoot elements) and the transparent value is not supported (the initial value is displayed instead). border-top-color, border-right-color, border-bottom-color, border-left-color Used to specify the color of the border for individual sides of the element. Value: | | | transparent Initial value: set to the value of the color property of the element Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, border-color is not implemented for row groups and the transparent value is not supported (the initial value is displayed instead). outline A shorthand property used for setting all three individual outline properties. Outlines are drawn around the element but don’t take up space. Therefore, they may overlap adjacent elements. This is in contrast to borders, which do take up space within the document.
  14. APPENDIX A ■ CSS REFERENCE 335 Value: outline-width outline-style outline-color Initial value: See individual properties Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera ■Note Individual values are optional and may appear in any order. outline-width Used to specify the width of an outline. Value: | thin | medium | thick Initial value: medium Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera outline-style Used to specify the style of an outline. Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera outline-color Used to specify the color of the outline. Value: Either invert or one of the color values. Initial value: invert Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera
  15. 336 APPENDIX A ■ CSS REFERENCE width Used to specify the width of an element’s content area. Value: | | auto Initial value: auto Inherited: No Applies to: Block-level and replaced elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, several width-related bugs may occur. Among them: the box’s width may increase to valid overflow, the width may use the wrong parent block, and percentages may be computed incorrectly. In all browsers, when applied to the table element, width percentages refer to the par- ent element’s width. min-width Used to specify the minimum width of a “flexible” element (such as a box whose width has been set with a percentage). Value: | Initial value: 0 Inherited: No Applies to: All elements except nonreplaced inline elements and table elements Supported by: Firefox, Safari, Opera max-width Used to specify the maximum width of a “flexible” element (such as a box whose width has been set with a percentage). Value: | | none Initial value: none Inherited: No Applies to: All elements except nonreplaced inline elements and table elements Supported by: Firefox, Safari, Opera
  16. APPENDIX A ■ CSS REFERENCE 337 height Used to specify the height of an element’s content area. Value: | auto Initial value: auto Inherited: No Applies to: Block-level and replaced elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, several height-related bugs may occur. Among them: the box’s height may increase to valid overflow, the height may use the wrong parent block, and percentages may be computed incorrectly. min-height Used to specify the minimum height of a “flexible” element (such as a box whose height has been set with a percentage). Value: | Initial value: 0 Inherited: No Applies to: All elements except nonreplaced inline elements and table elements Supported by: Firefox, Safari, Opera max-height Used to specify the maximum height of a “flexible” element (such as a box whose height has been set with a percentage). Value: | | none Initial value: none Inherited: No Applies to: All elements except nonreplaced inline elements and table elements Supported by: Firefox, Safari, Opera
  17. 338 APPENDIX A ■ CSS REFERENCE overflow Determines the display of child elements that do not fit within the content area of the element. Value: visible | hidden | scroll | auto Initial value: visible Inherited: No Applies to: Block-level and replaced elements Supported by: Firefox, Safari, Opera, Internet Explorer clip Used to clip the visible portion of an element to a specified rectangle. Value: rect(, , , ) | auto Initial value: auto Inherited: No Applies to: Absolutely positioned elements Supported by: Firefox, Safari, Opera, Internet Explorer Positioning The following properties relate to positioning your containers on the page. display Determines the method in which an element is displayed. Value: none | inline | block | list-item | run-in | inline-block | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption Initial value: inline Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, run-in, inline-table, table-row-group, table-header- group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption are not available. Also, inline-block is supported only for inline elements.
  18. APPENDIX A ■ CSS REFERENCE 339 position Used to specify the method by which the position of the element’s box is determined. Note that the values absolute and fixed imply that the element’s display value must be block. The display property is ignored in this case. Elements that do not use static positioning make use of the properties top, right, bottom, and left. Value: static | relative | absolute | fixed Initial value: static Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, fixed is not supported. Also, absolute may cause problems with margin calculation. top, right, bottom, left Used to specify the position of elements whose position property is set to fixed, absolute, or relative. Value: | | auto Initial value: auto Inherited: No Applies to: Elements with position other than static Supported by: Firefox, Safari, Opera, Internet Explorer float Used to specify whether an element is floated, and if so, to which direction. Value: left | right | none Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
  19. 340 APPENDIX A ■ CSS REFERENCE clear Defines the sides of an element on which no floating elements may appear. Value: none | left | right | both Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer z-index Used to specify the order in which overlapping elements are stacked on top of each other. If z-index is not specified, elements that come later in the source document will be displayed on top of earlier elements. Value: auto | Initial value: auto Inherited: No Applies to: Positioned elements Supported by: Firefox, Safari, Opera, Internet Explorer visibility Used to make an element completely transparent without removing it from the document flow. Value: visible | hidden | collapse Initial value: visible Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer Background Colors, Images, and Similar Properties Backgrounds are controlled using the following properties. background A shorthand property for setting all five background properties in one step.
  20. APPENDIX A ■ CSS REFERENCE 341 Value: background-attachment background-color background-image background-position background-repeat Initial value: See individual properties Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer ■Note Individual values can be specified in any order. If values are omitted, the initial values of the respec- tive properties are assumed. background-attachment Determines whether a background image should be fixed or movable when the element is scrolled. Value: scroll | fixed Initial value: scroll Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■Note In Internet Explorer 6 and lower, fixed is not supported on any element other than body. background-color Used to specify the background color of the element’s content and padding areas. Value: | | | transparent Initial value: transparent Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer
Đồng bộ tài khoản