css引入方式

1.使用 LINK标签将样式规则写在.css的样式文件中,再以<link>标签引入。

muban.css示例代码

#container 
{
position:absolute;
margin: 100px auto;
width: 388px;
 height: 429px;
 top: 138px;
 left: 950px;
}
在前台代码中插入如下代码:

<head runat = "sever">

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

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

</head>

2. 使用@import引入跟link方法很像,但必须放在<STYLE>...</STYLE> ,示例代码如下

<style type = "text/css">

       <!-- 

             @import url(css/muban.css);

       -->

</style>

3.使用STYLE标签将样式规则写在<STYLE>...</STYLE>标签之中,示例代码如下

<style type = "text/css">

       <!-- 

             container {position:absolute;margin: 100px auto;width: 388px;height: 429px; top: 138px;left: 950px;}

       -->

</style>

4.使用STYLE属性将STYLE属性直接加在个别的元件标签里.

<div style="font-family: 微软雅黑; font-size: medium"></div>

link 和 import 的区别主要是:加载顺序。

    当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:在muban.css中导入另外两个css文件

@import “sub1.css”;

@import “sub2.css”;

#container 
{
position:absolute;
margin: 100px auto;
width: 388px;
 height: 429px;
 top: 138px;
 left: 950px;
}

    这样做有一个缺点,会对网站服务器两个或产生过多的HTTP请求,以前是一个文件,而现在却是更多文件了,服务器的压力增大(因为每个http请求都要先跟服务器握手,然后再传输数据,多次请求,就有多次握手,并等待服务器响应,这样加载时间就长了),浏览量大的网站还是谨慎使用。




你可能感兴趣的:(css,import,link)