The use of CSS styles is broadly divided into three types
Let's take a look at an umbrella chart first.
1 called using the form of a connection
There are two ways of calling:
A Use the link tag
Writes a style rule in the. CSS in a style document, and then introduced as a <link> tag
The law is as follows:
<link rel= "stylesheet" href= "http://www.php1.cn/" >
Usually a way to drag a CSS file directly to an HTML page
Centralized rel= "stylesheet" refers to the style sheet file between this link and the href. Type= "Text/css" refers to the type of file that is a style sheet
The placement is usually in the
B Importing with @import
Just like importing namespaces. Put it in the zai<style>...</style>.
Styletype= "Text/css" >
<!--
@importurl (the address, path, and file name of the introduced stylesheet);
-
</STYLE>
For example:
<styletype= "Text/css" >
<!--
@importurl (HTTP://YOURWEB/EXAMPLE.CSS);
-
</STYLE>
Note that the semicolon at the end of the line is absolutely indispensable!
2 Using the Style property
Add the style attribute directly to an individual element tag or inline
The method is called as follows:
< element name style= "Attribute 1: Attribute value 1; Property 2: Property value 2; ..." ></element name >
The syntax of the style is exactly the same as the independent style syntax. For example
<divstyle= "WIDTH:30PX;COLOR:RED;FONT-SIZE:15PX;" ></div>
The advantage of this use is that the smart application of the label, egg pine shortcomings is not the entire document unity;
3 Using the Style label
Place the style inside the style tag in the head element, with the body peer
The syntax is as follows:
<style type= "Text/css" >
<!--CSS
Style sheet
-
</style>
[HTML]
Let's use an example to illustrate this.
<title>css Call Method </title>
<style>
. content{
Background-color: #cccccc;
font-size:14px;
width:240px;
height:80px;
Color:blue;
Text-align:center;
}
</style>
<body>
<div class= "Content" > Example: Called from the page header. </div>
</body>
Let's use an example to illustrate this.
<title>css Call Method </title>
<style>
. content{
Background-color: #cccccc;
font-size:14px;
width:240px;
height:80px;
Color:blue;
Text-align:center;
}
</style>
<body>
<div class= "Content" > Example: Called from the page header. </div>
</body>
Usually the entire <STYLE>...</STYLE> structure is written in the <HEAD></HEAD> section of the Web page. The advantage of this usage is that the entire document is uniform, as long as it is a declared component that applies the style rule. The disadvantage is that the flexibility of individual components is insufficient.