1.什么是CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”
2.CSS能做什么
- CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，文字阴影和盒阴影，过度、动画等。
- CSS简化了前端开发工作人员的设计过程，更灵活的页面布局，更快的页面加载速度。
- 可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。
- CSS可以支持多种设备，比如手机、PDA、打印机、电视机、游戏机等。
- 目的：将表现与结构分离。
简单来说就是，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
代码如下：
p{ font-size:20px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*/ }
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
3.CSS语法结构
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{ font-size:12px; color:red; }
4.如何引入CSS
三种方式引入：
4.1.内行引入：内行引入css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里的文字你觉得是不是红色呢？</p>
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">相信我，这里的文字是红色</p>
4.2.页面引入：就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下代码：
<style type="text/css"> p{ color:red; } </style>
4.3.外部样式表：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）
使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
style.css:
body{ background-color:red; }
index.html:
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
5.CSS优先级
5.1.样式的优先级：
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如下代码：
styel.css:
h1{ color:red; }
html代码：
<head> <!--内部样式--> <title>无标题</title> <style type="text/css"> h1{color: green;} </style> <!--外部样式 style.css--> <link rel="stylesheet" type="text/css" href="styel.css"> </head> <body> <h1>测试</h1> </body>
简单来说就是：就近原则
5.2.选择器优先权
解释：
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
6.CSS代码注释
css代码注释，以/*开始*/结束。如下代码：
/*公共样式*/ body{font-size:12px;color:red;} /*导航开始*/ #nav{... } /*导航结束*/
(未完待续...)