HTML & CSS: The Complete Reference- P15

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

0
33
lượt xem
5
download

HTML & CSS: The Complete Reference- P15

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- p15', 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- P15

  1. 676 Part II: Core Style Note • Under IE this property is known as –ms-layout-grid-char to correctly show it is an extension. layout-grid-line This Microsoft-proposed CSS property defines the gridline value used for laying out Japanese or Chinese characters in a Web document. Syntax layout-grid-line: none | auto | length | percentage where length is any positive length unit and percentage is a value derived from the size of the parent element the rule is applied to. Example A short text sample with line breaks so the meaning of this property will be obvious. Compatibility No specification IE 5+ Note • Under IE this property is known as –ms-layout-grid-line to correctly show it is an extension. layout-grid-mode This Microsoft-proposed CSS property defines whether the text layout grid uses one or two dimensions. Syntax layout-grid-mode: both | none | line | char where line specifies to use a line grid, char specifies to use a character grid, and both specifies to use both grids. A value of none turns all grids off. The default is both. Example A short text sample with layout-grid-mode set to a value of none to turn off the grid. Compatibility No specification IE 5+
  2. Chapter 6: CSS3 Proprietary and Emerging Features Reference 677 Note • Under IE 8+ this property is known as –ms-layout-grid-mode to correctly show it is an extension. layout-grid-type This Microsoft-proposed CSS property defines the type of grid to be used for laying out Japanese or Chinese characters in a Web document. Syntax layout-grid-type: fixed | loose | strict PART II where fixed is used for a monospace font layout, strict is used for most complex ideographic character types, and loose is used for more alphabetic types like hiragana in Japanese. Example A short text sample would likely be in Chinese, not English. Compatibility No specification IE 5+ Note • Under IE 8+ this property is known as –ms-layout-grid-type to correctly show it is an extension. line-break This property defines line-breaking rules for Asian text. Syntax line-break: normal | strict Example p {line-break: normal;} Compatibility No specification Chrome 1+, IE 5+, Safari 2+ Notes • Under IE 8+ this property is known as –ms-line-break to correctly show it is an extension. Under WebKit-based browsers this is called –webkit-line-break since Safari 3.0 and –khtml-line-break since Safari 2.0. • This property is deprecated according to Microsoft documentation and should be replaced by word-break per the upcoming CSS3 specification.
  3. 678 Part II: Core Style marquee-direction This property specifies the direction in which a marquee should move. Syntax marquee-direction: forward | reverse See the notes for proprietary equivalents. Example ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • The default value is forward. • This property can be replicated by using the HTML tag and setting the direction attribute to left | right | up | down. • The property was supported under Safari 2 as –khtml-marquee-direction. • This property is supported as -webkit-marquee-direction in Safari 3+. The syntax is -webkit-marquee-direction: ahead | auto | backwards | down | forwards | left | reverse | right | up • This property is supported as -wap-marquee-dir in Opera. The syntax is -wap-marquee-dir: ltr | rtl • According to the standard, the actual direction of the marquee movement will depend on the overflow-style and direction of text flow in the document according to Table 6-10. overflow-style Direction Value Forward Direction Reverse Direction marquee-line ltr Left Right rtl Right Left marquee-block Up Down TABLE 6-10 Marquee Direction Logic
  4. Chapter 6: CSS3 Proprietary and Emerging Features Reference 679 Of course, if the marquee-style is set to alternate, the directions will flip back and forth. marquee-play-count This property defines how many times the marquee runs. Syntax marquee-play-count: positive number | infinite Example ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • This property is replicable in many browsers using a tag. • The default value is 1, meaning the element performs its effect once. • This property can be replicated using the HTML marquee tag and setting the loop attribute to a number or infinite. • This property is supported as -webkit-marquee-repetition in WebKit-based browsers like Safari. It’s also known as -khtml-marquee-repetition in Safari 2.0. In these browsers, the default is infinite. If it is not set to infinite, the element will disappear after it completes the loops. • This property is supported as -wap-marquee-loop in Opera browsers. • For some reason, you may see a browser stop the marquee effect after a certain number of iterations regardless of setting. marquee-speed This property defines how fast the marquee scrolls. Syntax marquee-speed: fast | normal | slow Example
  5. 680 Part II: Core Style overflow-style: marquee-line; width: 100px; -webkit-marquee-speed:fast; -wap-marquee-speed: fast; marquee-speed:fast;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • This property is replicable in many browsers using a tag. • The default value is normal. • The property is supported as –webkit-marquee-speed in Safari 3+ and -khtml- marquee-speed in Safari 2.0. • In Safari, there is an additional format: -webkit-marquee-speed: distance / time • The property is supported as –wap-marquee-speed in Opera browsers. marquee-style This property defines the motion of the marquee. Syntax marquee-style: alternate | scroll | slide where alternate causes the marquee to bounce back and forth, scroll causes the marquee to scroll completely off of one end before reappearing on the other end, and slide causes the marquee to reset as soon as all of the content is visible. Example ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+
  6. Chapter 6: CSS3 Proprietary and Emerging Features Reference 681 Notes • This property is replicable in many browsers using a tag. • The default value is scroll. • This property can be replicated using the HTML marquee tag and setting the behavior attribute to alternate | scroll | slide. • This property is supported as -webkit-marquee-style in Safari 3+ and –khtml- marquee-style in Safari 2. • This property is supported as -wap-marquee-style in Opera. PART II mask This property defines a mask to be used as a box’s overlay in order to clip the box to a complex shape. This is a shorthand property for the more specific mask properties. Syntax mask: mask-attachment, mask-clip, mask-image, mask-repeat, mask-composite, mask-box-image; where each value corresponds to the more specific property. Example O NLINE http://htmlref.com/ch6/mask.html
  7. 682 Part II: Core Style Compatibility No specification Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask. mask-attachment This property specifies whether the mask should scroll or stay fixed when the page is scrolled. Syntax mask-attachment: fixed | scroll where the mask will scroll with the page on scroll and will not move on fixed. Example Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask-attachment. mask-box-image This property specifies an image to be used as a mask over the border box of an element. Syntax mask-box-image: [url() | function()] top right bottom left x_repeat y_repeat where url is the location of the image, function is a function that generates an image, top, right, bottom, and left specify the distances from the edges of the image, and x_repeat and y_repeat can be set to repeat, stretch, or round to indicate how the image is altered to fit the dimensions. Example Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask-box-image.
  8. Chapter 6: CSS3 Proprietary and Emerging Features Reference 683 mask-clip This property specifies whether the mask clips to the border, padding, or content. Syntax mask-clip: border | padding | content where the mask clips to the specified option. Example PART II mask-clip Example div {height: 50px; width: 150px; float: left; margin: 20px; padding: 20px; background-color: red; font: bold xx-large; border: 15px solid black; -webkit-mask-image: url(starmask.png); -webkit-mask-repeat: repeat; -webkit-mask-size: 20px 20px;} content border padding O NLINE http://htmlref.com/ch6/maskclip.html Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask-clip.
  9. 684 Part II: Core Style mask-composite This property specifies the compositing style for the mask. Syntax mask-composite: border | padding where the default is border. Example Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is specified as –webkit-mask-composite. mask-image This property specifies the image to be used for the element’s mask. Syntax mask-image: url(image) | function where function is a function that generates an image. Example O NLINE http://htmlref.com/ch6/maskimage.html
  10. Chapter 6: CSS3 Proprietary and Emerging Features Reference 685 Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask-image. mask-origin This property specifies how the position of the mask should be calculated by setting the origin relative to different locations within an element’s box. PART II Syntax mask-origin: border | content | padding where the mask will be anchored to the upper-left corner of the element’s border, content, or padding based on the specified option. Example Compatibility No specification Chrome 3+, Safari 4+ Notes • In WebKit-based browsers this property is –webkit-mask-origin. • If mask-origin is set to padding and mask-clip is set to border, it will act as if a mask with alpha value 0 is over the border, therefore rendering it invisible. mask-position This property specifies the position of the mask. Syntax mask-position: xpos ypos
  11. 686 Part II: Core Style where xpos and ypos are set according to the more specific mask-position-x and mask- position-y properties. Examples O NLINE http://htmlref.com/ch6/maskposition.html Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is known as –webkit-mask-position. mask-position-x This property specifies the x-coordinate in the position of the mask.
  12. Chapter 6: CSS3 Proprietary and Emerging Features Reference 687 Syntax mask-position-x: length | percentage | left | center | right Example Compatibility No specification Chrome 2+, Safari 3.1+ PART II Note • In WebKit-based browsers this property is known as –webkit-mask-position-x. mask-position-y This property specifies the y-coordinate in the position of the mask. Syntax mask-position-y: length | percentage | top | center | bottom Example Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is known as –webkit-mask-position-y. mask-repeat This property specifies how the mask image will repeat. Syntax mask-repeat: repeat | repeat-x | repeat-y | no-repeat where the default is repeat. Examples
  13. 688 Part II: Core Style O NLINE http://htmlref.com/ch6/maskrepeat.html Compatibility No specification Chrome 2+, Safari 3.1+ Notes • In WebKit-based browsers this property is known as –webkit-mask-repeat. • If the value is not set to repeat, any area that is not covered by the mask will be treated as if there is a mask with an alpha value of 0 over it and that area will not display. mask-size This property specifies the size of a mask. Syntax mask-size: length [ length] where one length value indicates both the width and height and two length values indicate the width first and then the height.
  14. Chapter 6: CSS3 Proprietary and Emerging Features Reference 689 Example mask-size Example img.masked {-webkit-mask-image: url(starmask3.png);} O NLINE http://htmlref.com/ch6/masksize.html Compatibility No specification Chrome 3+, Safari 4+
  15. 690 Part II: Core Style Note • In WebKit-based browsers this property is –webkit-mask-size. opacity This property specifies the transparency of an element. Syntax opacity: alphavalue | inherit where alphavalue is a number ranging from 0.0, fully transparent, to 1.0, fully opaque. Examples #tng {opacity: 0.8; background-color: blue;} #invisible {opacity: 0;} #blam {opacity: 1;} #ie2 {opacity: 0.7; filter: alpha(opacity=70); zoom: 1;} Compatibility CSS3 Chrome 1+, Firefox 1+, IE 4+ (using filter property), Opera 9+, Safari 1.2+ Note • When using the filter property for Internet Explorer, make sure that the opaque object that you will apply the effect to has layout, which is usually accomplished by setting its size or position. outline-offset This property defines the offset from an element’s border and its outline. Syntax outline-offset: length | inherit where length is any valid CSS length value used to move the outline away from the element’s border. Negative values are supported and will put the outline within the element’s border.
  16. Chapter 6: CSS3 Proprietary and Emerging Features Reference 691 Examples #offset1 {outline: dashed 4px green; border: solid 10px red; outline-offset: 15px;} #offset2 {outline: dashed 4px green; border: solid 10px red; outline-offset: -45px;} Compatibility CSS3 Firefox 1.5+, Opera 9.5+, Safari 1.2+ Note PART II • Before Firefox 1.5, Mozilla browsers supported the equivalent –moz-outline- offset property. outline-radius This property defines the rounding of the corners on an outline. Syntax outline-radius: lengths | inherit where lengths is up to four valid CSS length or percentage values to round the corners of the outline. When multiple values are used, they are applied starting with the top left and proceeding to top right, bottom right, and finally bottom left. The values copy into the locations opposite, similar to how margins and paddings are handled in CSS. Examples #radius1 {-moz-outline-radius: 20px;} #radius2 {-moz-outline-radius: 20px 5px;} #radius3 {-moz-outline-radius: 20px 60px 5px 45px;} Compatibility CSS3 speculative Firefox 3+ Notes • This property is alluded to in CSS3 discussions, though it is not currently documented. The discussion here is based upon the current implementation in Mozilla-based browsers, which support it as –moz-outline-radius. • Mozilla browsers also define –moz-outline-radius-topleft, -moz-outline- radius-topright, -moz-outline-radius-bottomright, and –moz-outline- radius-bottomleft to set the corners individually. overflow-style This property allows a marquee to be used in the case of a text overflow. Syntax overflow-style: auto | marquee-block | marquee-line
  17. 692 Part II: Core Style The initial value is auto, which allows the user agent to determine the scrolling effect. A value of marquee-line employs horizontal scrolling, and a value of marquee-block employs vertical scrolling. The particular directions left to right or up and down will depend on the text direction in the document. Example ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • In Safari, it is necessary to set an element’s overflow-x or overflow-y to -webkit-marquee to activate marquee-style functionality. • In Opera, it is necessary to set an element’s display to -wap-marquee to activate marquee effects. overflow-x This property defines how content should behave when it exceeds the width of its enclosing element. Syntax overflow-x: auto | hidden | scroll | visible Example ABCDEFGHIJKLMNOPQRSTUVWXYZ Compatibility CSS3 Chrome 2+, Firefox 1+, IE 4+, Opera 9.5+, Safari 3+ Notes • This property is correctly written as –ms-overflow-x under IE 8 to show that it is an extension. • This is currently in the CSS3 specification and also supports values of no-display and no-content.
  18. Chapter 6: CSS3 Proprietary and Emerging Features Reference 693 overflow-y This property defines how content should behave when it exceeds the height of its enclosing element. Syntax overflow-y: auto | hidden | scroll | visible Example ABC PART II DEF GHI JKL MNO PQR STU VWXYZ Compatibility CSS3 Chrome 2+, Firefox 1+, IE 4+, Opera 9.5+ Notes • This property is correctly written as –ms-overflow-y under IE 8 to indicate it as an extension. • This is currently in the CSS3 specification and also supports values of no-display and no-content. • Some Firefox versions put the scroll bar the wrong direction with this property. perspective This property is used to give a 3-D sense of depth to an element. Only the children of the element are given the noted perspective, not the actual element itself. Syntax perspective: none | number where number is set to the distance of the z=0 plane from the viewer. The default is none. Examples Perspective set. Child gains perspective.
  19. 694 Part II: Core Style No perspective set. No perspective used. Compatibility CSS3 Safari 4+ Notes • WebKit supports this property as –webkit-perspective, though it is currently only available in the iPhone and the development builds of Safari 4+ on Macs. • This property only works in conjunction with another transform because it alters the way the other transform acts. perspective-origin This property is used to set the x and y origins for the –webkit-perspective property. Syntax perspective-origin: percentage | length | left | center | right [percentage | length | top | center | bottom ] where the default value is 50% 50%. Example Perspective set.
  20. Chapter 6: CSS3 Proprietary and Emerging Features Reference 695 width:120px;background-color:blue;-webkit-transform:rotateY(55deg);"> Child gains perspective. PART II Compatibility CSS3 Safari 4+ Notes • WebKit supports this property as –webkit-perspective-origin, though it is currently only available in the iPhone and the development builds of Safari 4+ on Macs. • This property only works in conjunction with the –webkit-perspective property. resize This CSS3 property is used to define whether an element should be resized and, if so, upon what axis. Syntax resize: both | horizontal | none | vertical Examples Resize both ways Username: Comments:
Đồng bộ tài khoản