一、CSS属性书写格式:
(1)行内样式<div style="color:red">XXX</div>
(2)内嵌样式:<head>
<style type="text/css">
标签名称{
属性名称:属性对应的值;
......
}
</style>
</head>
二、相关属性介绍
- font-size属性用于设置字号(字体大小)
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
- font-family属性用于设置哪一种字体。
- 相关具体如下:
外观相关属性:
三、 项目展示:
1、代码撰写:
<!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>
</head>
<style>
.a1{
background-color:#0f7cbf;
font-size: 18px;
width: 250px;
font-weight: bold;
text-indent: 10px;
line-height: 35px;
}
.a2{
background-color:#e4f1fa;
font-size: 14px;
width: 250px;
font-weight: bold;
text-indent: 20px;
line-height: 30px;
color:#0f7cbf;
}
.a2:hover{
text-decoration: underline;
}
.a3{
color: #666;
line-height: 20px;
text-indent: 10px;
}
.a3:hover{
text-decoration: underline;
text-decoration-color: #f60;
}
</style>
<body>
<div class="a1">家用电器</div>
<div class="a2">大家电</div>
<div class="a3"> 平板电视 洗衣机 冰箱 </div>
<div class="a3">空调 烟机/灶具 热水器</div>
<div class="a3">冷柜/酒柜 消毒柜 家庭影院</div>
<div class="a2">生活电器</div>
<div class="a3">电风扇 净化器 吸尘器 </div>
<div class="a3"> 净水设备 挂烫机 电话机</div>
<div class="a2">厨房电器</div>
<div class="a3">榨汁机 电压力锅 电饭煲 </div>
<div class="a3">豆浆机 微波炉 电磁炉</div>
<div class="a2">五金家装</div>
<div class="a3">淋浴/水槽 电动工具 手动工具</div>
<div class="a3">仪器仪表 浴霸/排气 灯具 </div>
</body>
</html>
2、结果展示:
总结:对html有了新的认识,并产生了对其研究的兴趣 。在以后的学习过程中再接再厉!!!