标签：
一 认识CSS
1 什么是CSS
层叠样式表（cascading style sheets）
一种用来美化网页的手段
2 CSS的作用
HTML 骨架，从语义的角度描述结构
CSS 衣服，从美化的角度修饰页面
JS 动作，从交互的角度让页面更加灵活
二 CSS语法
1 CSS的书写位置
<style>
/*写css代码的位置*/
<style>
写在head标签里的style标签里
2 CSS语法结构
选择器名称 {
属性名：属性值;
...
}
三 CSS基础选择器
1 标签选择器
语法结构：
标签名 {
属性名：属性值;
....
}
选择原理：
根据标签名选中并修饰对应的标签
特点：
选择范围：当前页面上所有的同名标签
2 类选择器
语法结构：
.+目标标签的class值 { 属性：属性值; ... }
选择原理：
根据标签的class的值找到并修饰这个标签
特点：
1 类名可以重复，class选择器可以修饰多个标签
2 一个标签可以有多个类名，一个标签可以被多个class选择器修饰
3 谁调用，谁改变
选择范围：
拥有相同类名的标签 开发当中使用最多
3 ID选择器
语法结构：
#+目标元素的id属性的值 {属性：属性值;...}
注意点：
id好比是标签的身份证，是不允许重复使用的
缺点：可重用性低
选择范围：
选择到id为选择器名称的标签
4 通配符选择器
语法结构：
* {属性：属性值;...}
选择原理：
选择所有的标签进行样式控制
注意：在工作当中不允许使用，因为效率很低
5 选择器的命名规范
1 可选取值范围：数字、字母、下划线 “_”、短横杠 “-”
2 不能以数字开头
3 不能以短横杠+数字
4 不能单独用短横杠
5 可以用中文，但是不建议用
6 推荐用有意义的单词来命名
四 CSS复合选择器
1 标签指定式选择器（交集选择器）
语法结构：
标签选择器+class或者id选择器 {属性：属性值;...}
选择原理：
选择既是标签选择器选中，又是class或者id选择器选中的标签
2 后代选择器
语法结构：
选择器1 + 空格 + 选择器2 + 空格 + ...{属性：值;}
选择原理：
先找到选择器1，找到选择器1下的符合选择器2的条件的后代元素
...
3 并集选择器
语法结构：
选择器1+逗号+选择器2+逗号+选择器3..... { 属性：值;}
选择原理：
只要满足任意一个选择器的选择条件，就可以被影响
五 文本相关的属性
1 text-align
作用：设置文本的对其方式
text-align：
left 让文本居左对齐
center 让文本居中对齐
right 让文本居右对齐
2 text-indent
作用：控制文本的首行缩进
单位长度：
text-indent: 数字+长度单位
em
相对长度单位，相对于字体来说，1em = 一个字体大小
3 font-style
作用：控制字体的样式
font-style:
normal 普通，正常
italic 斜体
oblique 也是斜体，是italic的备胎
4 font-size
作用：控制文本的字体大小
用法：font-size: 数字+长度单位;
5 color
5.1 作用
设置文本的前景色
5.2 颜色表示法
1 使用颜色的英文单词来赋值（color name）
color: red;
2 十六进制表示法
# 红色，红色，绿色，绿色，蓝色，蓝色
以#开头，前两位表示红色所占的比例，中间两位表示绿色所占的比例，后两位表示蓝色所占的比例
例如：#0c54a4
十六进制 满十六进一 0-9a-f
二进制 满二进一 0-1
十进制 满十进一 0-9
3 rgb()
第一种：rbg(0-255,0-255,0-255)
第二种：rgb(100%,100%,100%)
分别代表红，绿，蓝表示的比率
6 font-weight
作用：控制字体粗细
用法：font-weight：
normal 正常，不粗不细
bold 加粗
bolder 更粗，受限于字体
lighter 细体，受限于字体
number: 100-900
7 font-family
作用：控制文本的字体
font-family: “字体名称”;
注意：为了兼容，最好写英文，字体对应的英文
8 text-decoration
作用：文本的线条装饰
text-decoration:
none 没有修饰
underline 下划线
overline 上划线
line-throuth 贯穿线
blink 闪烁（已经没用了）
9 font连写
font: font-style font-weight font-size font-family;
特点：
font-style，font-weight 可以省略
font-style，font-weight 可以交换顺序
标签：
原文地址：http://www.cnblogs.com/pengzijun/p/5699769.html
