### 样式表的三种书写位置
#### 内联
```
<head>
<meta charset="UTF-8">
<title>what</title>
<style type="text/css">
选择器
</style>
</head>
```
样式作用于当前页面，没有实现结构和表现样式的分离
#### 外联(用的最多)
```
<head>
<meta charset="UTF-8">
<title>what</title>
<link rel="stylesheet" href="">
</head>
```
使用一个.css的文件直接存放选择器样式，在HTML文件中使用link标签调用
一个HTML可以调用多个css文件，一个css文件也可被多个页面调用
#### 行内样式表 (不推荐使用)
`<p style="color: pink;font-size: 16px">小仙女</p>`
### 选择器
1.什么是选择器呢？
简单来说就是选择对那些标签进行样式的调整和操作
2.写法：选择器{属性：值；属性：值} 可以同时定义一个或者多个属性
3.常见的属性
width：20px 宽 height：20px 高
background-color：red 背景颜色
font-size：24px 字体大小 font-family：微软雅黑 字体
font-style：italic（斜体） 字体风格
texy-indent:2em 首行缩进
#### 基础选择器
标签选择器：这个标签的样式全被定义
标签{属性：值}
类选择器：谁用了这个类名，谁就用这个选择器里面的样式
.类名{属性：值}
`.box{color:red;} `选择器写法
`<p class="box">我是红色的字</p>\`标签的写法
同一个类可以被多个标签调用
同一个标签页可以调用多个类`<div class="box miss‘‘>`类名之间用空格隔开即可
类选择器的命名规则：
1.不能以纯数字或者数字开头
2.不能使用特殊字符，不过_可以被使用
3.不建议使用汉字命名，虽然不会报错
4.不建议用属性或者属性值来命名
ID选择器：谁调用此ID谁生效，但是ID具有唯一性，在一个页面只能调用一次
\#id名称{属性：值;}
`#box{font-size=16px;}`选择器写法
`<p id="box">我是16px的字</p>`标签的写法
一个标签可以同时调用一个id选择器和一个类选择器，中间用空格隔开，ID和class名可以相同，不冲突`<p id="box" class="box">我有双特效</p>
通配符标签：对所有标签都起作用，但是不推荐使用，会增加浏览器的负担
*{属性：值;}
#### 复合选择器
由多个基础选择器通过不同的方式连接起来
交集选择器
标签+类(ID)选择器{属性：值;} `div#box{color:green;font-size:15px;}`
特点：被选择的对象既要买组使用了某个标签也要满足使用了某个类(ID)
后代选择器（很常用，重要）
选择器+空格+选择器+空格+选择器{属性:值;} `div p span{color:grey}`
特点:无限制隔代，只要是包含关系找的到都可以；各种类型的基础选择器可自由组合 `p span #box{color:yellow；}`
子代选择器（用的不多）
选择器>选择器>选择器{属性：值;} `div>p>span{color:pink；}`
特点：选中的是直接的下一代
并集选择器
用英文逗号将各种基础选择器链接起来并且全部生效`p,div{color:blue;}`
#### 文本属性
属性：
font-size:16px 文本大小 可用像素单位表示；
font-weight:700 粗细 取值范围100-900 ，当值等于700时等于bold加粗的效果；
color:red 字体的颜色
font-family：微软雅黑 字体 字体的表达方式有三种
1.直接写字体的中文名称
2.直接写字体的英文名称
3.Unicode编码
#### 文本属性的连写
font:font-style font-weight font-size font-family
```
p {
font: italic 700 16px 微软雅黑;
}
```
注意：font-size和font-family在连写里面是必写项目，其他的可不写，但是书写书序不能改变；
### 行快内元素的转换
块元素→行内元素
`diaplay:inline;`
行内元素→块元素
`display:block;`
块元素/行内元素→行内块元素
`display:inline-block;`这样子就可以在同一行显示又可以定义宽高了
### CSS的三大特性
#### 层叠性
当多个样子作用于同一类标签时样式发生冲突，那么听谁的呢？结果是总是执行后面的代码样式
#### 继承性
1.前提是标签之间是包含关系（嵌套关系）；
2.文字颜色、文字大小、文字字体、粗细、等文字属性都可以被从父类那里继承；
但是如果子标签有自己的属性定义，那么还是要听自己的，子标签的属性定义不会影响父标签，由此可以，继承的有限权重等于0；
3.行高也是可以继承的
4.特殊情况：h标签不能直接继承文字的大小、a标签不能继承字体的颜色；
#### 样式的优先级
默认样式<标签选择器<类选择器<ID选择器<行内选择器 <!important
注意：权重会叠加，低量级的选择器不管叠加了多少个也比不过高量级的选择器的权重
#### 链接伪类选择器
a:link{属性：值;} a{属性：值;} 超链接的默认状态；
a:visited{属性：值;} 超链接访问后的状态；
a:hover{属性：值;} 鼠标放在链接上时显示的样子；
a:action{属性：值;} 链接被点击时，鼠标不松开的样子；
我们都知道超链接自带下划线，那么怎么去掉呢？来看看这个属性 text-decoration
(文本装饰)
可选属性值：none (无下划线) ，underline（有下划线），line-through（删除线）
### 背景属性
1.background-color : pink 背景颜色
2.background-image: url("路径"); 背景图片
3.background-repeat:repeat(平铺 默认值) / no-repeat （不平铺，图片只出现一次) / repeat-X(沿水平方向平铺) / repeat-Y（沿竖直方向平铺）
4.background-position: right top 背景定位
方向值只写一个的时候，另一个默认是center；
写两个方位值的时候，顺序没有要求；
写两个具体值时，表示图像左上角的坐标开始的位置 `background-position:25px 30px;`表示从X轴25像素，Y轴30像素的位置开始显示图片；
5.background-attachment: scoll（默认,表示以盒子为定位滚动）/fixed（以浏览器为定位固定）；
#### 背景属性的连写
`background: red url("path") no-repeat botton fixed;`
如果要用连写属性，URL不能不写，其他属性都可以不写，属性值的顺序没有要求；
原文：http://www.cnblogs.com/chenhui-li/p/7260914.html