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

Example A short text sample with line breaks so the meaning of this property will be obvious.. The default is both.Example A short text sample with layout-grid-mode set t

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>

layout-grid-mode: both | none | line | char

where line specifies to use a line grid, char specifies to use a character grid, and bothspecifies 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

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>

• This property is deprecated according to Microsoft documentation and should be replaced by word-break per the upcoming CSS3 specification

This property specifies the direction in which a marquee should move

Syntax

marquee-direction: forward | reverse

See the notes for proprietary equivalents

• The default value is forward

• This property can be replicated by using the HTML <marquee> tag and setting the

• 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

• 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 loopattribute 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

• 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

• 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 slidecauses the marquee to reset as soon as all of the content is visible

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

• This property is supported as -webkit-marquee-style in Safari 3+ and

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

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)));

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_repeatand y_repeat can be set to repeat, stretch, or round to indicate how the image is altered to fit the dimensions

mask-clip: border | padding | content

where the mask clips to the specified option

font: bold xx-large;

border: 15px solid black;

<div style="-webkit-mask-clip: content;">content</div>

<div style="-webkit-mask-clip: border;">border</div>

<div style="-webkit-mask-clip: padding;">padding</div>

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)));

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

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)));

• 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

where xpos and ypos are set according to the more specific mask-position-x and

Examples

<img src="tucker.jpg" width="200" height="133"

class="masked" style="-webkit-mask-position: 10px 10px;">

<img src="tucker.jpg" width="200" height="133"

class="masked" style="-webkit-mask-position: right top;">

<img src="tucker.jpg" width="200" height="133"

mask-repeat: repeat | repeat-x | repeat-y | no-repeat

where the default is repeat.Examples

<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);

-webkit-mask-repeat: repeat-x;">

<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);

-webkit-mask-repeat: no-repeat;">

ONLINE http://htmlref.com/ch6/maskrepeat.html

Compatibility

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

opacity: alphavalue | inherit

where alphavalue is a number ranging from 0.0, fully transparent, to 1.0, fully opaque.

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

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

• Mozilla browsers also define –moz-outline-radius-topleft,

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-blockemploys vertical scrolling The particular directions left to right or up and down will depend on the text direction in the document.

• In Safari, it is necessary to set an element’s overflow-x or overflow-y to

• In Opera, it is necessary to set an element’s display to -wap-marquee to activate marquee effects

perspective: none | number

where number is set to the distance of the z=0 plane from the viewer The default is none.Examples

<div style="height:100px;width:180px;background-color:red;

-webkit-perspective:200;">Perspective set.<br><br>

<div transform:rotateY(55deg);">

Child gains perspective

</div>

</div>

<div style="height:100px;width:180px;background-color:red;" >No perspective set

<div transform:rotateY(55deg);">

• This property only works in conjunction with the –webkit-perspective property.

The visual presentation of how elements should be resized is not set, but so far it appears that supporting browsers present a bottom-right resize corner indication.

Compatibility

Notes

• The property applies only to elements that do not have an overflow value of

elements you wish to resize, as visible is the common value Form fields, of course, do not have that value and require no extra property

• This property is commonly used on <textarea> tags

it is smaller than the base text A value of line-edge normally centers the reading guide text unless the text is at the end of line where in that case it lines it up to the edge instead

This property defines the position of ruby text as defined by a <rt> tag, in relation to base text defined by a <ruby> tag

Syntax

ruby-position: above | inline

where the common value is above and a value of inline runs the guide text after the item.Examples

<p>ruby-position:above <ruby style="ruby-position: above;">日本語

• This property is correctly written as –ms-scrollbar-3dlight-color under IE 8

to show that it is an extension

• A mention in the CSS3 UI specification says that this type of feature may be considered later

<! space intentional for scroll bars >

<form action ="#" method="get">

scrollbar-base-color: color

where color is a standard CSS color value like #f00, red, and so on

Example

<! space intentional for scroll bars >

<form action="#" method="get">

Notes

• This property is correctly written as –ms-scrollbar-darkshadow-color under

IE 8 to show that it is an extension

• A mention in the CSS3 UI specification says that this type of feature may be considered later

• This property is correctly written as –ms-scrollbar-highlight-color under

IE 8 to show that it is an extension

• Under modern versions of Internet Explorer, this property affects the scroll track color that applies to the bottom of the top arrow, and to the right of the bottom arrow In this sense, it is acting as the highlight color

• A mention in the CSS3 UI specification says that this type of feature may be considered later

size: length length | auto | portrait | landscape | inherit

where the absolute length units are generally defined as two values for height and width

Relative values include landscape and portrait The default value is auto.Examples

@page {size: landscape;}

@page {size: 8.5in 11in;} /* standard US paper size */

@page {size: 6in 10in;} /* funny width and height */

Compatibility

• CSS 2.1 does not support this property, though it is reintroduced in CSS3

• Even if a browser supports this property to some degree, the print driver interaction may cause trouble For example, in Opera 10, landscape mode did not force the print driver to actually change page orientation, so content was clipped

p {text-align: justify; text-align-last: left;}

.allRighty {text-align: justify; text-align-last: right;}

Examples

<p style="text-autospace: ideograph-alpha;">Japanese is 日本語 in Kanji.</p>

<p style="text-autospace: ideograph-numeric;">12345日本語678910</p>

• The current CSS3 specification indicates this property is under consideration, but it

is not currently fully documented

• The effect of this property can be a bit subtle, so you may have to increase font size

to notice it in places and closely compare it to the same text without the property

same as distribute though it also justifies the last line A value of inter-cluster is used

to justify text that contains no interword spacing such as found in some Asian languages

A value of inter-ideograph can justify lines of ideographic text dealing with spaces between both ideograms and words

Example

<p style="text-align: justify; text-justify: distribute-all-lines;

width: 250px;">

This paragraph is not only justified, but the text-justify property

is set to a value that makes the last line justify as well

• The CSS3 Text module does support this property with a value of Tibetan as well There is considerable detail in the justification algorithms Hopefully, this can be correctly implemented in user agents, so justified text will become desirable because

of its’ improved readability and be more commonly used in Web documents

text-kashida-space

This Microsoft-proposed CSS property defines the ratio between Kashida expansion and whitespace expansion in justified text Kashida is a typographic effect used with Arabic writing systems to elongate characters during the justification process

p {width: 200px; border: 1px solid black;

overflow: hidden; white-space: nowrap;

• Some sites on the Web indicate –moz-text-overflow as supported but, as of Firefox 3.5, documentation and testing reveals it is not Interestingly, scripts exist that try to implement the idea

• The CSS3 specification suggests that this property is shorthand for

to be used as the overflow indicator At the time of this edition’s writing, neither property is supported and this portion of the specification is still in progress

This SVG inherited property provides information to the browser about how text should be rendered Generally, it is used to specify a trade-off between performance and quality.Syntax

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

The default value is auto A value of optimizeSpeed tells the browser to focus on rendering speed, a value of optimizeLegibility tells the browser to focus on text details like kerning and ligatures to improve readability, and a value of geometricPrecision tells the browser to focus on the geometric layout of text as opposed to speed or readability.Examples

• This is really an SVG property that may have applications within an HTML document

• If used in a CSS setting, it would seem more appropriately written as rendering, but that currently is not the case

–moz-text-text-shadow

This property defines a shadow effect for text

SyntaxThe shadow is defined by a comma-separated list of shadow effects to be applied to the text

of the element,

text-shadow: shadow1 [, shadow2, shadowN]

where each shadow value is defined as

horizontal-offset vertical-offset [blur-radius] color

The shadow effects are applied in the order specified and may overlay each other, but they will never overlay the text itself Each shadow effect must specify a shadow offset horizontally and vertically and may optionally specify a blur radius and a shadow color

A shadow offset is specified with two length values, usually in absolute measurement, that indicate the distance from the text The horizontal offset value specifies the horizontal distance to the right of the text A negative horizontal length value places the shadow to