Tài liệu HTML & CSS: The Complete Reference- P14 ppt

A family property is used within the rule to name the font, and an src is associated with an external font name: font-@font-face {font-family: fontname; src: urlfontfile;} Later, the fon

Web Fonts

An exciting change that some incorrectly think was introduced by CSS3 is the inclusion of Web fonts In reality, downloadable fonts using CSS and even HTML have been available in browsers since the 4.x generation, though with the demise of Netscape, only Internet Explorer continued to support them until their later reintroduction in more modern browsers Regardless of their origin, the syntax is fairly consistent An “at” (@) rule is used

to associate a font name to be used in a style sheet with some downloadable font A family property is used within the rule to name the font, and an src is associated with an external font name:

font-@font-face {font-family: fontname; src: url(fontfile);}

Later, the font can be used as a name within properties like font-family and font Make sure to specify other font names as a fallback in case downloadable font technology is not supported or the font fails to load for some reason As an example:

@font-face {font-family: "handwriting"; src: url(handwriting.ttf);}

body {font-family: "handwriting", cursive; font-size: 5em;}

F IGURE 6-1 Media queries in action

Support

to the height of the media

Integer

@media screen and (aspect-ratio: 640/480) { }

of bits of color the device supports,

or 0 if no color is supported A presence value can be used to simply see if color is supported

(color) { }

@media all and (min-color: 16) { }

entries in the color lookup table of the output device or 0 if color is not supported

and index: 256) { }device-

(color-aspect-ratio

The ratio of the device width to the device height of the media

Integer

@media screen and (device-aspect-ratio:

1024/768) { }device-

height

Describes the height

of the screen or full height of the output page

like px, em, in, and

so on

@media screen and (device-height: 768px) { }

device-width Describes the width

of the screen or the full width of the output page

like px, em, in, and

so on

@media screen and (device-width: 1000px) { }

is grid, like a simple terminal or phone,

or bitmap, like a standard monitor or printer

required presence style value)

@media screen and (grid) { }

supported width of the device’s viewport

or paged media box

in the case of print output

like px, em, in, and

so on

@media screen and (height:

922px) { }

@media screen and (max-height:

800px) and height: 400px) { }

(min-TABLE 6-6 CSS Media Query Values (continued)

Media Query Description

Support

monochrome and how many bits are used for gray display A value of

0 indicates the output

is not monochrome

A presence value or 1

is used to indicate the device is displaying in monochrome

and (monochrome) { }

@media screen and (min-monochrome: 4) { }

if height is greater than or equal to width, landscape if the opposite

landscape

@media print and (orientation: landscape) { }

resolution of the output device

per inch) or dpcm (dots per centimeter)

@media print and (resolution: 300dpi) { }

progressive) { }

supported width of the device’s viewport

or paged media box

in the case of print output

like px, em, in, and

so on

@media screen and (width: 1000px) { }

@media screen and (min-width: 300px) and (max-width: 480px) { }

TABLE 6-6 CSS Media Query Values (continued)

It is also possible to set selection of a particular downloadable font when a particular font characteristic like bold or italic is set by adding the corresponding rule to the @font-face rule:

@font-face {font-family: "Mufferaw"; src: url(MUFFERAW.ttf);}

@font-face {font-family: "Mufferaw"; src: url(MUFFERAWBOLD.ttf);

font-weight: bold;}

p {font-family: "Mufferaw", serif; font-size: 5em;}

em {font-weight: bold;} /* would specify the mufferawbold font */

There are even more characteristics that can be set, including what character sets are

in a number of places rather than introducing all new properties We see many new list-type values like arabic, binary, lower hexadecimal, mongolian, thai, ethiopic, hangul,

application-style Web development like alias, context-menu, and not-allowed A full list can be found in the cursor property entry in the previous chapter

Where possible, we alluded to these more subtle changes in the previous chapter’s reference when they were supported by browsers Though, without looking at all entries globally, you might not see how some CSS3 changes have wide effect For example, CSS3-compliant browsers should support multiple backgrounds Here, we specify different files for the background, each separated with a comma:

body {background: white url(donkey.gif) top left no-repeat, url(elephant.gif) bottom right no-repeat;}

This would also work on the background-image property, of course, given

background is just a shorthand for all background characteristics So we see that once you can specify multiple background images, this ripples through numerous properties like

backgrounds, we apply the position to each background in order, so

background-position: 50px 100px, 200px 200px;

would position the first background at 50px, 100px and the second background at 200px, 200px Similarly, other background properties like background-repeat would change in

a similar manner, so

background-repeat: no-repeat, repeat-x;

would apply no-repeat to the first background and repeat-x to the second

The CSS3 background changes are supported at the time of this edition’s writing at least

in WebKit-based browsers We focus in this chapter mostly on those areas of CSS3 where we have a close-to-final specification (for example, Selectors) or have some implementation to reference While we have some good sense about what CSS3 features are likely to be supported by browsers, it makes little sense to speculate too much until it is something implemented and actually used by a Web developer or designer

Implemented CSS3 and Browser-Specific FeaturesThe CSS3 specification is far from complete, numerous aspects of the various proposed modules that make up the specification have not been worked on for years, and there are clearly many holes However, browser vendors have implemented a number of properties already Further, many browser vendors have introduced proprietary extensions to CSS, some of which have then been added to the CSS specification and some of which haven’t

This section details the properties that are supported in some major browsers shipping circa late 2009 Each entry will present the following items:

NOTE To provide for the best long-term accuracy, where possible and when clear, CSS3 syntax is presented first If a browser supports a property extension to emulate the CSS3 syntax, that will

be presented in the notes and examples Not every possible browser extension is presented, particularly those properties only implemented in a minor-market-share browser that have not been defined at least partially in any known CSS3 module.

@keyframesThis CSS “at” rule is used to define the properties that will be animated in an animation rule

Syntax

@keyframes: keyframe-name

{percentage | from | to {cssrules}}*

where each block starts with the percentage into the animation at which the rules apply,

from is a keyword for 0%, and to is a keyword for 100%

Example

@-webkit-keyframes move { from {

left: 0;

top: 0;

opacity: 1;

} 50% { left: 500px;

top: 0;

opacity: 1;

}

to { left: 500px;

top: 500px;

opacity: 1;

}}

accelerator: true | false

When the standard underline style is applied and accelerator is set to true, the style should be toggled when the ALT key is depressed, revealing the various access keys in play

<style type="text/css" media="screen">

.accelerator {-ms-accelerator: true;

• WebKit supports this property as –webkit-animation.

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-delayThis property is used to define a delay before an animation starts

Syntax

animation-delay: time1 [, timeN]

where time is a standard CSS time value like 2s or 4700ms The default value is 0, meaning

the animation starts immediately

Example

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Animations - animation-delay</title>

<style type="text/css">

@-webkit-keyframes move { from {width: 100px; height: 300px;

• WebKit supports this property as –webkit-animation-delay.

• Be careful staggering animations, as properties will revert to their nonanimation values once the animation completes

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-directionThis property is used to indicate if an animation plays in reverse or repeats itself every other iteration

Syntax

animation-direction: normal | alternate [,normal | alternate]*

The default value is normal

Example

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Animations - animation-direction</title>

<style type="text/css">

@-webkit-keyframes resize { from {width: 100px; height: 300px;

• WebKit supports this property as –webkit-animation-direction.

• If the animation-direction is alternate, the timing function will also alternate

if appropriate

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-durationThis property is used to define the time it takes one iteration of an animation to play

Syntax

animation-duration: time [,time]*

where time is a valid time value like 5s or 3500ms The initial value of time is 0, meaning no

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Animations - animation-duration</title>

<style type="text/css">

@-webkit-keyframes move { from {left: 0;top: 0;}

50% {left: 300px;top: 0;}

to {left: 300px;top: 300px;}

}

@-webkit-keyframes resize { from {width: 100px;height: 300px;}

• WebKit supports this property as –webkit-animation-duration.

• Be careful with staggering durations, as the shorter animation will revert to its nonanimation values once the animation completes

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-iteration-countThis property is used to define the number of times an animation should play

Syntax

animation-iteration-count: number | infinite [, number | infinite]*

where number is a positive integer and the keyword infinite indicates a continuous animation

Example

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Animations - animation-iteration-count</title>

<style type="text/css">

@-webkit-keyframes resize { from {height: 300px; width: 100px;

<div id="anim1">Watch me move and change size forever!</div>

<div id="anim2">Watch me move two times</div>

• WebKit supports this property as –webkit-animation-iteration-count

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-nameThis property is used to define the animations that should be run The @keyframe directive specified defines the properties to animate The keyword none can be used to override

a cascade

Syntax

animation-name: @keyframe-name | none [,@keyframe-name | none]*

where @keyframe-name is the name of the animation defined by an @keyframe directive

<title>CSS Animations - animation-name</title>

<style type="text/css">

@-webkit-keyframes move { from {top: 0; left:0; opacity: 1;}

50% {top: 0; left:500px; opacity: 5;}

to {top: 500px; left: 500px; opacity: 1;}

}

@-webkit-keyframes resize { from {height: 300px; width: 100px;}

50% {height: 100px; width: 100px;}

to {height: 100px; width: 300px;}

}

@-webkit-keyframes fade { from {opacity: 1;}

• WebKit supports this property as –webkit-animation-name

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

animation-timing-functionThis property is used to describe how the animation will play

Syntax

animation-timing-function: timingfunction [,timingfunction2, timingfunctionN]

where timingfunction is one of the following values:

cubic-bezier(number,number,number,number) | ease | ease-in | ease-in-out

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Animations - animation-timing-function</title>

<style type="text/css">

@-webkit-keyframes move { from {left: 0; top: 0;}

Notes

• WebKit supports this property as –webkit-animation-timing-function

• If applicable, the timing function will reverse if animation-direction is set to

• Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this

backface-visibilityThis property is used to indicate whether the backside of an element is visible if the element

is rotated to display the back

Syntax

backface-visibility: hidden | visible

The default value is visible When it is set to hidden, the element is not visible if it is not facing the screen When it is set to visible, it is always visible, which may mean you see the reverse of an image

background-clipThis property specifies whether or not an element’s background extends all the way to the element’s border

Syntax

background-clip: border | padding [, border | padding, ]

where the default is border, causing the background to stop at the edge of the border of an element or where padding stops the background at the start of a border The effect of this property is noticeable when borders with transparent regions are used:

Examples

<div style="height: 100px; width: 200px;

background-color: red;

padding: 20px;

border: 5px dashed black;">

Clipped to border (default)

• WebKit-based browsers also specify a value of content for its

of a box

• WebKit-based browsers have experimented with a value of text for their background-clip property to create a clip outline for text to create an interesting punch-out effect

–webkit-background-originThis property specifies how the position of a background should be calculated by setting the origin relative to different locations within an element’s box

• Mozilla-based browsers such as Firefox support this property as

support it as –webkit-background-origin

• The CSS3 specification currently lists border-box and padding-box This syntax was changed in other areas of the specification, and browser vendors currently don’t support such values The supported values are presented instead

background-position-xThis property defines the x-coordinate of the background-position property

• Under IE 8 this property is known as –ms-background-position-x to correctly note it as an extension

background-position-yThis property defines the y-coordinate of the background-position property

Syntax

background-size: length | percentage [ length | percentage ]

where length or percentage values may have a single or double value

behavior: url(default behavior name or URL of behavior)

Microsoft has implemented a number of default behaviors These are accessible by specifying the url as #default#behaviorname, such as behavior:url(#default#

will be available to that element based on the default behavior used Table 6-7 shows a summary of the common default behaviors supported by Internet Explorer browsers

Name Description Properties and Methods

a folder

folder

DirectAnimation viewer image: an image to displaysound: a sound to play

statics: the DAStatics class library addDABehavior(oBehavior, iID) removeDABehavior(iID)

user’s environment

availHeight availWidth bufferDepth colorDepth connectionType cpuClass height javaEnabled platform systemLanguage userLanguage width

addComponentRequest(sID, sIDType [, sMinVer])

clearComponentRequest() compareVersions(sVersnNum1, sVersnNum2)

doComponentRequest() getComponentVersion(sID, sIDType) isComponentInstalled(sID, sIDType [, sMinVersion])

an object and have a callback function called on completion

download.startDownload(sUrl, fpCallback)

a user’s homepage Note that isHomePage() is only available for the current domain

sessions if the page is saved in Favorites

XMLDocument getAttribute(sAttrName) removeAttribute(sAttrName) setAttribute(sAttrName, vAttrValue)

as long as the page is returned to via Back/Forward

XMLDocument getAttribute(sAttrName) removeAttribute(sAttrName) setAttribute(sAttrName, vAttrValue)

page is saved

data

expires XMLDocument getAttribute(sAttrName) load (sStoreName) removeAttribute(sAttrName) save(sStoreName)

setAttribute(sAttrName, vAttrValue)

TABLE 6-7 Summary of Internet Explorer Default Behaviors (continued)

<h1 style="behavior: url(colorchange.htc);">What a dynamic header!</h1>

The following full example shows that it is possible to use older Microsoft behavior syntax with newer binding style syntax to add interactivity to elements via CSS:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>behavior and binding Example</title>

<body>

<p>Just a regular paragraph.</p>

<p id="clickable">I'm special click me.</p>

<p>Just a regular paragraph.</p>

</body>

</html>

The specified hello.htc file looks like this:

<PUBLIC:COMPONENT URN="urn:msdn-microsoft-com:workshop" lightWeight="true"> <PUBLIC:ATTACH EVENT="onclick" FOR="element" ONEVENT="sayHi()" /> <SCRIPT LANGUAGE="JScript">

function sayHi() { alert("Hello World from a bound HTC."); }

• A more complete discussion of behaviors, and built-in Internet Explorer behaviors

in particular, can be found at the MSDN site online (http://msdn.microsoft.com), but you should note that, for security concerns, some behaviors have been removed

or modified over time

• Behaviors are often bound to made-up elements when used, but this is not required

bindingThis property defines a relationship between bound elements(s) and some code or content

Generally, it is used to associate some scripting to various elements in a document

Syntax

binding: none | url(bindingfile)

where bindingfile is some technology such as XBL to add content or associate markup with

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>behavior and binding Example</title>

<p>Just a regular paragraph.</p>

<p id="clickable">I'm special click me.</p>

<p>Just a regular paragraph.</p>

<handler event="click" action=

"alert('Hello world from the bound XBL')" />

</handlers>

</binding>

</bindings>

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

Compatibility

Notes

• This property is supported as –moz-binding in Firefox browsers

• The property is similar to Internet Explorer’s behavior property

border-bottom-left-radiusThis property is used to round the bottom-left border corner specifically