Tài liệu HTML & CSS: The Complete Reference- P15 docx

676 P a r t I I : C o r e S t y l e 676 P a r t I I : C o r e S t y l e 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 <p style="layout-grid-line: 100px;"> A short text sample<br> with line breaks so<br> the meaning of this<br> property will be obvious.</p> 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 <p style="layout-grid-mode: none; layout-grid-line: 100px;"> A short text sample<br> with layout-grid-mode<br> set to a value of none<br> to turn off the grid.</p> Compatibility No specification IE 5+ Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 677 PART II C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 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 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 <p style="layout-grid-type: strict; layout-grid-line: 55px;"> A short text sample would likely be in Chinese, not English.</p> 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 678 P a r t I I : C o r e S t y l e 678 P a r t I I : C o r e S t y l e 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 <p style="overflow: auto; overflow-x:-webkit-marquee; display:-wap-marquee; overflow-style: marquee-line; width: 100px; -webkit-marquee-direction:right; -wap-marquee-dir: ltr; marquee-direction:reverse;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </p> Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • The default value is forward. • This property can be replicated by using the HTML <marquee> 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 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 679 PART II C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 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 <p style="overflow: auto; overflow-x:-webkit-marquee; display:-wap-marquee; overflow-style: marquee-line; width: 100px; -webkit-marquee-repetition:5; -wap-marquee-loop: 5; marquee-play-count:5;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </p> Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • This property is replicable in many browsers using a <marquee> 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 <p style="overflow: auto; overflow-x:-webkit-marquee; display:-wap-marquee; Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 680 P a r t I I : C o r e S t y l e 680 P a r t I I : C o r e S t y l e overflow-style: marquee-line; width: 100px; -webkit-marquee-speed:fast; -wap-marquee-speed: fast; marquee-speed:fast;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </p> Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Notes • This property is replicable in many browsers using a <marquee> 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 <p style="overflow: auto; overflow-x:-webkit-marquee; display:-wap-marquee; overflow-style: marquee-line; width: 100px; -webkit-marquee-style:alternate; -wap-marquee-style: alternate; -wap-marquee-loop: infinite; marquee-style:alternate;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </p> Compatibility CSS3 Chrome 1+, Opera 8+, Safari 2+ Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 681 PART II C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 681 Notes • This property is replicable in many browsers using a <marquee> 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. 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 <div style="height: 100px; width: 200px; background-color: red; padding: 20px; border: 5px dashed black; -webkit-mask: scroll border -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) repeat border;"></div> ONLINE http://htmlref.com/ch6/mask.html Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 682 P a r t I I : C o r e S t y l e 682 P a r t I I : C o r e S t y l e 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 <img src="main.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); -webkit-mask-attachment: fixed;"> 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 <img src="main.jpg" style="-webkit-mask-box-image: url(mask.png) 10 50 50 10 stretch;"> Compatibility No specification Chrome 2+, Safari 3.1+ Note • In WebKit-based browsers this property is –webkit-mask-box-image. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 683 PART II C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 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 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>mask-clip Example</title> <style type="text/css"> 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;} </style> </head> <body> <div style="-webkit-mask-clip: content;">content</div> <div style="-webkit-mask-clip: border;">border</div> <div style="-webkit-mask-clip: padding;">padding</div> </body> </html> ONLINE 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 684 P a r t I I : C o r e S t y l e 684 P a r t I I : C o r e S t y l e mask-composite This property specifies the compositing style for the mask. Syntax mask-composite: border | padding where the default is border. Example <div style="height: 100px; width: 200px; background-color: red; padding: 20px; border: 5px dashed black; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); -webkit-mask-composite: padding;"></div> 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 <img src="tucker.jpg" width="200" height="133" style="-webkit-mask-image: url(ovalmask.gif);"> ONLINE http://htmlref.com/ch6/maskimage.html Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 685 PART II C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 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. 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 <div style="height: 100px; width: 200px; background-color: red; padding: 20px; border: 5px dashed black; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); -webkit-mask-origin: padding; -webkit-mask-clip: padding;" > </div> 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 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... specifies the horizontal distance to the right of the text A negative horizontal length value places the shadow to Chapter 6: CSS3 Proprietary and Emerging Features Reference 709 the left of the text The second length value specifies the vertical distance below the text A negative vertical length value places the shadow above the text An optional blur radius may be specified after the shadow offset The blur... it to the browser to align the Ruby text A value of center centers the Ruby text in the center of the text below if smaller or centers the reading guide text above if larger The distribute-letter and distribute-space values distribute the reading guide text evenly across the text below, adding space in the case of distributespace Values of left and right align the reading guide text above to the left... inter-word | kashida | newspaper The default value of auto lets the browser define the justification algorithm to use The newspaper value changes the spacing between letters and words to justify If you set inter-word, it sets spacing solely between words The value of distribute is similar to newspaper but optimized for Asian languages The value distribute-all-lines is the PART II • The effect of this property... • 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 . background-color: #00f;"> ABC<br> DEF<br> GHI<br> JKL<br> MNO<br> PQR<br> STU<br> VWXYZ </p> Compatibility CSS3. 689 Example <!DOCTYPE html& gt; < ;html& gt; <head> <meta http-equiv="Content-Type" content="text /html; charset=utf-8"> <title>mask-size