CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，
可以使网页的表现与数据内容分离。
css的四种引入方式:
1.行内式
<p style="hello yuan</p>
2.嵌入式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-style:italic;">#2b99ff;
}
</style>
</head>
3.链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
< styletype = "text/css" >
@import"mystyle.css";此处要注意.css文件的路径
< / style >
css的选择器（Selector）
1 基础选择器
＊ :通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
E :标签选择器，匹配所有使用E标签的元素 p { color:green; }
.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; }
#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; }
2 组合选择器
div,p 多元素选择器
div p 后代选择器
div>p 子代选择器
div+p 毗邻选择器
3 属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
p[title]{color: # f00; }
E[att = val] 匹配所有att属性等于“val”的E元素
div[class =”error”] {color: # f00; }
E[att~ = val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class ~=”name”] {color: # f00; }
E[attr ^= val] 匹配属性值以指定值开头的每个元素
div[class ^="test"]{background: # ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素
div[class $="test"]{background: # ffff00;}
E[attr *= val] 匹配属性值中包含指定值的每个元素
div[class *="test"]{background: # ffff00;}
4 伪类(Pseudo-classes)
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
CSS的常用属性 :
1 颜色属性
< div style = "color:blueviolet" > ppppp < / div >
< div style = "color:#ffee33" > ppppp < / div >
< div style = "color:rgb(255,0,0)" > ppppp < / div >
< div style = "color:rgba(255,0,0,0.5)" > ppppp < / div >
2 字体属性
font - size: 20px / 50 % / larger
font - family:'Lucida Bright'
font - weight: lighter / bold / border /
< h1 style = "font-style: oblique" > 老男孩 < / h1 >
3 背景属性
font-weight:bold;">'1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
4 文本属性
font-size: 10px;
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
5 边框属性
border - style: solid;
border - color: chartreuse;
border - 20px;
简写：border: 30px rebeccapurple solid;
6 列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
7 dispaly属性
dispaly:none
block
inline
inline-block
8 外边距和内边
margin border padding left right bottom top
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框) 围绕在内边距和内容外的边框;
Content(内容) 盒子的内容，显示文本和图像。
9 float属性
clear语法：
clear : none | left | right | both
取值： none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，
则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
10 position(定位)
1 static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2 position: relative／absolute
relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
absolute 绝对定位。其层叠通过z-index属性定义。
3 position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，
它都会固定在这个位置。