1、为什么要美化网页

span标签：

2、字体样式

（1）选择字体 font-family

（2）font-size 字体大小

（3）font-weight 字体粗细

（4）color 字体颜色

连着写

扩展：

3、文本样式

（1）颜色 color rgb rgba

（2）文本对齐方式 text-align: center

（3）首行缩进 text-indent: 2em

（4）行高 line-height: 300px

（5）装饰 text-decoration

（6）文本图片水平对齐 vertical-align: middle （a标签是有下划线的，如果要去除下划线）

4、文本阴影和超链接伪类

（1）默认颜色

（2）鼠标悬浮的颜色状态（只需要记住：hover）

（3）鼠标按住未释放的状态

（4）text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径

5、列表样式

建议：

6、背景

实现箭头效果：

7、渐变

1、为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提供用户的体验

span标签：

重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#title1 {font-size: 50px;}</style></head>
<body>
欢迎来到我的 <span id="title1">java世界</span>
</body>
</html>

输出结果：

2、字体样式

font-family 字体
font-size 字体大小
font-weight 字体粗细
color 字体颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*font-family 字体font-size 字体大小font-weight 字体粗细color 字体颜色*/body {font-family: "Arial Black", 华文楷体;color: #4036bb;}h1 {font-size: 50px;}.p1 {font-weight: bold;}</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p><p>Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Orbends with the remover to remove:
</p></body>
</html>

输出结果：

（1）选择字体 font-family

        body {font-family: "Arial Black", 华文楷体;}

输出结果：

（2）font-size 字体大小

        h1 {font-size: 50px;}

（3）font-weight 字体粗细

        .p1 {font-weight: bold;}

（4）color 字体颜色

        body {color: #4036bb;}

连着写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    字体风格--><style>p {font: oblique bolder 16px "楷体";}</style></head>
<body><p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p></body>
</html>

输出结果：

扩展：

px 和 em 都是⻓度单位，区别是， px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承⽗级元素的字体大小。
浏览器的默认字体⾼都是 16px 。
未经调整的浏览器都符合: 1em=16px 。那么 12px=0.75em , 10px=0.625em 。

3、文本样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色：单词RGB 0~FRGBA A:0~1text-align: 排版pm：这个是像素em：这个是字符text-indent: 2em;首行缩进两个字符height: 300px;  这个是外面边框的高度line-height: 300px; 这个是里面行高的高度行高和块的高度一致，就可以上下居中--><style>h1 {color: #517851;/*文本居中*/text-align: center;}.p1 {/*首行缩进2个字符*/text-indent: 2em;}.p3 {background: #517851;height: 300px;line-height: 300px;}/*    下划线*/.a1 {text-decoration: underline;}/*    中划线*/.a2 {text-decoration: line-through;}/*    上划线*/.a3 {text-decoration: overline;}</style></head>
<body><p class="a1">123456</p>
<p class="a2">123456</p>
<p class="a3">123456</p><h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p><p class="p3">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Orbends with the remover to remove:
</p></body>
</html>

输出结果：

（1）颜色 color rgb rgba

（2）文本对齐方式 text-align: center

        h1 {color: #517851;/*文本居中*/text-align: center;}

（3）首行缩进 text-indent: 2em

        .p1 {/*首行缩进2个字符*/text-indent: 2em;}

（4）行高 line-height: 300px

height: 300px; 这个是外面边框的高度
line-height: 300px; 这个是里面行高的高度

        .p3 {background: #517851;height: 300px;line-height: 300px;}

（5）装饰 text-decoration

        /*    下划线*/.a1 {text-decoration: underline;}/*    中划线*/.a2 {text-decoration: line-through;}/*    上划线*/.a3 {text-decoration: overline;}

（6）文本图片水平对齐 vertical-align: middle （a标签是有下划线的，如果要去除下划线）

        img, span {vertical-align: middle;}/* 超链接去下划线   */a {text-decoration: none;}

没去之前

去掉之后

4、文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*默认颜色*/a {text-decoration: none;color: #000000;}/*    鼠标悬浮的颜色状态（只需要记住：hover）*/a:hover {color: #4036bb;font-size: 50px;}/*    鼠标按住未释放的状态*/a:active {color: #a12727;}a:visited {color: #7570aa;}/*   text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/#price {text-shadow: #a12727 10px 10px 2px;}</style></head>
<body><a href="#"><img src="images/0918.png" alt="">
</a>
<p><a href="#">电影电视剧，值得观看</a>
</p><p><a href="">作者：xxxxx</a>
</p><p id="price">￥999
</p></body>
</html>

输出结果：

（1）默认颜色

        /*默认颜色*/a {text-decoration: none;color: #000000;}

（2）鼠标悬浮的颜色状态（只需要记住：hover）

        /*    鼠标悬浮的颜色状态（只需要记住：hover）*/a:hover {color: #4036bb;font-size: 50px;}

（3）鼠标按住未释放的状态

        /*    鼠标按住未释放的状态*/a:active {color: #a12727;}

（4）text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径

        /*   text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/#price {text-shadow: #a12727 10px 10px 2px;}

5、列表样式

原来列表样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title>
<!--    &lt;!&ndash;   链接过来&ndash;&gt;-->
<!--    <link href="css/style.css" rel="stylesheet" type="text/css"/>-->
</head>
<body><h2 class="title">全部商品分类</h2>
<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></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><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></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li>
</ul>
</body>
</html>

需要链接css

<!--   链接过来-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>

记得加入div

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><!--   链接过来--><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><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></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><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></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li></ul></div></body>
</html>

style.css：

#nav {width: 362px;background: #a49de0;
}/*设置标题*/
/*给标题做样式*/
.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: #2071c7;
}/*ul {*/
/*    background: #a49de0;*/
/*}*//*ul li*/
/*把原点去掉*/
ul li {/*行高*/height: 30px;/*list-style:none 去掉原点circle 空心圆decimal 数字square 正方形*/list-style: none;/*    缩进*/text-indent: 1em;
}a {text-decoration: none;font-size: 14px;color: #000000;
}a:hover {color: orange;/*下划线*/text-decoration: underline;
}

输出效果：

建议：

可以尝试在web页面中去调整距离大小

6、背景

（1）背景颜色 background

（2）背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/0918.png")/*    默认是平铺的*/}/*水平平铺*/.div1 {background-repeat: repeat-x;}/*垂直平铺*/.div2 {background-repeat: repeat-y;}/*不平铺*/.div3 {background-repeat: no-repeat;}</style></head>
<body><div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div></body>
</html>

全部平铺：

            background-image: url("images/0918.png")/*    默认是平铺的*/

水平平铺：

        /*水平平铺*/.div1 {background-repeat: repeat-x;}

垂直平铺：

        /*垂直平铺*/.div2 {background-repeat: repeat-y;}

只取一个：

        /*不平铺*/.div3 {background-repeat: no-repeat;}

实现箭头效果：

导入图片

index.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><!--   链接过来--><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><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></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><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></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li></ul></div></body>
</html>

style.css：

#nav {width: 362px;background: #a49de0;
}/*设置标题*/
/*给标题做样式*/
.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;/*颜色，图片，图片位置，平铺方式*/background: red url(../images/2.png) 326px 9px no-repeat;
}/*ul {*/
/*    background: #a49de0;*/
/*}*//*ul li*/
/*把原点去掉*/
ul li {/*行高*/height: 30px;/*list-style:none 去掉原点circle 空心圆decimal 数字square 正方形*/list-style: none;/*    缩进*/text-indent: 1em;background-image: url(../images/1.png);background-repeat: no-repeat;background-position: 282px -5px;
}a {text-decoration: none;font-size: 14px;color: #000000;
}a:hover {color: orange;/*下划线*/text-decoration: underline;
}

输出效果：

在里面调节箭头位置，在放回html中

调整下面的箭头：

7、渐变

渐变颜色网站Grabient

    <!--    径向渐变，圆形渐变--><style>body {background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);}</style>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    径向渐变，圆形渐变--><style>body {background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);}</style></head>
<body></body>
</html>