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
WarningThis 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.
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 http://code.google.com/ 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.欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/31443.html