3.1、美化网页的作用
- 有效的传递页面信息
- 美化网页
- 凸显页面的主题
- 提高用户的体验
- 注：span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：#id名{}
*/
#demo{
font-size: 50px;
}
</style>
</head>
<body>
保持饥饿,<span id="demo">终生学习</span>
</body>
</html>
3.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family：字体
color：颜色
font-size：字体大小
font-weight:字体粗细
font:字体风格
-->
<style>
body{
font-family: "Arial Black", 楷体;
color: #CE4A50;
}
h1{
font-size: 50px;
font-weight: bold;
}
/*
类选择器：.类名{}
*/
.p1{
font:oblique bolder 16px "楷体";
}
</style>
</head>
<body>
<h1 id="">登高</h1>
<p>杜甫</p>
<p class="p1"> 风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
</p>
<p class="p1">万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</p>
</body>
</html>
3.3、文本样式
1、颜色 color rgb rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--颜色：color
单词：RGB：0~F
RGBA A：0~1
-->
<style>
h1{
color: rgba(148, 7, 16, 0.53);
}
</style>
</head>
<body>
<h1>登高</h1>
<p>杜甫</p>
<p> 风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
</p>
<p>
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</p>
</body>
</html>
2、文本对齐的方式 text-align=center
3、首行缩进 text-indent :2em
4、行高 line-height
5、装饰 line-decoration
6、文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--颜色：color
单词：RGB：0~F
RGBA A：0~1
text-align:排版 居中...
text-indent:首行缩进
height:块的高度
line-height：行高
行高和块的高度一致，就可以居中
text-decoration:下划线 underline：下划线 line-through：中划线 overline：上划线 none:去下划线
-->
<style>
h1{
color: rgba(148, 7, 16, 0.53);
text-align: center;
}
p{
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: #CE4A50;
height: 30px;
line-height: 30px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>登高</h1>
<p>杜甫</p>
<p class="p1">
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
</p>
<p class="p1">
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</p>
<p class="p2">
Endless falling trees,
endless Yangtze River rolling in
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--水平对齐 参照物 a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="../picture/舞者.jpg" height="375" width="500" alt="">
<span>舞动人生</span>
</p>
</body>
</html>
3.4、阴影
- text-shadow：阴影颜色，水平偏移（左负友正），垂直偏移（上负下正），阴影半径
3.5、超链接伪类
- 正常情况下：a a:hover{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 默认的颜色
-->
<style>
a{
text-decoration: none;
color: #CE4A50;
}
/*
a:hover:鼠标悬浮的状态
*/
a:hover{
color: red;
font-size: 40px;
}
/*
鼠标按住未释放的状态
*/
a:active{
color: #3d6694;
}
/*
阴影
*/
#date{
text-shadow: #CE4A50 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="../picture/舞者.jpg" height="375" width="500" alt="">
</a>
<p>
<a href="#">舞动人生</a>
</p>
<p>
<a>舞者</a>
</p>
<p id="date">
date:2021/1/24
</p>
</body>
</html>
3.6、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>listStyle</title>
<link rel="stylesheet" href="../list.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="shop">商品分类</h2>
<ul>
<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></li>
</ul>
</div>
</body>
</html>
#nav{
width: 400px;
background: #132513;
}
.shop{
text-align: center;
color: #CE4A50;
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
height: 35px;
background: red url("../CSS/picture/舞者.jpg") 1px 2px no-repeat;
}
ul{
background: #CE4A50;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 15px;
color: #304575;
}
a:hover{
color: #291219;
text-decoration: underline;
}
3.7、渐变
- 参考网站：Grabient