css学习之元素的高度、宽度、背景颜色、背景图片及位置（二）

1. 三种选择器优先级
   Id选择器（选一个）
   class选择器（选多个）
   元素选择器 （选一种元素）

2.尺寸：

 h1{
	 background-color: red;
	 /*元素的高度，可以设置固定长度 */
	 height: 500px;
	 /* 元素的高度，可以设置百分比 */
	 width: 60%;
	 
	 /*对于单行文本设置line-height=元素的height可以使其居中*/
	 line-height: 500px;
	 
 }

示例截图：

3.背景颜色的详细说明

 h1{	 
	 /* 三原色组成：红绿蓝 */
	 
	 /*可以使用英文单词*/
	 background-color: red;
	 /* 可以使用百分比 */
	 background-color: #602020;
	 /* 可以使用十六进制 0-9-a-f */
	 background-color: #0000FF;
	 /* 可以使用rgb,取值范围0-255 */
	 background-color: rgb(0,225,255);
	 /* 也可以使用rgba,范围0-255,最后一位为透明度，值为0~1*/
	 background-color: rgba(0,255,0,0.5);
 }

4.背景尺寸

 h1{	 
	 /* 三原色组成：红绿蓝 */
	 height: 1000px;
	 background-color: #0f0;
	 
	 /* 设置背景图片，若是背景图片太大，可以调整元素高度或者背景图片的大小 */
	 /*  */
	 background-image: url(img/1-1.jpg);
	 
	 /* 设置背景图片是否重复 ，默认是重复的，如下，两种写法*/
	 /* background-repeat: no-repeat no-repeat; */
	 background-repeat: no-repeat;
	 
	 /* 设置背景图片的位置 */
	 /* background-position: right bottom; */
	 background-position: left top;
	 
	 /* 设置背景图片是否固定 */
	 background-attachment: fixed;
	 
	 /* 可以将上面的组合起来 */
	background:  #0f0 url(img/1-1.jpg) no-repeat center scroll;
 }

结果示意图：

5. 背景图片的尺寸大小

 h1{	 
	height: 300px;
	background:  #0f0 url(img/1-1.jpg) no-repeat center scroll;
	
	/* 背景图片的大小，第一个表示宽度，第二个表示高度 ,以下有三种方案*/
	/* 百分比 */
	background-size: 10% 30%;
	/* 任意一个为auto，然后会自动根据图片百分比生成 */
	background-size: 50% auto;
	/* cover和contain,都会保持图片百分比，但是cover图片一般会超出去，contain会被包含在里面 */
	/* background-size: cover; */
	background-size: contain;
 }

示例截图：