CSS的简介：

层叠样式表(级联样式表)，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的作用：

1、html虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。 2、html进行网页书写重复代码比较多，后期的维护性不好。引入css来解决类似问题。

Css的四种引入方式

1、内联式

2、内嵌式

3、连接式

4、导入式

注：css引入方式的原则，就近原则。样式跟随最近的控制标签。

CSS中的选择器

1、通用选择器（代表所有元素） 2、元素选择器（指定某个具体元素div…） 3、ID选择器（#id的名称 id的名称保证唯一） 4、类选择器（.类名，可以指定多个相同的div） 优先级：ID>类选择器>元素选择器>通用选择器 5、后代选择器（div span：只要在父标签里即可） 6、子类选择器（div）span：只会改变直系子标签） 7、兄弟选择器（#兄弟选择器名称+P：只会改变下面相邻元素对象）（*#兄弟选择器名称~P：改变下面所有元素对象） 8、伪类选择器 a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} 控制超链接的颜色。a:hover鼠标移至链接可选择的颜色

CSS的常用属性

1、字体：

	  /*字体的颜色*/
		color: gray;
		/*字体的大小*/
		font-size: 12px;
		/*字体的加粗*/
		/*font-weight: bold;*/
		/*字体的风格*/
	    /*font-family: 宋体;*/
		/*字体倾斜*/
		/*font-style: italic;*/

2、文本

         /*下划线展示*/
			text-decoration: underline;
           /*去除下划线*/
			text-decoration: none;
           /*文本居中*/
			text-align: center;

3、行高

  line-height: 40px;

4、背景 /设置背景图片此处是网络路径，引用网络上面的图片/ background-image: url(“http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg”);

			/*设置背景图片不重复*/
			
			background-repeat: no-repeat;
			
			/*调整背景图片的位置   X   Y*/
			background-position: center;
			
			/*调整背景图片的大小   宽  高  */
			/*background-size: 300px  500px;*/
			/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
			background-color: rgba(255,0,0,.5);

5、行内元素：（多个标签位于同一行）

 span  font  小标签   img  a  等

6、块元素：（标签可以自动换行的元素是块元素）

   div   h1-h6  ul    p    等

7、border 属性有三个修饰属性

border-color border-color:red; border-top-color:blue; border-width border-width: 1px; border-left-width: 3px; border-style border-style: solid border-bottom-style: solid；可以使用border统一设置 border: 1px solid red; border-right: 5px dotted blue;

8、display元素的使用

  行内元素转块级元素(可为其设置宽、高等属性)
    display: block;

	行内、块级元素内元素的隐藏（例：div、a标签里的内容或元素）
	display:none；

	将内联元素转换为行内元素。不换行（例：将两个p标签的内容合并）
    display:inline
	
	将元素变为行内块级元素显示，在同一行显示，且能设置宽和高：
	display:inline-black;

9、其他样式

调整透明度的属性  0-1 
opacity: 0.4; 



超出隐藏  hidden
overflow: hidden;

CSS 中的定位

绝对定位:

absolute :定位离开之后释放的之前的位置基于外层父级标签来说

相对定位：

relative: 定位离开之后之前的位置没有释放基于之前的位置来说

固定定位：

fixed ：始终是基于浏览器的左上角定位适合做广告

默认定位：

static ：初始的定位的操作

CSS3简介

CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。 W3C 仍然在对 CSS3 规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。

CSS3 中新增选择器

/获得class名称是div1下面的第一个子元素/

.div1>p:first-child{ 
    color: red; 
} 



  div1>p:last-child{ 
   color: green; 
   }

/获得具体的某一个子元素/

   .div1>p:nth-child(2){ 
     background-color: palegreen; 
     } 
   .div1>p:nth-child(even){ 
     background-color: red; 
    } 
    div1>p:nth-child(odd){ 
   background-color: green; 
    }

/获得空的元素对象/

.div1>p:empty{ 
        
       height: 50px; 
       background-color: darkmagenta; 
}

/获得焦点执行的样式/

   input:focus{ 
     width: 300px; 
     height:100px; 
    } 
   input:checked{ 
    width: 20px; 
    height: 20px; 
}

伪对象选择器是在指定的对象之前（或者之后）插入内容

 .div1:before{ 
   /*content: "我们的祖国是花园";*/ 
    content: url(img/1.jpg); 
} 
.div1:after{}

CSS3新增属性选择器介绍

/*属性选择器*/ 
   input[type='text']{ 
    width: 300px; 
    height: 40px; 
 
   } 

/*属性 ^用fom开头的对象   $*/ 
   input[name^='fom']{ 
	width: 300px; 
    height: 40px; 
   }

选择器的种类总结：

【1】基础选择器 * id class 标签【2】关系选择器 > + ~ 【3】伪类选择器 hover 【4】伪对象选择器 before 、after 【5】属性选择器 input[type=‘text’]

CSS3中常用的属性

倒圆角指令

		border-radius: 100px;
		/* 左上右下   右上左下 */
		/*border-radius:10px  60px;*/
		
		/*border-radius:10px 20px 30px 40px;*/

  
旋转角度
		transform: rotate(45deg);
		/*放大的倍数*/
		/*transform: scale(1.3);*/
		/* X:水平的位移   Y  ：垂直的位移  负数：上*/
	    /*transform: translate(0px,-5px);*/
	    /*2D角度的旋转  X  Y*/
	     transform: skew(40deg,45deg);

阴影水平方向的偏移垂直方向的偏移模糊度阴影的颜色

 box-shadow: 0px 0px 70px #D5093C;

CSS3中的动画标签

不同浏览器支持不同的动画引入方式，以具体情况而定

@keyframes myfirst/*绝大部分可以*/
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

仅本人整理的部分知识点，不够全面，如果想要了解更多，请转至 http://www.w3school.com.cn/css3/index.asp

CSS、CSS3知识点清单