继承
定义：一些运用在父元素的上的样式，他的子元素会同样呈现这些状态
继承可以简化样式表，比如你要给网页上的字设置字体，就可以给body上设置字体，因为所有标签都是body标签的子标签，所以他们都会继承body的属性
继承的局限性：
在什么时候是不会继承属性的
1：一般来说，影响网页元素的属性，或者边框间距，背景颜色之类的属性是不支持继承的。
2：每种浏览器对元素的初始设置都是不同的，所以在我们设计网页之前最好使用reset来重置样式。这样可以避免我们设计的样式在不同浏览器中显示的效果不同。
3：当有CSS冲突的时候，浏览器会实现更具体的样式，样式之间的冲突时很正常的，浏览器如何处理这些冲突的规则称为层叠。
样式如何层叠
通常在两种情况下会发生样式冲突
1：从多个祖先处继承了同一种属性的时候
2：一个或者多个样式运用在同一种元素身上的时候
（1）：如果是从多个祖先继承样式的时候，满足就近原则，离得近的祖先元素胜出
（2）:根据就近原则可以推论出一种理论：直接应用于指定标签的样式，就会先体现出这种样式
一个标签，多个样式
下面举例出多个样式应用于同一个元素身上的几种情况
1：同一个样式名称在样式表里出现了不止一次：（公用样式表，在我们看设计稿的时候可以进行分析，给相同样式的模块进行相同的样式的划分）
2：一个标签同时应用了类和ID样式。同时具有ID属性和class属性：而且都设置了样式
3：多个样式表中都包含了付给某一个网页的同一个样式名称
4：有些复杂的选择器瞄准了同一个标签：用派生选择器，子元素选择器，类选择器，ID选择器同时选择同一个元素标签的时候，这个时候元素呈现什么样的样式就是由权重来进行比较了。
用权重值来确定哪种胜出
1：一个标签选择器值1分
2：一个类选择器值10分
3：一个ID选择器值100分
4：一个内建样式值为1000分
注意
伪元素通常被当作标签选择器来对待，值1分
伪类则被当作类来对待，值10分
继承来的属性是不具有权值的，即使一个标签从一个带有很大权重值得样式中继承的样式，那些属性值也会始终会被直接应用的样式所忽略
当一个元素有两个属性的权重值相同时，还是遵循就近原则
在你搞不清某个元素的哪种样式的权重比较高的时候，可以点击审查元素，权重高的样式在上方显示，元素低的就会在下方显示。
忽略权重值：
css提供了一种完全忽略权重的方法，当你不想让某个元素的样式被替换掉的时候，可以使用！improtant，不管权值多大，只要在样式后面设置了这个样式之后，总会总是显示这个样式
控制层叠
简单的来说就是控制权重值来使你希望的样式实现在你希望的元素身上，如果你对算数感兴趣你完全可以用计算权重值得方法来控制重叠。
避免权重战争
现在在我们设置样式的时候最好避免使用ID选择器来设置样式
原因一：它的权重值太大了
原因二：如果我们要用另一个样式来取代它要编写出更复杂的样式才能将它覆盖
文本格式化：
一般你要设置字体显示的时候，必须保证你的电脑上具有该字体的样式。
使用WEB字体
常见的字体类型
EOT:只适合IE
True Type 和 Open Type：.tff字体或者.otf字体
.WOFF：安卓设备和IE8是无法下载和使用这个字体的
SVG：创建矢量图IE和Fire Fox都不支持这个字体
要确保字体的排列顺序应该是.eot,.woff,.tff,.svg。
使用@font-face指令：
@font-face{
font-fmaily:"字体名称"；
src:url（"地址名"）；
}
设置完这个熟悉之后就能在样式中使用这个字体了。
小贴士：
关于字体的一般CSS设置：
font-fmaily:字体设置
font-size：字体大小
font-width：字体的粗细
font-style：字体样式
给文本添加颜色：
color：属性
1：用英文字母来表示，color:red or color:blue。
2：用16进制的数来表示：color:#efefef：分别表示红 绿 蓝
3：用rgb颜色来表示，最常见的设置颜色的方法：rgb(，，，);可以用0~255或者0%~100%来表示
4：用rgba（）来表示；最后一个A是用来表示透明度的。
大多数浏览器是支持147种svg颜色（也称作X11颜色）感兴趣的可以去网上查找
HSL和HSLA
hsl是hue（色相）, saturation（饱和度）, lightness（亮度）,这是定义颜色的另一种方法，IE8之前的浏览器是不支持这种写法的
如何格式化词语和字母
斜体：font-style:itlic;
粗体：font-bold;
设置大写：text-transform:uppercase;
小型大写字母：font-variant：small-caps；在标题和说明的地方设置小型大写字母，会使网页有一种古老，迂腐的庄严感。
文本的修饰：text-decroation属性
给文本加修饰线：underline、overline、line-through、blink
字母间距和字体间距：
letter-spacing字母之间的间距
word-spacing扩大字词之间的间距
给文本添加属性阴影
text-shadow:属性需要添加四个值：水平方向上的偏移量，垂直方向的偏移量，阴影的模糊程度，阴影的颜色。
可以添加多个阴影，设计更加复杂的阴影颜色。不同阴影之间用逗号隔开；IE9之前的浏览器是不支持它的
格式化段落
调整行间距：
line-height：可以用四种方式来设置这个属性
百分比，像素值，相对值，还有一种其他的度量方式，即用一个数字
对齐文字：
text-align:center(left,right,justifu)居中，居左，居右，最后一种需要你去进行调试
首行缩进：
text-indent
如何给列表定义样式
list-style-type:disc(实心圆),circle(空心圆),square(实心的方块)。
同时还有六种不同的数字类型可以选择
给项目符号和项目序号定位：
list-style-position:inside和outside(在框里面和框外面)
提示
在你利用padding-left来设置文本之间间距的时候，这种方法只有在list-style-positon属性设置为outside的时候才有效
图形项目符号
list-style-image:url();
来添加图片的项目符号。
这个属性虽然可以让图片作为项目的符号，但是不足的是，你完全不能设置它的位置
练习经验：
在我做页面设计练习的时候，我用了其他的方法来给列表设置图形后缀或者前缀
两种方法：
1：在字体很短的情况下比较好的方法；用背景图的方法来给li添加图片符号
一般用background设置背景之后，可以通过position-x和position-y来实现图片背景的定位
2：还有一种比较好的方法，就是使用伪类：after和：before来给li添加图片
理解盒模型：
自己的理解：
布局就像是有很多杂乱的东西，首先我们先将他们进行分类，放进不同的盒子里面，归类之后，我们就可以通过对盒子的设置，来控制他们在页面中的位置了。
盒子模型分为四个部分：
外边距：marign
边框：border
内边距：padding
内容区域：content
margin：盒子水平居中（margin:0 auto）
用来控制不同盒子之间的距离，有四个方向的设置：margin-top,margin-right,margin-bottom,margin-left.顺时针方向。
border：
设置盒子的边框：盒子具有四个方向上的边框：top 、right、bottom、left，可以根据你的需要来设置盒子的边框，当然你也可以不设置。
padding：
内边距：盒子里的内容距离边框的距离，同样也具有四个方向的值，可以更具自己的需要来设置
边距冲突
当你同时设置方向相反的两个margin时，它是不会求和的，不是20 30 相加，而是求最大的一个值
margin也可以设置负值，用来清除空格，详细效果可以自己去尝试一下
margin设置负值之后，你会发现两个盒子之间的距离会慢慢变小，甚至可以重叠。
CSS有两种不同的盒子类型，块级盒子（block box），还有行级盒子（inline box）他们分别对应两种不同和标签类型
块级元素会在其前后都产生空格，并且主动换行
注意，添加padding和margin通常不会使行内元素变高，但是<img>标签是一个例外
有时候你会希望行内元素表现的像块级元素或者有的时候你希望块级元素表现的像行级元素，可以通过display属性来进行设置
设置为块级元素：display:inline
设置为行级元素：display:block
设置为行级的块级元素：display:inline-block
注意
如果你想设置行级元素的height和weight你要将行级元素的display属性：设置为block或者inline-block
添加边框：
border：快速设置 color颜色，width宽度，和style样式，
border的样式由很多种 solid实心 dashed虚线 。。。。。
取消边框的设置：border：none
边框也是可以单独设置的，一共有四条边框 top right bottom left
设置背景颜色
background-color：
创建圆角
border-radius：设置半径
设置的圆角是按照顺时针顺序来的，
注意：
IE8以及以前的版本不支持这个属性，ios的Safari和android Browser 2.1需要提供厂商的前缀 -webkit-
主流浏览器的前缀
webkit 用于chrom Safari以及其他基于webkit的浏览器
-moz-用于firefox浏览器
-0-用于opera浏览器
-ms-用于IE浏览器
添加阴影
box-shadow
分别设置4个值 X-set Y-set 阴影半径 和颜色。
设置内阴影可以加上inset属性
阴影值必须是像素或者em 不能用百分比
注意：
为了使阴影在每个浏览器中都可以实现的话就要加一条声明
-webkit-box-shadow：x y 阴影大小 颜色；
可以给一个box添加多个阴影，中间用逗号隔开就行
确定高度和宽度：
height 和 width
一般给横幅之类的设置高度是不会产生什么问题的
利用box-sizing属性调整盒子的宽度
css3提供了一个属性让你能改变浏览器计算的屏幕宽度（和高度的方法。）
box-sizing提供了三个选项
1：content-box 这是浏览你默认的值，浏览器会将border宽度和padding厚度与width和height属性值相加，来确定宽度。
2：padding-box：把padding和值已经包含在计算宽度里面了，如果设置padding为20px 设置的宽度是100px那么实际的内容宽度就只是60px
3：border-box：将padding和border的值都包含在了width和height中了，
如果你不喜欢浏览器计算宽度的设置，你就可以使用border-box来设置，为了确保box-sizing在所有浏览器中都能运用，需要做一下的声明
-moz-box-sizing：border-box；
-webkit-box-sizing：border-box；
使用border-box非常有利，他会自动调整到适应不同设备的尺寸。
注意
box-sizing属性甚至支持IE8以及其更新的版本，但是IE7会忽略这个属性。
overflow属性控制溢出文本
overflow有四个关键字来控制溢出盒子边沿的那部分内容该如何显示：
1:visible 这个是浏览器的默认值，一般
2:scroll 添加滚动条，不管内容有没有超出，只要你已设置这个属性滚动条就会自己显示出来
3:auto 要使滚动条变得可选，就使用auto 在需要的时候创建滚动条
4:hidden 影藏，超出的部分直接隐藏掉
高度和宽度的最大化和最小化
1：max-width 设置最大宽度的当你需要调整网页宽度以适应不同显示宽度，但有不想让它的宽度太大，就可以设置这个属性了
2：max-height 设置最大宽度
3：min-width 设置最小宽度
4：min-height 设置最小高度
用浮动元素包围内容
css规则：任何标签浮动，除了img标签以外，都要设置宽度。
注意：编写的源代码，HTML结构对浮动有着很大的影响
清除浮动和清除浮动的影响使用clearfix类
添加图片
制作相册，使用img标签，之后设置border 然后设置padding属性，让图片和边框之间留出一点空隙，就可以制作出来拍立得的效果。
添加背景图片
background-image：
加油站：
常见的图片格式：
.gif
.jpeg
.png 下载速度最快
png24和png32称作支持透明的png24
控制重复
background里面有一个属性是专门来控制重复的
background-repeat：
1:no-repeat不重复
2：repeat 重复 默认值
3:repeat-x 沿着x轴的方向重复
4:repeat-y 沿着y轴的方向重复
定位背景图片
background-position
关键字：left center right
精确值：
通过像素值来控制图片的位置
如何固定图片
background-attachment属性，它具有两个选项，fix和scroll
fixed：当拖动滚动条的时候，背景图片的位置是不会发生改变的
scroll：背景图片会和其他网页内容一起变化
定位背景图片的background-clip 和background-origin
background-origin属性调整图片的起点，他有三个选项
border-box：放在border区域的左上角
padding-box 放在padding区域的左上角 这是浏览器放置图片的默认值
center-box 放在内容区域的左上角
注意：这个属性在IE8里面是不适用的
background-clip是来控制背景图片显示区域的，一般来说背景图片会充满整个区域包阔border和padding区域
border-box：系统默认的方式，不用进行设置
padding-box：只显示在padding部分的图片
center-box：限制图片只显示内容区域
缩放背景
background-size：
关键字：
1：contain 迫使图片进行尺寸调整，以便保持图片的长宽比。根据图片的形状和元素，图片会进行伸展，以便适应元素的宽度或者高度
2：cover 通常会将图片进行挤压或拉伸，导致图片扭曲
注意：background-size是唯一一个能修改背景图片尺寸的方法，但是IE8并不支持这个属性
设置多个背景图片
background-image：url(),url(),...
多张背景图片重叠放置，就像图像编辑软件的图层一样，因此排列方式就决定了那张图片在上面
第九章的笔记还在整理，会和明天的内容一起发出