开始走进CSS世界
一. 认识CSS
1、CSS (Cascading Style Sheets) 层叠样式表
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
|
前缀 |
浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
2、CSS能做什么？
a. CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
b. CSS简化了前端开发工作人员的设计过程，更灵活的页面布局，更快的页面加载速度。
c. 可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。
d. CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。
e. 目的：将表现与结构分离。
3、CSS语法结构
CSS 语法由三部分构成：选择符、属性和值
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
Selector { Property : Value; }
↓ ↓ ↓
选择符 属性 值
例：
1 <style type="text/css"> 2 body { background-color:#cccccc;} 3 </style>
二、如何引入CSS
三种引入方式：
1.行内引用
行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。
注意这种方式的引入CSS，是不需要写选择器的。
例：
1 <body style="background-color:#ccccc;"> 2 <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1>
2. 页内引用
页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。
<head>
<style type="text/css">
body {
background-color:#cccccc;
}
</style>
</head>
3.外部样式表（常用的，体现分离思想）
外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独
放在一个外部文件中，再由网页进行调用。
如：
首先创建一个style.css 文件，里面编写：
body {
background-color:#cccccc;
}
然后在同一个目录下创建一个index.html文件，里面编写：
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
三、三种引入方式的优先级对比
优先级依次是：就近原则
行内引用> 页内引用> 页外引用
四、CSS代码注释
css 代码注释，以 /* 开始 */ 结束
如：
/*注释页面头部*/
/*body{background-color: #ccc}*/
/*标签*/
h1{color: blue;text-align:center;}
/*段落*/
p{font-size: 24px;text-indent: 2em; color: red;}
五、CSS的选择符
1.通配选择符 *
* 号表示所有的对象
所谓通配选择符，就是指可以使用模糊指定的方式来对对象进行选择，指定样式。
例：
*{
font-size: 20px;
font-family: "微软雅黑";
color:#000;
}
2.元素选择符
所谓元素选择符，指以网页中已有的标签名作为名称的选择符。
例：
body{background-color: #ccc}
h1{color: blue;text-align:center;}
p{font-size: 24px;text-indent: 2em; color: red;}
3.群组选择符
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。
例：
h1,p{
font-family: "微软雅黑";
font-size: 30px;
color:red;
}
使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。
六、4.关系选择符
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 a{
color: red;
font-size: 50px;
font-family:"微软雅黑";
text-decoration: none;
}
</style>
</head>
<body>
<h1>
<a href="#">我是h1中的a标签</a>
</h1>
<p>
<a href="#">我是p标签中a标签</a>
</p>
</body>
</html>
此例子中CSS样式只对h1标签中的a标签起作用。
