1、页面使用CSS的好处：
有效的传递页面信息。
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户。
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容。
具有良好的用户体验。
2、美化网页的一些基本样式
A:字体样式：
font-family设置字体类型font-family:”隶书”;
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;
font在一个声明中设置所有字体属性font:italic bold 36px “宋体”;
举例：
body{font-family: Times,”Times New Roman”, “楷体”;}
h1{font-size:24px;} 单位->px：像素
h2{font-style:oblique;}
p{font-weight:bold;}
p span{font:oblique bold 12px “楷体”;}
B:文本属性：
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text-align:right;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline;
C:排版文本段落：
水平对齐方式：text-align：left|right|center|justify;
left把文本排列到左边。默认值：由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果
首行缩进：text-indent：em或px
行高：line-height：px
文本修饰：text-decoration:none|underline|overline|line_through
值说明
none默认值，定义的标准文本
underline设置文本的下划线
overline设置文本的上划线
line-through设置文本的删除线
垂直对齐方式：vertical-align属性：middle、top、bottom
文本阴影：text-shadow : color x-offset y-offset blur-radius;
D:背景颜色和背景图片：
background-color:”red”;
background-image:url(图片路径);
background-repeat:
沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
background-position:X、Y方向关键词 水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
举例：
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
线性渐变：linear-gradient ( position, color1, color2,…)
3、举例：
<head>
<title>家用电器</title>
</head>
<link rel=”stylesheet” href=”jiayongdianqi.css”>
<body>
<div class=”container”>
<h2>家用电器</h2>
<div class=”type”>
<h6><a href=”#”>大家电</a></h6>
<ul>
<li> <a href=”#”>平板电视</a> <a href=”#”>洗衣机</a> <a href=”#”>冰箱</a></li>
<li> <a href=”#”>空调</a> <a href=”#”>烟机/灶具</a> <a href=”#”> 热水器</a></li>
<li> <a href=”#”>冷柜/酒柜</a> <a href=”#”>消毒柜</a> <a href=”#”>家庭影院</a></li>
</ul>
<h6><a href=”#”>生活电器</a></h6>
<ul>
<li> <a href=”#”>电风扇</a> <a href=”#”>净化器</a> <a href=”#”>吸尘器</a></li>
<li> <a href=”#”>净水设备</a> <a href=”#”>挂烫机</a> <a href=”#”> 电话机</a></li>
</ul>
<h6><a href=”#”>厨房电器</a></h6>
<ul>
<li> <a href=”#”>榨汁机</a> <a href=”#”>电压力锅</a> <a href=”#”>电饭煲</a></li>
<li> <a href=”#”>豆浆机</a> <a href=”#”>微波炉</a> <a href=”#”> 电磁炉</a></li>
</ul>
<h6><a href=”#”>五金家装</a></h6>
<ul>
<li> <a href=”#”>淋浴/水槽</a> <a href=”#”>电动工具</a> <a href=”#”>手动工具</a></li>
<li> <a href=”#”>仪器仪表 </a> <a href=”#”>浴霸/排气 </a> <a href=”#”> 灯具</a></li>
</ul>
</div>
</div>
</body>
</html>
li{
/* 去圆点 */
list-style: none;
}
/* 分类页面总宽度 */
.container{
width: 500px;
}
a{
/* 去超链接下划线 */
text-decoration: none;
}
/* 大标题字体 */
.container>h2{
font-size: 18px;
color: white;
font-weight: bolder;
line-height: 50px;
text-indent: 2px;
/*从上到下，0%开始颜色。50%颜色。70%颜色 */
background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);
}
css代码：
/* 所有电器分类内容 */
.type{
/* 首行缩进 */
text-indent: 4.5em;
/* 左外边距40px */
margin-left: 40px;
}
/* 电器分类 */
.type>h6{
font-size: 14px;
font-weight: bolder;
line-height: 30px;
background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);
}
/* 电器分类中的A标签 */
.type>h6>a{
color:#0467ac;
}
/* 电器分类中的A标签鼠标悬浮效果 */
.type>h6>a:hover{
text-decoration: underline;
}
/* 分类内容字体 */
.type>ul>li{
font-size: 12px;
line-height: 26px;
}
/* 分类内容字体里面的A标签 */
.type>ul>li>a{
color: #969696;
}
/* 分类内容字体里面的A标签悬浮效果 */
.type>ul>li>a:hover{
color: #804000;
text-decoration: underline;
}
4、效果图链接：
file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html