CSS概述
css：层叠样式表（Cascading Style Sheets），由于多个选择器的样式可以叠加在一起，所有叫层叠样式表，主要是用来美化界面。
css可放在页面head的<style></style>内、行内、外部css文件中
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>Document</title> 7 ????????<!-- 外链样式 --> 8 ????????<link rel="stylesheet" href="a.css" /> 9 ????????<!-- 页面css -->10 ????????<style>11 ????????????div{12 ????????????????color:#fff;13 ????????????????background:#333;14 ????????????}15 ????????</style>16 ????</head>17 18 ????<body>19 ????????<!-- 行内样式 -->20 ????????<div style="font-size:18px;text-align:center;">文字文字文字</div>21 ????</body>22 </html>也可用@import url()方式引入
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>Document</title> 7 ????????<style> 8 ????????????@import url("a.css"); 9 ????????</style>10 ????</head>11 12 ????<body>13 ????????<div>文字文字文字</div>14 ????</body>15 </html>link和import都是引入外部的css样式，其区别如下：
1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
4、ink支持使用Javascript控制DOM去改变样式；而@import不支持
5、a.css文件中可以用import导入b.css文件，但是link不用在css文件内部
CSS选择器
css选择器就是一个关联记号，方便我们操作。
常用选择器：ID选择器、class选择器、标签选择器、后代选择器、属性选择器、多元素选择器
1 <style> 2 /* id选择器 ?#id名{} */ 3 #app{ 4 ????height: 50px; 5 ????width: 50px; 6 } 7 ?8 /* class选择器 ?.class名 */ 9 .test{10 ????color: #333;11 ????text-align: center;12 }13 14 /* 标签选择器 ?标签名 */15 div{16 ????color: #fff;17 ????background: #333;18 }19 20 /* 后代选择器 ?*/21 #app div{ ???/* id为app元素内所有div，包括子子孙孙 */22 ????color: #fff;23 ????background: #333;24 }25 #app > div{ ???/* id为app元素内为儿子辈的div，只含儿子辈 */26 ????color: #fff;27 ????background: #333;28 }29 30 /* 属性选择器 */31 input[type]{ ???/* 带type属性的input元素 */32 ????padding: 5px;33 }34 35 /* 多元素选择器 ?选择器子间用英文逗号分隔 */36 div,p,#app,.test{37 ????font-size: 20px;38 }39 </style> ???选择器优先级（由高到低）：
1、!important 关键字优先级最高
2、行内css优先级
3、id选择器
4、类选择器
5、标签选择器
其他选择器：兄弟选择器（div + p、div ~ p）、伪类选择器（div:first-child、p:before等）
CSS3之选择器
原文地址：http://www.cnblogs.com/iyunpeng/p/7597398.html