CSS-总结
------------------------------------css的四种引入方式----------------------------------------------------------------
------------------------常见块级标签(div,from,table,p,pre,h1-h5,dl,ol,ul)--------------------------------------------
------------------------常见的内联标签(span,a,strong,em,label,input,select,textarea,img,br)--------------------------
(1)行内式---------------------------在标记style属性中设定css样式。------不推荐使用
<p style="hello 悟空</p>
(2)嵌入式---------------------------嵌入式是将css样式集中写在<head></head>标签的<style></style>中。
<head>
<style>
p{ font-size: 15px;"> </style>
</head>
(3)链接式---------------------------将一个css文件引入到html文件中
<link href="css文件路径"rel="stylesheet"type="text/css">
(4)导入式---------------------------将一个独立的.css文件引入到HTML文件中，使用css规则引入外部css文件<style>
标记写在<head>中。
<style>
@import".css文件路径"
</style>
-------------------------------------css选择器（指明{}中“样式”的作用对象）---------------------------------------------------------------
(1):基础选择器
1:*------------------------------通用元素选择器，匹配任何元素
*{margin:0;padding:0;}
2:E------------------------------标签选择器，匹配所有使用E标签的元素
p{color:green;}
3:.info和E.info------------------匹配所有class属性中包含info的元素
.info{background:}
p.info{background:blue;}
(2):组合选择器
1：E,F-----------------------------多元素选择器，同时匹配所有E,F元素用逗号分隔
div,p{color:#f00}}
2：E,F-----------------------------后代元素选择器,匹配所有属于E元素后代的F元素，E F用空格分隔
li a {foot-weight:bold}
3: E>F-----------------------------子元素选择器，匹配所有E元素的子元素F
div>p{color:}
4: E+F-----------------------------毗邻选择器，匹配所有E元素之间的同级元素F
div+P{color:}
(3):属性选择器
1:E[att]---------------------------匹配所有具有att属性的E元素，不考虑它的值。-----E可以省略
[cheacket]{color}
p[title]{color:#fo0}
2:E[att=val]-----------------------匹配所有att属性等于val的E元素
td[class~=name]{color:#f00}
3:E[att^vall]----------------------匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#fff00}
4:E[attr$=vall]--------------------匹配属性值以指定值结尾的每个元素
div[class$="test"]{background:}
5:E[atter*=val]--------------------匹配属性值的每个元素
div[class*="test"]{background:}
---------------------------------------伪类Pesudo-classes(用来给选择器添加一些特殊效果)-------------------------------------------------------------------------
(1)anchor伪类--------------------------专用于控制链接的显示效果
1：a：link-------------------------(没有接触过的链接)，定义链接的常规状态
2：a: hover------------------------（鼠标放在链接上的状态）,用于产生视觉效果
3: a:visited------------------------（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
4: a:active-------------------------（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
(2)伪类选择器---------------------------伪类指的是标签的不同状态----（点过的状态，没点过的状态，鼠标悬浮状态，激活状态）
1：a:link{color:}--------------------未访问的链接
2：a:visited{color:}-----------------已访问的链接
3：a:hover{color:}-------------------鼠标移动到链接上
4：a:active{color:}------------------选定的链接----格式：标签：伪类名称{css代码
5：.out:hover.right{color:read}------匹配位置属性
(3)before after伪类----------------------
1 :before------p:before---------------在每个<p>元素之前插入内容
p:before{conntent:"hello";color:red}
2 :after-------p:after----------------在每个<p>元素之后插入内容
p:after{conntent:"hello";color:red}
-------------------------------------------:css优先级和继承-----------------------------------------------------------
(1):优先级---------------------------------:在浏览器中被解析的顺序
1: style(style=""-----1000)------------:内联样式的权限值最高
2: id(#id-------------100)-------------：统计选择符中的id属性个数
3：.class(.class------10)--------------:统计选择符中的class属性个数
4：p(p----------------1)---------------:统计选择符中的html标签名的个数
(2):继承-----------------------------------:它是依赖于祖先-后代的关系的。
:继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
1: body{color:red} <p>hello</p>--------:个BODY定义了的颜色值也会应用到段落的文本中。
2: p{color:green}----------------------:发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。
-------------------------------------------css常用属性--------------------------------------------------------------
(1):颜色属性****(color)****
1：<div style="color:blueviolet">ppppp</div>--------------------------------------------------(颜色样式)
2：<div style="color:#ffee33">ppppp</div>
3：<div style="color:rgb(255,0,0)">ppppp</div>
4：<div style="color:rgba(255,0,0,0.5)">ppppp</div>
(2):字体属性****(font)****
1：font-size: 20px/50%/larger------------------------------------------------------------------(字体大小)
2：font-family:'Lucida Bright'-----------------------------------------------------------------(字体风格)
3：font-weight: lighter/bold/border/------------------------------------------------------------()
4：<h1 style="font-style: oblique">老男孩</h1>
(3):背景属性****(background)****
1： 2：background-image: url('1.jpg');--------------------------------------------------------------(背景样式)
3：background-repeat: no-repeat;(repeat:平铺满)-------------------------------------------------(背景填充)
4：background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)(背景位置)
(4):文本属性****(text)****
1：font-size:10px-------------------------------------------------------------------------------(字体大小)
2：text-align:cener-----------------------------------------------------------------------------(文本排列方式)
3：line-herght:200px----------------------------------------------------------------------------(文本行高)
4：vertical-align:40px--------------------------------------------------------------------------(设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效)
5：text-indent:150px----------------------------------------------------------------------------(首行缩进)
6：letter-spacing:10px--------------------------------------------------------------------------(字母间隔)
7：word-spacing:20px----------------------------------------------------------------------------(单词间隔)
8：text-tranfrom:capitalize---------------------------------------------------------------------()
(5):边框属性****(border)****
1：border-style:solid---------------------------------------------------------------------------(边框样式)
2：border-color:chartreuse------------------------------------------------------------------------(边框颜色)
3：border-width---------------------------------------------------------------------------------(边框宽度)
简写border: 20 px solid chartreuse;
(6):列表属性****(ul)****
1:ul,ol{
list-style:decimal-leading-zero;----------------------------------------------------------(列表样式)
list-style:none;<br>----------------------------------------------------------------------(列表样式为空)
list-style:circle-------------------------------------------------------------------------(圆)
list-style:upper-alpha;-------------------------------------------------------------------()
list-style:disc---------------------------------------------------------------------------()
}
(7):dispaly属性****(显示)****
1:none--------------------------------------------------------------------------------------------(空)
2:block-------------------------------------------------------------------------------------------(块)
3:inline------------------------------------------------------------------------------------------(内联)
4:inline-block-------------------------------------------------------------------------------------(列表布局)
(8):外边距和内边距****(margin)********(padding)****
1:margin------------------------------------------------------------------------------------------(外边距-控制元素与元素的距离)
2:padding-----------------------------------------------------------------------------------------(内边距-控制边框与内容的距离)
3:border------------------------------------------------------------------------------------------(边框)
4:conntent----------------------------------------------------------------------------------------(内容)
5:body:{margin:0}---------------------------------------------------------------------------------(解决没有贴紧浏览器窗口)
6:border:1px solid transparent
padding:1px
over-flow:hidden--------------------------------------------------------------------------------(3-解决边境塌陷（重叠）-(margin collapse))
(9):float属性****(浮动)****
(10):clear语法:------(如frifox，容器高度为auto----溢出-----清除浮动)
1:none--------------------------------------------------------------------------------------------(默认值，允许两边都可以有浮动对象)
2:left--------------------------------------------------------------------------------------------(不允许左边浮动)
3:right--------------------------------------------------------------------------------------------(不允许右边浮动)
4:both---------------------------------------------------------------------------------------------(不允许有浮动对象)
5:.clearfix:after{---------------------------------------------------------------------------------(在类名为5的元素内加入后面内容)
conntent:".";------------------------------------------------------------------(内容为.)
dispaly:block------------------------------------------------------------------(加入的元素转换为块级元素)
clear:both---------------------------------------------------------------------(清除左右浮动)
visibility:hidden--------------------------------------------------------------(可见度设为隐藏---dispaly:none有区别)
visibility:hidden--------------------------------------------------------------(占据空间只是看不到而已)
line-herght:0------------------------------------------------------------------(行高为0)
herght-------------------------------------------------------------------------(行高)
font-size----------------------------------------------------------------------(字体大小)
}
6:clearfix{ *zoom:1;}---------------------这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。
7:over-flow:hidden----------------------------------------------------------------------------------(超出部分裁剪隐藏)
(11):position(定位)
1:static-------------------------------------------------------------------------------------------(无定位，不能当做定位的参照物，设置标签的left,top不起作用)
2:position:relatve------------------------------------------------------------------------(相对定位，对象遵循正常文档流，但将依据top，right，bottom，
-------------------------------------------------------------------------left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。)
3:position:absolute-----------------------------------------------------------------------(绝对定位)
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
4:position:fixed---------------------------------------------------------------------------(对象脱离正常文档流----)
使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。
5:仅使用margin属性布局绝对定位---------------此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。
---------------另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
