Connect to an external style sheet

An external style sheet can be connected to an HTML document through the link element of HTML:

<LINK rel = stylesheet href = "style.css" type = "text/CSS" Media = screen>
<LINK rel = stylesheet href = "color-8b.css" type = "text/CSS" Title = "8-bit Color Style" Media = "screen, print">
<LINK rel = "alternate stylesheet" href = "color-24b.css" type = "text/CSS" Title = "24-bit Color Style" Media = "screen, print">
<LINK rel = stylesheet href = "aural.css" type = "text/CSS" Media = aural>

<Link> the mark is placed in the head part of the document. The optional type attribute is used to specify the media type -- text/CSS is a stacked style sheet -- allow the browser to ignore the style sheet types they do not support. It is also important to configure the server for the CSS file and send text/CSS as Content-Type content.

External style sheets cannot contain HTML tags such as

P {margin: 2em}

The file can be used as an external style table.

The <link> tag also has an optional media attribute, which is used to specify the media or media accepted by the style sheet. Allowed values include

Screen (default), submitted to the computer screen;
Print, output to the printer;
Projection, submitted to the projector;
Aural, speaker;
Braille, submitted to the convex-text tactile sensing device;
Tty, telex typewriter (using a fixed font );
TV, TV set;
All, all output devices.
Multiple media types are specified by comma-separated lists or values all.

Netscape Navigator ?. X mistakenly ignores any join or embedded style sheets other than the screen value declared using the media value. For example, media = "screen, projection" will cause the style sheet to be Navigator ?. X ignore, although the display device is a computer screen. Navigator ?. X also ignores the style sheet declared by media = All.

The rel attribute defines the relationship between connected files and HTML documents. Rel = stylesheet specifies a fixed or preferred style while rel = "alternate stylesheet" defines an interactive style. Fixed styles are always applied when the style sheet is activated. The missing title attribute, just like the first <link> tag in the example, defines a fixed style.

A preferred style is automatically applied, as shown in the second <link> mark in the example. Rel = stylesheet and a combination of the title attribute specify a preferred style. The web page producer cannot specify more than one preferred style.

The interaction style is indicated by rel = "alternate stylesheet. In this example, the third <link> tag defines an interactive style. You can choose to replace the preferred style table.

Note that browsers generally lack the ability to select interactive styles.

A single style can also be presented through multiple style sheets.

<LINK rel = stylesheet href = "basics.css" Title = "Contemporary">
<LINK rel = stylesheet href = "tables.css" Title = "Contemporary">
<LINK rel = stylesheet href = "forms.css" Title = "Contemporary">

In this example, three style sheets are combined into a "Contemporary" style, which is applied as a preferred style sheet. To combine multiple style sheets into a single style, you must use the same title in each style sheet.

An external style sheet is ideal when a style is applied to many web pages. Using External style sheets, web page makers can change the appearance of the entire website by changing only one file. Similarly, most browsers store external style sheets in the buffer, thus avoiding latency when displaying webpages if the style sheets are in the buffer.

Microsoft Internet Explorer? For Windows? 5/NT4 does not support the body background image or color from the joined style sheet. If this error is taken into consideration, the Web Builder may wish to provide another structure that includes a background image or color, such as embedding or Inline styles, or using the background attribute of the Body element.

--------------------------------------------------------------------------------

Embed a style sheet
A style sheet can be embedded in the document using the style element:

<Style type = "text/CSS" Media = screen>
<! --
Body {Background: url(foo.gif) Red; color: Black}
P em {Background: yellow; color: Black}
. Note {margin-left: 5em; margin-Right: 5em}
-->
</Style>
The style element is placed in the head of the document. The required type attribute is used to specify the media type, and the link element is the same. Similarly, you can specify the title and media attributes using style.

The earlier version of the browser does not recognize the style element. It will display its content as a part of the body, so that these style sheets are visible to users. To prevent this, the content of the style element must contain an SGML annotation (<! -- Comment -->.

An embedded style sheet can be used when a document has a unique style. If multiple documents use the same style sheet, the external style sheet is more suitable.

--------------------------------------------------------------------------------

Enter a style sheet
A style sheet can be input using @ import declaration of CSS. This declaration is used for a CSS file or an internal style element:

<Style type = "text/CSS" Media = "screen, projection">
<! --
@ Import URL (http://www.htmlhelp.com/style.css );
@ Import URL (/stylesheets/punk.css );
Dt {Background: yellow; color: Black}
-->
</Style>
Note that other CSS rules should still be included in the style element, but all @ import declarations must be placed at the beginning of the style sheet. Any rule specified in the style sheet excludes the opposite rule in the input style sheet. For example, in the previous example, even if an input style table contains dt {Background: Aqua}, the definition terms will still be a yellow background.

The order of the input style sheets is important for how they are stacked. In the example above, if the strongelement of the style.css input indicates that the strongelement is displayed as red and the punk.css style table specifies that the strong element is displayed as yellow, the subsequent rules will win, and the strong element will be displayed as yellow.

The input style sheet is very useful for attention. For example, a website can use the selector classification style sheet. A simple.css style sheet provides common elements such as body, P, H1, and H2. In addition, an extra.css style sheet provides less common elements such as code, BLOCKQUOTE, and dfn. A tables.css style sheet can be used to define rules for changing elements. The three style sheets can be included in HTML using the @ import declaration as needed. Three style sheets can also be combined by link elements.

--------------------------------------------------------------------------------

Inline Style
Styles can be inline with the style attribute. The style attribute can be applied to any body element (including the body itself), except basefont, Param, and script. This attribute treats any number of CSS declarations as their own values, and each declaration is separated by a semicolon. The following is an example:

<P style = "color: red; font-family: 'New century schoolbook', Serif"> the style in this section is red New Century schoolbook, if the font is available. </P>

Note that the new century schoolbook in the style is included in the single quotation mark, because the double quotation mark is used as the include style declaration.

Inline styles are more flexible than other methods. To use inline Styles, you must use the content-style-Type HTTP header extension to declare the style sheet language for the entire document. The web page maker who uses inline CSS must use text/CSS as the content-style-Type HTTP header, or include the following mark in the head section:

<Meta HTTP-EQUIV = "content-style-type" content = "text/CSS">

Note: Chinese Web pages are marked:

<Meta HTTP-EQUIV = "Content-Type" content = "text/CSS">

Note by the translator!

Because it is mixed with the content to be displayed, inline styles will lose some advantages of style sheets. Similarly, inline styles accept all media by default, because there are no statements that specify clear media for inline styles. This method should be used as little as possible, for example, when a style is applied to all the media to an element. If a style is applied to a single element, but only confirmed media can be used, use the ID attribute instead of the style attribute.

--------------------------------------------------------------------------------

Class attributes
The class attribute is used to specify the style of an element. For example, you can add the punk and warning classes to a style sheet:

. Punk {color: lime; Background: # ff80c0}
P. Warning {font-weight: bolder; color: red; Background: white}
These classes can be referenced in HTML using the class attribute:

<H1 class = punk> attribute extension <P class = warning> some property extensions have negative edge effects, which are generated on supported and unsupported browsers...

In this example, the punk class can be used for any body element because it has no HTML element association in the style sheet. In this example, the warning class can only be used for the P element.

A good habit is to name classes according to their functions rather than their appearance. In the preceding example, the warning class can also be named Red, but if the webpage maker decides to change the style of this class to another color, or wants to define aural (auditory) for those who use PC speakers) style, then the name becomes meaningless.

Class is an effective way to apply styles to the same structure in HTML documents. For example, the class used on this page uses different styles for CSS source code and HTML source code.

--------------------------------------------------------------------------------

Id attribute
The ID attribute is used to define a unique style of an element. A css rule is as follows:

# Wdg97 {font-size: larger}

You can use the ID attribute to apply it to HTML:

<P id = wdg97> welcome to Web Design Group and TV water 168! </P>

The value of each ID attribute in the entire document must be unique. The value must start with a letter, followed by a letter, literacy, or hyphen. Letters are limited to A-Z and A-Z.

Pay attention to HTML ?. 0 allows a period in the ID attribute, but css1 does not allow a period in the ID selector. Note that css1 allows Unicode characters-and ignores Unicode characters as a numerical code, but HTML ?. 0 cannot contain these characters in an ID attribute value.

When a style only needs to be applied once in any document, it is suitable to use ID. Compared with the style attribute, Id allows you to specify the style of a media set and can also be applied to multiple documents (although each document is used only once ).

--------------------------------------------------------------------------------

SPAN Element
The span element is added to HTML to allow the webpage maker to give a style, but does not need to be appended to an HTML structure element. Span is used as a selector in the style sheet, and it can also accept the style, class, and Id attributes.

Span is an inline element, so it can be used as elements in HTML, such as Em and strong. The most important difference is that although em and strong have structural significance, span does not. Its existence is purely an application style, so it does not play any role when the style table fails.

Some span examples are as follows:

<! Doctype HTML public "-// W3C // dtd html 4.0 draft // en">
<HTML>
<Head>
<Title> span example </title>
<Meta HTTP-EQUIV = "Content-Type" content = "text/CSS; charset = gb2312">
<Style type = "text/CSS" Media = "screen, print, projection">
<! --
. Firstwords {font-variant: Small-caps}
-->
</Style>
</Head>
<Body>
<P> <SPAN class = firstwords> the first few words </span> is
A few characters in a paragraph can be small uppercase letters. The style can also be inline, such as changing the text
<Span style = "font-family: Arial"> Arial </span>. </P>

--------------------------------------------------------------------------------

Div Element
The DIV element is similar to the span element in function. The main difference is that Div ("division", "part" for short) is a block-level element. A Div can contain paragraphs, titles, tables, and other parts. This makes Div easy to create different integrated classes, such as chapters, summaries, or remarks. For example:

<Div class = Note>
<H1> divisions/Part <P> DIV elements are defined in HTML 3.2, but only the align attribute in HTML 3.2 is compatible. HTML 4.0 adds the class, style, and Id attributes to the attributes. </P>
<P> because Div can contain other block-level integration, it is useful in large sections used for document creation, such as the remarks in this document. </P>
<P> disable the flag. </P>
</Div>

--------------------------------------------------------------------------------

Remarks about certification
A few documents that use CSS styles can be certified on the html3.2 (Wilbur) layer (on the WDG website, Translator's note. Html3.2 does not explain the span element or the class, style, or ID attribute, and the type and media attributes are rarely supported in link and style elements.

These style elements and attributes are not harmful to unsupported browsers because they can be safely ignored. Documents use these elements and attributes to be authenticated against HTML 4.0.

# Html/XHTML/XML Column