1.背景样式

1. background-color : 背景色

2. background-image : 背景图

   url(图片地址) 默认是x、y轴都平铺

3. background-repeat : 平铺方式

repeat (默认)
no-repeat
repeat-x
repeat-y

1. background-position : 背景图的位置

   x坐标 y坐标
   还可以写关键字： x轴 : left center right
   y轴 : top center bottom

1. background-attachment : 背景图随滚动条的移动方式

scroll 跟着滚动 (默认)
fixed 固定背景图
注：背景图以页面作为初始位置，根据页面的位置进行偏移。

多背景：在一个HTML元素上添加多个背景。
background : xxxx , yyyy , zzzz;
先写的操作层级要高

2. 复合样式

复合样式用来简化单一样式的，用一条样式实现多个单一样式的写法。
背景的复合样式：不分先后顺序的

注：要么都写单一样式，要么就是复合样式。复合样式和单一样式如果需要一起写，先写复合样式再写单一样式。

3. sublime快捷键

ctrl + shift + 上下键 : 快速移动一行
ctrl + 鼠标左键 : 多光标操作
ctrl + D : 快速选中相同的元素

4 .边框样式

border-left
border-right
border-top
border-bottom
值：边框大小 边框颜色 边框的样式
solid : 实线
dashed : 虚线
dotted : 点线
none : 取消边框
transparent : 透明
复合写法：
border : 1px red solid;

5. 文字样式

1. font-family : 定义字体类型

默认 : 微软雅黑 ( Microsoft yahei )
注：

1. 有空格的时候，需要添加引号
2. 显示一些特殊的字体样式，需要计算机支持的
3. 同样大小的字体，宋体会比雅黑大一点
4. 字体分为两大类：有衬线、无衬线

1. font-size :文字的大小

默认 : 16像素
注：一般网站都设置成偶数，12px 14px 16px
也可以用关键字：但是很少用

1. font-weight : 定义字体粗细

bold : 加粗
数值 : 500 以下(都是正常) 500以上(加粗)
注：只有正常和加粗两种选择，数值很少用
font-style: 定义文字样式
italic ：斜体
normal ：正常（默认）

复合用法：
font：样式/粗细 大小/行高 类型
注：跟背景和边框有区别，必须按照上述顺序写
font属性内必须有 font-size 和 font-family 这2项值。如果少了一项，即便将其他字体属性都写上也没用。
font-style,font-weight 可以交换位置
#box{font: bold italic 18px/40px “楷体”;}

1. color：定义字体颜色

6. 段落样式

1. text-decoration :定义文本装饰

overline 上划线
underline 下划线
line-through 删除线
none 取消装饰

1. text-transform :定义文本大小写

uppercase 所有字母都转成大写
lowercase 所有字母都转成小写
capitalize 针对首字母进行大写
none 取消转义（默认）

1. text-indent :定义文本首行缩进

单位: em 相对单位，相对当前字体大小 font-size
px 单位

1. text-aligh : 定义文本对齐方式

left 左对齐（默认）
right 右对齐
center 居中对齐
justify 两端对齐

1. line-height :定义行高

默认文字都是有行高的，根据字体大小，行高是不确定的
注：一行文字在容器中上下居中，让行高等于高度就可以
注：不写单位，表示当前元素的font-size的倍数

1. letter-spacing ：定义字间距

2. word-spacing : 定义词间距，专门针对英文的

3. world-break ：break-all 非常强烈的强制折行

4. word-wrap ： break-word 不是那么强烈的折行

7 . CSS选择器

1. tag（标签） 选择器

p{} li{} a{}

1. id 选择器(只能使用一次)

id-name{}

1. class选择器

   .class-name{}
   < class=”class-name” >
   可以重复使用，在一个标签上可以添加多个class，顺序是没有任何影响的，至于选择那个class样式，这个是样式的优先级决定的。

2. 群组（分组选择器）

   当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
   .top, #nav, p{width:100px;}

3. 包含选择器

选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2
ul li{}
div ul li{height:200px;}

  注：包含的选择器最好不要超过三层

1. 通配选择器

   *｛｝
   所有的标签（包括 html，head, body）
   注：不要轻易去使用通配符，会影响到其他标签

2. 伪类选择器

   通过正常的选择器添加不上的样式，就可以尝试用伪类选择器进行添加样式，实现一些特殊需求。

   :hover{} 鼠标移入添加相应的样式，可以针对所有的标签。

   :active{} 鼠标点击添加相应的样式，可以针对所有的标签。

   :link{} 未访问时相应的样式，只针对a标签

   :visited{} 访问过后相应的样式，只针对a标签

   注：网页中用的最多的组合只是如下：
   a{color:red;}
   a:hover{color:blue;}

当这4个超链接伪类选择符联合使用时，应注意他们的顺序，
正常顺序为： a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
顺序记忆：LoVe HAte

  浏览器清除缓存：ctrl+shift+delete 组合

8. CSS的继承

与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在网页上的布局相关的样式不会被继承。
在样式中 使用inherit这个特别设立的值可以强行继承，明确指示浏览器在该属性上使用父元素样式中的值。
border:inherit;
width:inherit;
background:inherit

a的color是可以继承的，但是自身的默认的优先级会高，所以覆盖了继承的color。

9. 样式的优先级

1. 相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

<style>
#box{ background : blue;} 
#box{ background : red;} 
<style/>
<div id="box">divdivdiv</div> 
/*   该背景色为红色  */

1. 内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
#box{ background:red;}
link rel=”stylesheet” href=”base.css”>

1. 单一样式优先级

    ....................................................................................................................<br />        |  style行间样式  >  id选择符 > class选择符 > tag(标签)选择符 > 默认继承 |<br />        ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

1. ! important

         非标准写法，带此属性的选择符优先级最高<br />              .box{color : yellow !Important;}

2. 标签+类 与 单类

标签+类 的优先级要大于 单类 的优先级。
p.box{ border:1px red solid;}
.box{ border:5px blue solid;}

1. 分组优先级

   分组选择符与单一选择符的优先级相同，靠后写的优先级高。
   div{ background:blue;}
   div,p{ background: red;}
   

   divdivdiv
   该div背景为red

2. 包含优先级

包含选择符的优先级相对比较复杂，可以利用“约分法”来比较包含选择符的优先级高低。“约分法”的做法是将 相同类型的选择符进行约分处理，
比如：id选择符跟id选择符进行约分，
class选择符与class选择符进行约分，
然后看最终约分后的结果来比较优先级高低