一个css文件和html文件是怎么建立连接的？
2016-07-26 · 百度知道合伙人官方认证企业
育知同创教育
一个css文件和html文件是通过动态导入到html页面建议联系的。
比如有一个外部css文件，header.css：
内容如下：
body {
font-family: "黑体";
font-size: 12px;
color: #000;
margin: 0px;
text-align:center;
margin-left: 20px;
margin-top: 50px;
margin-right: 20px;
margin-bottom: 20px;}
div#wrap {
width:800px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
text-align:center;
background-image:url(images/bg_img04.jpg); }
div#header {
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 14px;
color: #000;
text-align:center;
margin-left: 10px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 5px;}
div#footer{
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 12px;
color: #000;
text-align:center;
margin-left: 10px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 8px; }
div#center{
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 12px;
color: #000;
text-align:center;
margin:0 auto;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
a {
font-size: 14px;
color: #000;
font-family:"黑体"; }
a:link {
text-decoration: underline;
color: #009;}
a:visited {
text-decoration: underline;
color: #306;}
a:hover {
text-decoration: none;
color: #900;}
a:active {
text-decoration: underline;
color: #36C;}
2、html代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS DIV 样式布局 III 头header 脚 footer 身 center </title>
<link href="css/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="header">
<p><a href="#"><strong>添加新的留言内容</strong></a></p>
<p><strong>导航或标题</strong></p>
</div>
</td>
</tr>
<tr>
<td height="183" background="" >
<div id="center">
···················代码编辑区域······················
</div>
</td>
</tr>
<tr>
<td><div id="footer">Copyright © 2011 songyanjun, All Rights Reserved</div></td>
</tr>
</table>
</div>
</body>
</html>
这样当页面运行后，对应的样式就会加载出来。
运行结果：
一、在head里用<link href="style.css" rel="stylesheet"/>
二、在style标签里用@import url(demo.css )
<!--<link rel="stylesheet" type="text/css" href="css文件位置">-->
在需要建立连接的html文件头部加入此语句即可
<link href="style.css" rel="stylesheet"/>
href为样式文件地址！
