第九章颜色和背景

前言

　　CSS权威指南第九章颜色和背景，一开始看着标题感觉内容和知识自己平时都用过，并没有放在心上，但是就是害怕自己这种只以为是的态度，还是硬着头皮看完这张，多少还是挖了写以前不太了解的知识，太多普通的知识点遍算了。

一.前景色

什么是前景色？以前只听过背景色，前景色倒是没听过，也"没用过", 其实只是概念问题。前景色就是子文本颜色以及边框的颜色，任何元素都可以设置前景色和背景色。

　　一般来说，前景是元素的文本，不过前景还包括元素周围的边框。

通过color属性就可以设置元素的前景色，元素边框的颜色默认取值为文本颜色，想要设置边框的颜色，自然很容易的想到border-color。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>边框颜色默认为文本颜色</title>
		<style type="text/css">
			p{
				border-1px;
				border-style:solid;
				color:blue;
				200px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<p>what does the fox say?what does the fox say?</p>
	</body>
</html>

效果图：

这个例子很简单，贴出来是因为以前我总是觉得边框的颜色默认是黑色，其实不然，只是边框颜色默认取文本的颜色，而文本颜色默认为黑色，所以才会有这样的效果。

二.背景色

背景色一直以来用的比较多，但是之前都没有注意过背景色的范围。

元素的背景区包括前景之下直到边框外边界的所有空间；　　

这里就是指内容框及内边距的部分，自然是不包括外边距部分的。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>背景色范围</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			p{
				line-height:60px;
				400px;
				margin:60px auto;
			}
			span{
				color:blue;
				font-size:16px;
				padding:30px;
				background:red;
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<p>
			<span>what does the fox say? </span>
		</p>
		<script type="text/javascript" src="../jquery1.10.2.min.js"></script>
		<script type="text/javascript">
			console.log($("span").height()); //16
		</script>
	</body>
</html>