CSS样式表
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类：
- 内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
- 内部式：包含在HTML的<head></head>标签中，只对当前页面有效，如:<style>...</style>
- 外部式：链接引入外部样式表文件，如：<link href="style.css" ...>
内嵌式
需要在相关的标签内使用样式（style）属性,style 属性可以包含任何 CSS 属性。
如：
<body>
<h1 style="color:red;">Hello World！</h1>
<p style="color:red;font-size:30px">Happy every day!</p>
</body>内部式
在style标签中书写CSS代码。style标签写在head标签中。
如：
<head>
<style >
h1{
color:red;
}
p{
color:red;font-size: 30px;
}
</style>
</head>
<body>
<h1 >Hello World！</h1>
<p >Happy every day!</p>
</body>外部式
在HTML中引入外部 CSS 文件，可通过<link type="text/css" rel="styleSheet" href="CSS文件路径" />来引入CSS文件。如：
家用电器.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家用电器</title>
<link rel="stylesheet" type="text/css" href="家用电器.css">
</head>
<body>
<div class="type">
<div id="title1">家用电器</div>
<div class="title2" ><a href="">大家电</a></div>
<p>
<a href="">平板电视</a> <a href="">洗衣机</a> <a href="">冰箱</a></br>
<a href="">空调</a> <a href="">烟机/灶具</a> <a href="">热水器</a></br>
<a href="">冷柜/酒柜</a> <a href="">消毒柜<a> <a href="">家庭剧院</a></br>
</p>
<div class="title2"><a href="">生活电器</a></div>
<p>
<a href="">电风扇</a> <a href="">净化器</a> <a href="">吸尘器</a></br>
<a href="">净水设备</a> <a href="">挂烫机</a> <a href="">电话机</a></br>
</p>
<div class="title2"><a href="">厨房电器</a></div>
<p>
<a href="">榨汁机</a> <a href="">电压力锅</a> <a href="">电饭煲</a></br>
<a href="">豆浆机</a> <a href="">微波炉</a> <a href="">电磁炉</a></br>
</p>
<div class="title2"><a href="">五金家电</a></div>
<p>
<a href="">淋浴/水槽</a> <a href="">电动工具</a> <a href="">手动工具</a></br>
<a href="">仪器仪表</a> <a href="">浴霸/排气</a> <a href="">灯具</a></br>
</p>
</div>
</body>
</html>家用电器.css文件
@charset "utf-8";
/*总div宽度*/
.type{
width:240px;
}
#title1{
font-size:18px;
font-weight:bolder;
line-height:36px;
background-color:rgb(47, 93, 231);
color:white;
padding-left:13px;
}
.title2{
font-size:14px;
font-weight:bold;
line-height:34px;
background-color:rgb(205, 240, 253);
color:white;
padding-left:20px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
color:rgb(240, 98, 98);
}
p{
font-size:12px;
line-height:25px;
color:rgba(41, 40, 40, 0.4);
text-align:left;
padding-left:9px;
}
p a:hover{
text-decoration:none;
color:crimson;
}