3.美化网页元素
3.1为什么要美化网页
1.有效的传递页面信息
2.美化网页，页面漂亮才能吸引用户
3.凸显页面的主题
4.提高用户的体验
span标签：重点要突出的字使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title">JAVA<span/>
</body>
</html>
3.2字体样式
<!--font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font:oblique bolder 22px "楷体";
}
</style>
</head>
<body>
<p>江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。</p>
</body>
</html>
3.3文本样式
1.颜色 color rgb/rgba
2.文本对齐方式 text-align center(居中)
3.首行缩进 text-indent: em;
4.行高line-height: px;单行文字上下居中line-height=height
5.装饰:
/下划线/ .L1{ text-decoration: underline; } /中划线/ .L2{ text-decoration: line-through; } /上划线/ .L3{ text-decoration: overline; }
/a标签去下划线/
a{
text-decoration:none;
}
6.文本图片水平对齐:vertical-align:middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<!--
颜色：
单词
RGB（红绿蓝）#000000黑#FFFFFF白
RGBA（透明度）
排版：text-align center(居中)
首行缩进：text-indent 单位：em，px
行高和块的高度一致时上下居中：
height: 300px;
line-height: 300px;
-->
<style>
h1{
color:rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: red;
height: 300px;
line-height: 300px;
}
/*下划线*/
.L1{
text-decoration: underline;
}
/*中划线*/
.L2{
text-decoration: line-through;
}
/*上划线*/
.L3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="L1">123123123</p>
<p class="L2">123123123</p>
<p class="L3">123123123</p>
<h1>介绍</h1>
<p class="p1">值得关注的是，未来10天</p>
<p class="p3">江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。</p>
</body>
</html>
3.4阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow:red 5px 5px 5px ;
}
3.5超链接伪类
/*鼠标悬浮的状态（重点）*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
/*已访问的链接*/
a:visited{
color: red;
}
3.6列表
/*ul li*/
/* list-style: none;
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: gold;
}
ul li{
height: 30px;
list-style:none;
text-indent: 1em;
}
3.7背景
背景颜色
背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("image/1.jpg");
/*默认是全部平铺的*/
}
.div1{
background-repeat: repeat-x ;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
3.8渐变
background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);标签：网页,color,text,height,decoration,CSS,background,font,美化 From： https://www.cnblogs.com/cyh822blogs/p/16651129.html