ࡱ > _ 0 p bjbj 4 b b P t u
8 *H " $) $) $) G G G G G G G $ I bL V G $) "' $) $) $) G
d G 5 5 5 $)
G 5 $) G 5 5 D | E `۬ + v 1E G G 0 *H CE ~ L . L $ E L E $) $) 5 $) $) $) $) $) G G b0 P $) $) $) *H $) $) $) $) L $) $) $) $) $) $) $) $) $) :
Cascading Style Sheets
1- Introduction
We have said that XHTML is concerned primarily with content rather than the details of how that content is presented by browsers. Most XHTML tags have associated properties that store presentation information for browsers. Browsers use default values for these properties if the document does not specify values. For example, the
tag has the font-size property, for which a browser could have the default value of 18 points. A document could specify that the font-size property for
be set to 20 points, which would override the default value.
The new value could apply to one occurrence of an
element or all such occurrences in the document; depending on how the property value is set.
2- Levels of Style Sheets
The three levels of style sheets, in order from lowest level to highest level, are inline, document level, and external. Inline style sheets apply to the content of a single XHTML element, document-level style sheets apply to the whole body of a document, and external style sheets can apply to the bodies of any number of documents. Inline style sheets have precedence over document style sheets, which have precedence over external style sheets. For example, if an external style sheet specifies a value for a particular property of a particular tag, that value is used until a different value is specified in either a document style sheet or an inline style sheet.
Likewise, document style sheet property values can be overridden by different property values in an inline style sheet. In effect, the properties of a specific tag are those which result from a merge of all applicable style sheets, with lower-level style sheets having precedence in cases of conflicting specifications. There are other ways style specification conflicts can occur. If no style sheet information is specified, the browser default property values are used. As is the case with tags and tag attributes, a particular browser may not be capable of using the property values specified in a style sheet. For example, if the value of the font-size property of a paragraph is set to 18 points, but the browser can display the particular font being used only in sizes up to 16 points, the browser obviously cannot fulfill the property specification. In this case, the browsers either would substitute an alternative value or would simply ignore the given font-size value and use its default font size.
Inline style specifications appear within the opening tag and apply only to the content of that tag. This fine-grain application of style defeats one of the primary advantages of style sheetsthat of imposing a uniform style on the tags of at least one whole document. Another disadvantage of inline style sheets is that they result in style information, which is expressed in a language distinct from XHTML markup, being embedded in various places in documents. It is better to keep style specifications separate from XHTML markup. For this reason, among others, W3C deprecated inline style sheets in XHTML 1.1. Therefore, inline style specifications should be used sparingly.
Document-level style specifications appear in the document head section and apply to the entire body of the document. This is obviously an effective way to impose a uniform style on the presentation of all of the content of a document.
In many cases, it is desirable to have a style sheet apply to more than one document. That is the purpose of external style sheets, which are not part of any of the documents to which they apply. They are stored separately and are referenced in all documents that use them.
External style sheets are written as text files with the MIME type text/css. They can be stored on any computer on the Web. The browser fetches external style sheets just as it fetches documents. The tag is used to specify external style sheets. Within , the rel attribute is used to specify the relationship of the linked-to document to the document in which the link appears. The href attribute of is used to specify the URL of the style sheet document, as in the following example:
The link to an external style sheet must appear in the head of the document. If the external style sheet resides on the Web server computer, only its path address must be given as the value of href. External style sheets can be validated with the service provided at HYPERLINK "http://jigsaw.w3.org/cssvalidator/" http://jigsaw.w3.org/cssvalidator/.
3- Style Specification Formats
The format of a style specification depends on the level of style sheet. Inline style specifications appear as values of the style attribute of a tag the general form of which is as follows:
Although it is not required, it is recommended that the last propertyvalue pair be followed by a semicolon. Document style specifications appear as the content of a style element within the header of a document, although the format of the specification is quite different from that of inline style sheets. The general form of the content of a style element is as follows:
The type attribute of the
selector {property_1:value_1; property_2:value_2; . . .; property_n:value_n;}
h1 {font-size: 24pt;}
h2, h3 {font-size: 20pt;}
p. normal {property-value list}
p. warning {property-value list}
A paragraph of text that we want to be presented in 'normal' presentation style
Sebesta4e_Ch03.fm Page 100 Tuesday, June 19, 2007 12:26 PM 3.4 Selector Forms 101
A paragraph of text that is a warning to the reader, which should be
presented in an especially noticeable presentation style
`
. sale {property-value list}
Now, in the body of a document, you could have the following:
Weekend Sale
...
...
#specific-id {property-value list}
#section14 {font-size: 20} specifies a font size of 20 points to the element
1.4 Calico Cats
xml version = "1.0" encoding = "utf-8"?>
Pseudo Classes
Fuchsia
or
rgb (255, 0, 255) or #FF00FF
font-family: Arial, Helvetica, Future
xml version = "1.0" encoding = "utf-8"?>
Font properties
If a job is worth doing, it's worth doing right.
Two wrongs don't make a right, but they certainly can
get you in a lot of trouble.
Chapter 1 Introduction
1.1 The Basics of Computer Networks
External style sheets
If a job is worth doing, it's worth doing right.
Two wrongs don't make a right, but they certainly can get
you in a lot of trouble.
Chapter 1 Introduction
1.1 The Basics of Computer Networks
/* styles.css - an external style sheet
for use with fonts2.html
*/
p. major {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; }
p. minor {font: 10pt bold 'Courier New';}
h2 {font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold}
h3 {font-family: 'Courier New'; font-size: 18pt}
Text decoration
This illustrates line-through
This illustrates overline
This illustrates underline
) o p 6
7
R
S
˺|m\K h=; h >*B*CJ aJ ph h=; h}0 >*B*CJ aJ ph h^* h B*CJ aJ ph h^* h( B*CJ aJ ph h^* h}0 B*CJ aJ ph h^* h(