CSS 背景、选择器、盒子模型

CSS背景

CSS 背景属性用于定义 HTML 元素的背景。

CSS 属性定义背景效果：

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色。

页面的背景颜色使用在 body 的选择器中:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color:#b0c4de;
			}
		</style>
	</head>
	<body>
		<P>这是一个段落</P>
	</body>
</html>

CSS 中，颜色值通常以以下方式定义:

- 十六进制 - 如："#ff0000"

- RGB - 如："rgb(255,0,0)"

- 颜色名称 - 如："red"

以下实例中, h1, p, 和 div元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

提示：你可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。

提示：background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

页面背景图片设置实例:

body {background-image:url('paper.gif');}

设置定位与不平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;}

提示：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。

如果只有一个关键字，则会默认另一个关键字为 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p        

{background-image:url('img_tree.png');        

background-repeat:no-repeat;            

background-position:top;}

等价关键字

百分数值

百分数值的表现方式更为复杂。

body

{background-image:url('img_tree.png');  

background-repeat:no-repeat;    

background-position:50% 50%;}

这会导致图像适当放置，其中心与其元素的中心对齐。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body      

{background-image:url('img_tree.png');   

background-repeat:no-repeat;   

background-position:66% 33%;}

长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

body

{background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:50px 100px;}

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。

背景属性

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height:3000px;
				/* background: #00ff00 url('smiley.gif') no-repeat fixed center; */
				/* background:#FF00FF url('./imgs/1.jpg') no-repeat fixed center; */
				/* background-color:#f0f; */
				background-image: url('./imgs/1.jpg');
				background-repeat:no-repeat;
				/* background-attachment: fixed; */
				background-position: center;
			}
			
			.text{
				color:red;
				/* direction: rtl; */
				line-height: 28px;
				text-align: center;
				text-shadow: 0.5px 0.5px grey;
				font-size:20px;
			}
			
			.font{
				font-family: 宋体;
				font-size:12px;
				font-style:italic;
			}
			
			/* 未点击时的状态，鼠标移上的状态，被点击时的效果，被点击之后的效果 */
			a:link{
				color:yellow;
				text-decoration: none;
			}
			
			a:visited{
				color:pink;
			}
			
			a:hover{
				color:red;
			}
			
			a:active{
				color:green;
			}
		</style>
	</head>
	<body>
		<!-- <div></div> -->
		<p class="text">JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。</p>
		<p class="font">JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。</p>
		<!-- 当一个元素想运用多个效果时，可以叠加样式表 -->
		<!-- 当样式表中的样式出现重复定义/冲突，与定义的顺序有关，后定义的生效 -->
		<p class="font text">JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。</p>
		
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.jd.com">京东</a>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
	<div></div>
</html>

CSS选择器

id 和 class 选择器

如果你要在 HTML 元素中设置 CSS 样式，你需要在元素中设置 "id" 和 "class" 选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。

以下的样式规则应用于元素属性 id = "para1":

#para1
{ text-align:center;
color:red; }

ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。

ID 属性只能在每个 HTML 文档中出现一次。

class 类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."号显示：

所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

标签选择器

除了提到的 id 和 class 选择器外，第三种选择器为标签选择器，即以 HTML 标签作为 CSS 修饰所用的选择器。

<style>

h3{color:red;}

</style>

<h1>标题1</h1>

内联选择器

第四种内联选择器即直接在标签内部写 CSS 代码。

这四种 CS 选择器有修饰上的优先级，即：

内联选择器 > id选择器 > 类选择器 > 标签选择器

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* id选择器（唯一元素） */
			#top{
				height:50px;
				background-color:paleturquoise;
			}
			/* class选择器（1组元素/1个元素） */
			.cover{
				width:50px;
				height:50px;
				background-color:pink;
				float:left;
			}
			/* 标签选择器 */
			h1 {
				color:red;
			}
		</style>
	</head>
	<body>
		<h1>标题1</h1>
		<h1>标题1</h1>
		<h1>标题1</h1>
		<div id="top"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
		<div class="cover"></div>
	</body>
</html>

CSS盒子模型

CSS Box Model (盒子模型)

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型 (Box Model)：

不同部分的说明：

1、Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明

2、Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

3、Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

4、Content（内容） - 盒子的内容，显示文本和图像

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

提示：在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

width:250px;        

padding:10px;        

border:5px solid gray;        

margin:10px;

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持填充的宽度和边框的宽度属性设。

解决 IE8 及更早版本不兼容问题可以在 HTML 页面声明 <!DOCTYPE html>即可。

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: aquamarine;
			}
			div{
				height: 50px;
				background-color: hotpink;
				border-style: dotted;
				border-width: 5px;
				border-color: blue;
				/* padding/margin 上右下左 */
				/* padding:10px 5px 10px 5px; */
				padding-top:10px;
				padding-right:5px;
				margin-top:10px;
				margin-left: 5px;
				/* margin: 10px; */
			}
		</style>
	</head>
	<body>
		<div>
			<P>这是一个段落</P>
		</div>
		<div>
			<P>这是一个段落</P>
		</div>
	</body>
</html>