三、美化网页元素
3-1、美化网页原因
有效传递页面信息
页面漂亮可吸引用户
凸显页面主体
提高用户体验
span标签：重点要突出的文字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title01{
font-size: 50px;
}
</style>
</head>
<body>
天水<span id="title01">姜伯约</span>
</body>
</html>
3-2、字体样式
<!--
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body{font: oblique bolder 16px "华文行楷";/*font-family: 华文行楷;*/color: crimson;}
h1{font-size: 50px;text-align: center;}.p1{font-weight: bold;}
</style>
3-3、文本样式
颜色：color，rgb，rgba
文本对齐方式：text-align = center
首行缩进：text-indent：2em；
行高：line-height（单行文字上下居中：line-height = height）
装饰：text-decoration
文本图片水平对齐：vertical-align：middle；
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0~F
RGBA A：0~1a
text-align: 排版，居中
text-indent: 2em; 段落首行缩进
line-height:行高，和块的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p4{
background: aqua;
height: 100px;
line-height: 20px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">12</p>
<p class="l2">34</p>
<p class="l3">56</p>
<h1>《滕王阁序》</h1>
<p class="p1">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p><p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</p><p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。</p><p class="p4">遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？</p>
</body>
</html>
3-4、阴影
/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#man{
text-shadow: aqua 10px 10px 2px;}
3-5、超链接伪类
正常情况下：a，a:hover
a{
text-decoration: none;
color: #030e0c;}
/*鼠标悬浮的颜色（只需要记住）*/
a:hover{
color: orange;
font-size: 50px;}
/*鼠标按住未释放的状态*/
a:active{
color: red;}
3-6、列表
/*ul li*//*
list-style:
none 去掉原点
circle 空心圆
decimal：数字
square：正方形
*/
ul{
background: darkgrey ;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3-7、背景
<!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/1.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>
3-8、渐变
background-color: #D9AFD9;
background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);
作者：姜伯約
