JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.1.5 CSS Example

16.1.5 CSS Example

Example 16-1 is an HTML file that defines and uses a stylesheet. It demonstrates tag name, class, and ID-based selectors, and also has an example of an inline style defined with the style attribute. Figure 16-1 shows how this example is rendered in a browser.

Example 16-1. Defining and using Cascading Style Sheets

Cascading Style Sheets Demo


This is a warning! Notice how it grabs your attention with its bold text and bright colors. Also notice that the heading is centered and in blue italics.

This paragraph is centered
and appears in uppercase letters.
Here we explicitly use an inline style to override the uppercase letters.

Cutting-Edge CSS

As I write this chapter, CSS is in the midst of a revolution, with browser vendors implementing powerful new styles such as border-radius, text-shadow, box-shadow, and column-count. Another revolutionary new feature of CSS is web fonts: the ability to download and use custom fonts with a CSS @font-facerule. (See webfonts for a selection of fonts free for use on the Web and an easy mechanism for downloading them from Google’s servers.)

Another revolutionary development in CSS is CSS Transitions. This is a draft specification that can automatically turn any scripted change to a CSS style into a smoothly animated transition. (When widely implemented, it will largely obviate the need for CSS animation code like that shown in §16.3.1 .) CSS Transitions is implemented in current browsers other than IE, but its style properties are still prefixed with vendor-specific strings. CSS Animations is a related proposal that uses CSS Transitions as a starting point for defining more complex animation sequences. CSS Animations are currently only implemented by Webkit browsers. Neither transitions nor animations are covered in this chapter, but they are technologies that you, as a web developer, should be aware of.

Another CSS draft that web developers should be aware of is CSS Transforms, which allows arbitrary 2D affine transforms (rotation, scaling, translation, or any combination expressed as a matrix) to be applied to any element. All current browsers (including IE9 and later) support the draft, with vendor prefixes. Safari even supports an extension that allows 3D transformations, but it is unclear whether other browsers will follow their lead.

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1