css折叠样式（2）――定义样式表
程序员文章站
2022-04-18 14:16:41
...
第一样式表可用（1）嵌入式样式表（2）引入式样式表，两种方式来实现，
如下我便以代码的形式放在下面：
（1）嵌入式样式表
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式使用</title>
<style type="text/css">
div{background:red;font-size:20px} <!--HTML标记定义 -->
.div1{background-color:green;font-size:20px;} <!--class定义样式 -->
#divid{background-color:blue;font-size:20px;} <!--id定义样式 -->
<!---组合选择器不能与其他选择器共存-->
p,h1,h2,.p1,#pid {color:red;font-size:20px;} <!--组合定义样式 -->
a:link { color:red; }
a:hover { color:green; }
a:active { color:yellow; }
a:visited { color:blue; }
</style>
</head>
<body>
<div class="div1" id="divid">css定义样式</div>
<h1>这是定义样式1</h1>
<h2>这是定义样式2</h2>
<p>这是定义样式3</p>
<p class="p1">这是定义样式4</p>
<p id="pid">这是定义样式5</p>
<a href="http://www.baidu.com/1" target="_blank">百度1</a>
<a href="http://www.baidu.com/2" target="_blank">百度2</a>
<a href="http://www.baidu.com/3" target="_blank">百度3</a>
<a href="http://www.baidu.com/4" target="_blank">百度4</a>
<a href="http://www.baidu.com/5" target="_blank">百度5</a>
</body>
</html>
（2）引入式样式表
demo.html
<!doctype html>
<html>
<head>
<title>Css样式使用</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>css样式使用</h1>
<a href="http://www.baidu.com/1" target="_blank">百度1</a>
<a href="http://www.baidu.com/2" target="_blank">百度2</a>
<a href="http://www.baidu.com/3" target="_blank">百度3</a>
<a href="http://www.baidu.com/4" target="_blank">百度4</a>
<a href="http://www.baidu.com/5" target="_blank">百度5</a>
<br>
<h1>这是定义样式1</h1>
<h2>这是定义样式2</h2>
<p>这是定义样式3</p>
<p class="p1">这是定义样式4</p>
<p id="pid">这是定义样式5</p>
<div>css的html定义样式</div>
<div class="div1">css的class定义样式</div>
<div id="divid">css的id定义样式</div>
<div class="div1" id="divid">css定义样式的优先级：id > class >HTML 样式</div>
</body>
</html>
style.css
body{
background-color:yellow;
color:#fff
}
p,h1,h2,.p1,#pid {color:red;font-size:20px;} /* 组合样式定义*/
a:link { color:red; } /* 显示红色*/
a:hover { color:green; } /* 鼠标移动至该处变绿色*/
a:active { color:yellow; } /* 鼠标点击该处时变黄色*/
a:visited { color:blue; } /* 鼠标点击该处后变蓝色*/
div{background:red;font-size:20px} /* HTML样式定义 */
.div1{background-color:green;font-size:20px;} /* class样式定义 */
#divid{background-color:blue;font-size:20px;} /* id样式定义 */
以上就是css折叠样式（2）――定义样式表的内容，更多相关内容请关注PHP中文网（www.php.cn）！