CSS入门——第二章

6 背景属性
背景颜色:background-color
背景图片:background-image
背景平铺:background-repeat
背景位置:background-postition
背景附着:background-attachment

7 css三大特性
层叠性：相同的选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式
原则：样式冲突，就近原则进行执行（覆盖）；

继承性：子标签会继承父标签中的某些样式，如文本的颜色和字号
子元素可以继承父元素的样式：text-、font-、line-开头的样式及color属性

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

优先级：当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性；
• 选择器不同，根据选择器权重执行；
• 继承或* -> 元素选择器 -> 类选择器/伪类选择器 -> ID选择器 -> 行内样式style=""
• 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，

他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

8 盒子模型

在网页中，元素可以产生一个矩形的框，这些框会影响元素之间的距离、元素内容的距离等，就像小时候做板报，从多张报纸剪取所需的内容块，再重新排列组成一张新的板报。同样，网页设计的时候也将这些框重新进行排列，达到我们所需要的网页效果。

举个例子：假如我们要寄两套杯子，为了防碎，我们分别在杯子的外层包裹上一层泡沫，然后把包裹泡沫的杯子分别放在两个盒子里，同时再把这两个盒子放进一个大盒子里面，把它寄出。
这里所说的杯子，就是我们网页设计中所说的内容。内容通常用高度和宽度来表示；而包裹的泡沫在网页中称为内边距或填充，用padding来表示；盒子厚度则对应网页中的边框，用border来表示；这两套杯子之间的距离在网页中的盒子模型里使用外边距，也就是margin来表示。

• 内容：宽度:width,高度:height

• 边框： border-width（边框宽度）：thin | medium | thick | 长度值
  border-color（边框颜色）：颜色 | transparent（透明）
  border-style（边框样式）：

• 内边距：padding-left：长度值 | 百分比
  padding-right：长度值 | 百分比
  padding-top：长度值 | 百分比
  padding-bottom：长度值 | 百分比

• 外边距：margin-left：长度值 | 百分比 | auto
  margin-right：长度值 | 百分比 | auto
  margin-top：长度值 | 百分比 | auto
  margin-bottom：长度值 | 百分比 | auto

9 圆角边框、盒子阴影

在CSS3中的圆角边框，这里需要考虑兼容性的问题

border-radius: 像素或者百分比;（盒子为正方形时：一半像素或者50% 时成为一个标准的圆
    border-radius: 左上 右上 右下 左下; -—— 给定四个值时，可以控制四个角的圆形程度不同
    border-radius: 左上右下 右上左下; （即对角线） —— 只给定两个值时
    border-radius: 左上 右上和左下 右下 —— 给定三个值时
    如果想实现椭圆的效果：border-radius: 水平方向的半径 / 垂直方向的半径 —— 使用 / ，长方形变为椭圆，水平方向的半径为长方形宽度的一半，垂直方向的半径是长方形高度的一半
    如果想单独为某一个角设置圆角：
        border-top-left-radius：设置左上角
        border-top-right-radius：设置右上角
        border-bottom-left-radius：设置左下角
        border-bottom-right-radius：设置右下角
    如果想设置四个角的不同方向上的不同圆角值
        border-radius: 左上的水平 右上的水平 右下的水平 左下的水平 / 左上的垂直 右上的垂直 右下的垂直 左下的垂直

div
{
margin-top:100px;
margin-left:100px;
width:300px;
height:100px;
background-color:red;
 
box-shadow:20px 0px 30px 10px #abcdef  inset;/zz/
/*这6个值分别是：left值 、top值、透明度、阴影外延宽度、颜色、向里凹陷（选填，默认为外延）*/
}