CSS的使用可以将显示样式分离出来，那么CSS需要与html整合使用，就相当于将网页内容与显示样式整合在一起。CSS和html有四种整合方式，本文就详细讲解这四种整合方式。
1.style样式(内联样式)
style样式就是将样式直接通过style属性表达出来。
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<div style="background-color:red;color:green;">css和html整合之style样式表</div>
</body>
</html>
查看效果：
2.内部样式表
所谓内部样式表，就是在<head></head>元素之间定义的，并将样式内容定义在<style></style>元素之间。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color:green;
color: pink;
}
</style>
</head>
<body>
<div>css与html整合之内部样式表</div>
</body>
</html>
查看效果：
3.外部连接样式表
在html文件中通过与css文件建立连接，从而在html中可以直接使用css文件中的样式。通过<link rel="stylesheet" type="text/css" href="*.css" />来与css文件建立连接。
首先，将样式定义在div.css文件中，文件内容如下：
div {
background-color: pink;
color: black;
font-size:20px;
font-family:Serif;
font-weight:5px;
font-style:italic;
}然后使用外部连接的实例：
<html>
<head>
<title>HTML示例</title>
<link rel="stylesheet" type="text/css" href="div.css" />
</head>
<body>
<div>css与html整合之外部连接样式表</div>
</body>
</html>
样式结果：
4.外部导入样式表
外部导入样式表，则是通过<style type="text/css">@import url(name.css)</style>来导入外部的css内容的。演示代码如下：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>css和html整合之外部导入样式表</div>
</body>
</html>
效果如下：
5.优先级比较
css和html整合有四种方式，接下来来看看这几种方式的优先级。
首先定义div.css文件如下：
div {
background-color: pink;
color: black;
font-size:20px;
font-family:Serif;
font-weight:5px;
font-style:italic;
}
p {
color:red;
font-weight:10px;
}实例代码：
<html>
<head>
<title>HTML示例</title>
<link rel="stylesheet" type="text/css" href="div.css" />
<style type"text/css">
div{
background-color:white;
color:pink;
}
</style>
</head>
<body>
<div style="color:black">谁是第一优先级</div>
<div>谁是第二优先级</div>
<p>谁是第三优先级</div>
</body>
</html>
效果图：
结合效果图和代码可以看出，style样式的优先级最高，当几种整合方式都存在的时候，具有相同属性时，style值能够覆盖其它的，如果没有的则继承过来，其次就是内部样式表，覆盖低优先级冲突的以及继承自身没有但是低优先级有的。因此整合方式的优先级应该是从外到内，优先级从低到高。
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
