1.CSS背景颜色
我们可以使用background-color属性为元素设置背景色
这条规则把元素背景色设为灰色
p {background-color: gray;}
如果我们希望背景色从元素中的文本向外少有延生，只需要增加一些内边距
p {background-color: gray; padding: 40px;}
具体实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {background-color: gray;padding: 40px;}
</style>
</head>
<body>
<p>我是gray</p>
</body>
</html>2.CSS背景图片
(1)我们可以使用background-image属性来设置背景图片
body {background-image: url(myimage.png)}
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {background-image: url(accept.png);}
</style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>
(2)我们可以使用background-repeat属性对背景图像进行平铺
repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺
body {
background-image: url(myimage.png);
background-repeat: repeat-y
}
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {background-image: url(accept.png);background-repeat: repeat-x}
</style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>(3)背景定位
我们可以利用background-position属性来改变图像在背景中的位置
下面例子在body元素中将一个背景图像居中放置
body｛
background-image: url(myimage.png);
background-repeat:no-repeat;
background-position:center;
｝
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {background-image: url(accept.png);background-repeat: no-repeat;background-position: center}
</style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>
3.CSS文本
(1)我们可以通过文本的text-indent属性来实现文本的缩进
p {text-indent: 5em;}
上述值还可以是百分比
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p {text-indent: 5em}
</style>
</head>
<body>
<p>我有缩进</p>
</body>
</html>
(2)我们可以用text-align来控制文本的位置
p {text-align: center}
具体实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p {text-align: center}
</style>
</head>
<body>
<p>我的位置</p>
</body>
</html>
(3)装饰文本可以使用text-decoration属性
none
underline
overline
line-through
具体实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p {text-decoration: line-through}
</style>
</head>
<body>
<p>我会闪烁</p>
</body>
</html>4.CSS链接
链接对应４种状态，我们可以为它不同的状态设置不同的样式
４种状态如下
a:link - 普通的，未被访问的链接
a:visited - 用户已经访问的链接
a:hover - 鼠标位于链接的上方
a:active - 正在被点击的链接
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #ooooFF;}
</style>
</head>
<body>
<a href="https://www.baidu.com">点我</a>
</body>
</html>
4.列表样式
(1)我们可以用属性list-style-type来修改列表项的标志类型
具体实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul {list-style-type: square}
</style>
</head>
<body>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>5.表格样式
我们可以使用border属性来控制表格边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table,th,td {border: 1px solid blue}
</style>
</head>
<body>
<table>
<th>
<td>101</td>
<td>102</td>
</th>
<th>
<td>103</td>
<td>104</td>
</th>
</table>
</body>
</html>