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

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)
12/51
Style Specification Formats
• Form of the rules: selector {list of property/values} • The selector is a tag name or a list of tag names, separated by commas. • Each property/value pair has the form: property: value • Pairs are separated by semicolons, just as in the value of a <style> tag
Style Specification Formats
• Format depends on the level of the style sheet • Inline: Style sheet appears as the value of the style attribute • General form: • style = "property_1: value_1; • property_2: value_2; • … • property_n: value_n‖ • Scope of an inline style sheet is the content of the tag
• Document-level style sheets - apply to the whole document in which they appear • External style sheets - can be applied to any number of documents
7/51
6/51
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
2/51
CSS vs. HTML
• HTML(p130):
<h1 align=―center‖><font face=―Arial‖> Heading1</font></h1> …
• CSS:
<style> h1 {text-align:center; fontfamily:Arial}</style> <h1> Heading1 </h1>
18/51
Style Classes
• Used to allow different occurrences of the same tag to use different style specifications • A style class has a name, which is attached to a tag name • For example, p.normal {property/value list} p.special {property/value list}
11/51
Style Specification Formats
• Comments in the rule list must have a different form - use C comments (/*…*/) • General form: <style type = "text/css"> <!-rule list --> </style>
Chapter 4 CSS
1/51
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.
13/51
Style Specification Formats
property value
H1 {text-align:center; font-family:Arial}
selector
style definition (declaration)
14/51
Style Specification Formats
• External style sheets • Form is a list of style rules, as in the content of a <style> tag for document-level style sheets • E.g.
h1{color:red} h1,h2 {background-color:white}
– Written as text files with the MIME type text/css – <link> tag is used to specify that the browser is to fetch and use an external style sheet file – <link rel = stylesheet type = "text/css" href = "/termpaper.css― /> 9/51
3/51
The benefits of CSS
• • • • Greater capacity to handle presentation Less work Potentially smaller documents It‘s well supported
4/51
How CSS works
1. Start with an HTML document. Ideally, it will have been given a logical structure and semantic meaning using HTML. 2. 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. 3. Attach the style to the document.
ห้องสมุดไป่ตู้5/51
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.
h1 {color:blue;} h2 {color:blue;} p {color:blue}
• Type selectors can be grouped into commaseparated lists so a single property will apply to all of them. For example:
10/51
Style Specification Formats
• Document-level: • Style sheet appears as a list of rules that are the content of a <style> tag • The <style> tag must include the type attribute, set to "text/css" • The list of rules must be placed in an HTML comment, because it is not HTML
8/51
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 the Internet