css.层叠样式表
css：用来控制网页数据的表现，可以使网页的表现与数据内容分离。
一、css的四种引入方式
1.内行式：是在标记style属性中设定css样式，（这种方式没有体现出css的优势，不推介使用）
2.切入式：将css样式集中写在网页的<head></head>标签对<style></style>标签对中。
格式如下：<head>
<style type="text/css">
此处写css样式
</style>
</head>
3.导入式：讲一个独立的.css文件引入HTML文件中，导入式使用css规则引入外部css文件，<style>标记也是写在<head>标记中
使用语法如下：<style type="text/css">
@import "mystyle.css"，（此处需注意css的文件路径）
</style>
4.链接式：将一个css文件引入到HTML文件中，<link href=“mystyle.css” rel="stylesheet" type=“text/css”/>
注意：导入式会在整个网页装载完后再装载css文件，因此这会导致一个问题，如果网页比较大则会出现先会显示无样式的页面，闪烁一下才会出现网页的样式。这是导入式固有的一种缺陷。
使用链接式时与导入不同的是他会以网页文件主体装载前装载css文件，因此显示出来的网页从一开始就带样式效果的，它不会像导入式那样，这就是链接式的优点。
二、css的选择器（seceltor）
“选择器”指明了{}"样式"的作用对象，也就是“样式”作用于网页的哪些元素
1.基础选择器：
* ： 通过元素选择器匹配任意元素
E： 标签选择器，匹配所有使用E标签的元素P
.info 和 E.info class 选择器，匹配所有class 属性中包含info的元素
#info 和 #Einfo id 选择器，匹配所有id属性等于 foote r的元素
2.组合选择器：
E,F 多元素选择器，同时匹配所有E元素和F元素，E和F之间用逗号分隔
EF 后代元素选择器，匹配所有属于E元素后代的F元素，E 和 F 之间用空格分隔
E>F 子元素选择器，匹配所有E元素的子元素F
E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
注意嵌套规则：1.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素
2.块级元素不能放在P里面
3.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如：h1、h2、h3、h4、h5、h6、p、dt
4.li 内可以包含 div
5.块级元素与块级元素并列，内联元素与内联元素并列。
3.属性选择器：
E（att） 匹配所有具有att 属性的E元素，不考虑其它的值。（注意E 在此处可以省略，）
E（att=val） 匹配所有att属性等于“val”的E元素
E（att~=val） 匹配所有att属性具有多个空格分隔的值，其中一个值等于“val”E的元素
E（att |=val） 匹配所有att属性具有多个连字号分隔的值，其中一个值等于“val”E的元素，主要用于lang属性
E（attr^=val） 匹配属性值以指定值开头的每个元素
E（attr$=val） 匹配属性值以指定值结尾的每个元素
E（attr*=val） 匹配属性值中包含指定值的每个元素
P:before 在每个p元素的内容之前插入内容
P:after 在每个p元素的内容之后插入内容
4.伪类选择器：
伪类选择器：专用于控制链接的显示效果，伪类选择器
a:link（没有接触过链接），用于定义链接的常规状态
a:hover（鼠标放在连接时的状态），用于产生视觉效果
a:visited（访问过的链接），用于阅读文章，能清楚的判断已经访问过的链接
a.active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态
伪类选择器：伪类指的是标签的不同状态
三、css常用属性：
1.颜色属性：<div style="color:blueviolet"> pppppppp </div>
<div style="color:#ffee33"> pppppp </div>
<div style="color:rgb(255.0.0)"> ppppppp </div>
<div style="color:rgba(255.0.0.0.5)"> ppppp </div>
2.字体属性：font_size:20p X /50%/ larger
font_family:'Lucida Bright'
font_weight:lighter/blod/border/
<h1 style ="font_style:oblique">李</h1>
3.背景属性：background-color:cornflowerblue
background-image:url('1.jpg');
background-repeat:no-repeat;(repeat:平铺满）
background-position:right top(20px 20px);（横向：left center right 纵向：top center buttom）
注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常表，这是因为body为空，无法撑起背景图片，
另外，如果此时要设置一个width=100xp，也看不出效果，除非设置html
4.文本属性：font-size:10px
text-align:center;横向排列
line-height:200px 文本行高，通常讲，文本高度加上 文字上下的空白区域的高度的50%：基于字体大小的百分比
p
{width:200px;
height:200px;
text-align:center;
background-color:aquamarine;
line-height:200px;}
text-indent:150px;首行缩进， 50% 基于父元素（weight）的百分比
letter-spacing:10px;
word-spacing:20px;
direction:rtl;
text-transform:capitalize;
5.边框属性：
border-style:solid;
border-color:char treuse;
border-width:20px;
简写：border30px rebeccapurple solid;
6.列表属性：
ul,ol{list-style:decimal-leading-zero;
list-style:none;list-style:circle;
list-style:upper-alpha;
list-style:disc;}
7.dispaly属性：
none block inline
8.盒子模型：
padding：用于控制边框与内容之间的距离。
margin：用于控制元素与元素之间的距离；margin最基本的用图就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
内边距会影响盒子的大小，外边距不会影响盒子的大小，需要设置；分别通过设置padding、margin将小盒子移到大盒子中间。
注意：1.边框在默认情况下会定位于浏览器窗口的左上角，但并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下，body
距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以，body中的盒子不会紧贴浏览器窗口的边框
2.margin collapse（边框塌陷或者边框重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个规则看起来奇怪，但有其现实意义。当我们上下排列一系列规则的块级元素时，那么块元素之间由于外边
距重叠的存在，段落之间就不会产生双倍的距离。
9.float
div是块级元素，在页面中独占一行，自上而下排列，也就是流。（如果一行中显示多个div元素，浮动可以理解为让某个元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次）
float：left 左浮动，漂浮起来靠左排列
float：right 有浮动。漂浮起来靠右排列 （靠左、靠右是指页面的左右边缘）
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后面（如果一行放不下两个元素，那么A元素会被挤到下一行）;如果A元素的上一个元素是标准流中的元素，
那么A的相对垂直位置不会改变，也就是说A的顶部会跟上一个元素的底部对齐。
div顺序是HTML中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
元素浮动之前，也就是标准流中，是竖向排列的，而浮动以后可以理解为横向排列。（清除浮动可以理解为打破横向排列）
清除浮动的关键字是clear
语法：clear：none/left /night/both
取值：
none：默认值，允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许两边有浮动对象
对于css清除浮动，这个规则只能影响清除元素的本身，不能影响其它元素。
10.position
1.static，默认static：无特殊定位，对象遵循特殊文档流。（文档流就是文档的输出顺序，也就是常说的由左到右、由上到下输出形式，在网页中每个元素都是按照这个顺序进行和显示的
而float和position两个属性可以将元素从文档中脱离出来显示，默认值就是让元素继续按照文档流显示，不做任何改变）
top、left、bottom、right等属性不会被应用。
2.position：relative
relitive：对象遵循正常文档流，但将依据top、right、bottom、left等属性在正常的文档流中便宜位置，而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top、right、bottom、left等属性进行绝对定位。而其层叠通过z-index属性定义。
如果设定position：relative，就可以使用top、bottom、left和right来相对于元素在文档中应该出现的位置来移动这个元素（意思是元素实际上依然占据文档中原有的位置，只是视觉上相对于它在文档中的原有位置移动了）
当指定position：absolute时，元素就脱离了文档【即在文档中就不占据位置了】，可以准确的按照设置的top、bottom、left、right来定位，如果一个元素绝对定位后，其参照物是以离自身最近元素设置了相对定位，如果
有设置将以离自己最近的元素定位，如果没有将往其祖先元素寻找相对定位的元素，一直找到HTML为止
3.position：fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
fixed：对象脱离正常文档流。使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动，而其层叠通过z-index属性定义。
注意：一个元素若设置了position：absolute|fixed，则该元素就不能设置float。（因为两个不同的流，一个是浮动流一个是“定位流”，但是relative可以，因为它原本所占的空间仍然占据文档流）
