لطفا منتظر باشید ...
Style Inclusion Methods
This section defines the basic methods to associate CSS-based style information with HTML or XHTML documents.
Embedded Styles
Document-wide styles can be embedded in a document's head element using the <style> tag. Note that styles should be commented out to avoid interpretation by nonstyle-aware browsers. However, be aware that comment masking is frowned upon in XHTML and linked styles should be used or a CDATA section employed.
Example
<style type="text/css">
<!--
p {font-size: 14pt; font-face: Times; color: blue;
background-color: yellow;}
em {font-size: 16pt; color: green;}
-->
</style>
Inline Styles
You can apply styles directly to elements in a document using the core attribute style. As the closest style inclusion method to a tag, inline styles will take precedence over document wide or linked styles.
Example
<h1 style="font-size: 48pt; font-family: Arial;
color: green;">CSS1 Test</h1>
Linked Styles
Styles can be contained in an external style sheet linked to a document or a set of documents (see Chapter 10), as shown in the following example. Linked information should be placed inside the <head> tag.
Example
<link rel="stylesheet" type="text/css" href="/image/library/english/10234_newstyle.css" />
The rel attribute is generally set to the value stylesheet but may also have a value of alternate stylesheet with an associated title value to provide different looks for the same page.
Examples
<link rel="stylesheet" href="/image/library/english/10234_standard.css" title="standard" />
<link rel="alternate stylesheet" href="/image/library/english/10234_bigred.css" title="Red Sheet" />
Chapter 11 has examples and more information on using alternative style sheets. The media attribute may also be used to define the media to which a style sheet is applied. The keyword values screen or print are commonly used. The default value of all is applied when media is not specified.
Examples
<link rel="stylesheet" href="/image/library/english/10234_screenstyle.css" media="screen"
type="text/css" />
<link rel="stylesheet" href="/image/library/english/10234_printstyle.css" media="print"
type="text/css" />
CSS2 does define a rich set of media values as shown in Table B-1, but practice shows few are supported.
Media Type | Definition |
|---|---|
all | For use with all devices |
aural | For use with speech synthesizers |
Braille | For use with tactile Braille devices |
embossed | For use with Braille printers |
handheld | For use with handheld devices |
For use with printed material and documents viewed onscreen in print preview mode | |
projection | For use with projected media (direct computer-to-projector presentations), or printing transparencies for projection |
screen | For use with color computer screens |
tty | For use with low-resolution teletypes, terminals, or other devices with limited display capabilities |
tv | For use with television-type devices |
Imported Styles
Styles can be imported from an external file and expanded in place, similar to a macro. Importing can be used to include multiple style sheets. An imported style is defined within a <style> tag using @import followed optionally by a type attribute and a URL for the style sheet.
Example
<style type="text/css">
@import url(/image/library/english/10234_newstyle.css)
</style>
The @import directive allows style sheets to be grouped and joined together. While this was the design of the feature, unfortunately most CSS developers use it to perform a weak form of browser selection because many older CSS implementations do not support the directive. The basic idea of the trick is to put sophisticated style rules in an @import style sheet and leave basic styles in the style block. This trick should be avoided, particularly given that some browsers, notably versions of Internet Explorer, will cause a disturbing flash effect when loading imported styles.
