CSS技术在网页制作中使用(英文版).ppt

Chapter 4 CSS Objectives Compare CSS formatting with HTML formatting. Describe and compare the 3 levels of style sheets. Compare different types of selectors. Describe the box model. Use various styles (style properties) to modify page content. CSS vs. HTML HTML(p130): h1 align=“center”font face=“Arial” Heading1/font/h1 … CSS: style h1 {text-align:center; font-family:Arial}/style h1 Heading1 /h1 The benefits of CSS Greater capacity to handle presentation Less work Potentially smaller documents It’s well supported How CSS works Start with an HTML document. Ideally, it will have been given a logical structure and semantic meaning using HTML. Write style rules for how each element should ideally look. Each rule targets the element by name, and then lists properties—such as font, color, and so on—to be applied to the element. Attach the style to the document. Levels of Style Sheets HTML style sheets are called cascading style sheets because they can be defined at three different levels to specify the style of a document. Lower-level style sheets can override higher-level style sheets, so the style of the content of a tag is determined through a cascade of style sheet applications. Levels of Style Sheets Inline - specified for a specific occurrence of a tag and apply only to that tag This is fine-grain style, which defeats the purpose of style sheets - uniform style Document-level style sheets - apply to the whole document in which they appear External style sheets - can be applied to any number of documents Levels of Style Sheets When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence. Note: IE implementation is a bit different. It takes a “nearest first” approach. Example: What color is it? (page 135) Levels of Style Sheets Inline style sheets appear in the tag itself Document-level style sheets appear in the head of the document External style sheets are in separate files, potentially on any server on t