CSS Basic Concepts The first section refers to CSS style sheets

There are four ways to reference CSS styles, which include a reference to a document's inner style, and a reference to a document's external style sheet.

1.LINK elements

The link element is created in HTML and XHTML to refer to an external style sheet in the current document

General syntax

<link rel= "..." type= "text/css" href= "..." media= "..." >

Property

Rel= "..."

This property describes the relationship of the current document to the linked file. For external style sheets, there are two possible values: stylesheet (style sheet) and alternate stylesheet (alternate style sheet). The stylesheet value of REL defines the style of the document that will use the linked document. Alternate stylesheet value refers to the style sheet that the document uses without default rendering, which, in theory, can be used by the user to change the style of the document. The browser must provide a mechanism for this to work, but unfortunately most browsers do not provide such a mechanism. This property is required.

Href= "..."

The value of this property is a link to an external style sheet. Its value can use either an absolute URL (absolute URL) or a relative URL (relative URL). This property is required.

Type= "Text/css"

This property is used to declare the data type of the linked document. When a CSS style sheet is linked, only the value of TEXT/CSS is allowed. Other stylesheet languages need to write different values (for example, text/xsl). This property is required.

Media= "..."

Using this property, you can declare that a style sheet applies only to certain devices. The default value is all, which means that the style document will be used on all devices. The values that the CSS recognizes are as follows: all (all devices), screen (computer screens), print (Preview mode/print page), projection (projection), aural (sound), Braille (Braille feedback device for the blind), embossed (embossing) , handheld (handheld terminal small screen, limited bandwidth), TV (TV type device low resolution, limited scrolling capability). All of the above values can be used in media properties, and if you use multiple values at the same time, you can format them with a comma-delimited style. This property is optional.

　　Attention:

In this method, an external style sheet is introduced in its own document. These stylesheet file extensions (also known as file suffix names, which are a mechanism used by the operating system to flag file types) are usually CSS, such as MAIN-STYLE.CSS.

The link element must be placed in the head element of HTML and XHTML, but XML-based markup languages may have additional requirements.

Case

<link rel= "stylesheet" type= "Text/css" href= "Http://www.my.site/styles/basic.css" >

<link rel= "stylesheet" type= "Text/css" href= "Article.css" media= "Screen,projiction" >

<link rel= "stylesheet" type= "Text/css" href= "Printout.css" media= "print" >

Browser support

All browsers support media properties with a value of "screen", "Print", and "all".

Tip: In full-screen mode, Opera also supports the "projection" attribute value.

2.STYLE elements

The style element can create a container for an inline style sheet in HTML and XHTML.

General syntax

<style type= "text/css" media= "..." >

Property

Type= "Text/css"

This property operates in the same way as a property on a linked element. This property is required.

Media= "..."

This property operates in the same way as a property on a linked element. This property is optional.

　　Attention

Styel must be placed in the head element of HTML and XHTML.

Case

<style>

h1{color:purple; border-bottom:1px solid maroon;}

H2{color:blue; Background:cyan;}

</style>

<style type= "Text/css" media= "All" >

pre,code,tt{font-family:monospace; color: #333;}

Pre{margin-left:3em;}

</style>

3.STYLE Properties

In HTML and XHTML version 1.1, any element can take the style property.

General syntax

<elem style= "... styles ..." >

　　Attention

　　　The value of this property is any combination of style declarations. Because this approach is to combine styles and elements tightly by using the element information that is placed inside the document. When there is a better solution (for example: embedded or external style sheet.) ), it is not recommended to use the Style style property.

Case

<p style= "color:red;" > This text will be red. </p>

[Email protected] rules

@import rules like link elements import an external style sheet. Detailed information will be introduced later.

CSS Basic Concepts The first section refers to CSS style sheets