css基础知识总结
什么是css
css即层叠样式表，用于控制网页数据的表现，使得网页数据和表现控制分离。
css引入的是四种方式
行内式
行内式就是在标签内部的style属性编辑控制方式。这种方式，不能体现css的优势，不推荐！
<p style="background-color: rebeccapurple">hello css</p>
嵌入式
嵌入式指的是在head标签中，嵌入style标签控制对应的标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: rebeccapurple;
}
</style>
</head>
链接式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css">
</head>
导入式
同样在head标签中嵌套style，然后在style里导入css文件链接
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "1.css";
</style>
</head>
注意：使用导入式，css是在整个页面都加载后再导入的，这样就可能导致网页在一个短时间内处于杂乱的状态。但是链接式不一样，他是在加载网页内容前，先导入的，所以不存在这个问题。
css选择器
css选择器是指如何去选择具体的某个标签，然后去实现控制。
1.基础选择器
*:通用元素选择器，控制所有的标签
*{background-color: rebeccapurple}
E:标签选择器，控制所有该标签的样式
p*{background-color: rebeccapurple}
.info class选择器 也可以具体指定某个标签下的选择器 E .class
.abc{background-color: rebeccapurple}
div .abc{background-color: red}
#info E #info id 选择器。 ID是唯一的，class也可以不唯一。
#abc{background-color: rebeccapurple}
div #abc{background-color: red}
2、组合选择器
E,F 多元素选择器，同时控制多个元素。div,a{background-color: rebeccapurple}
E F 后代选择器，注意空格。
E>F 子选择器
E+F 毗邻选择器，找到紧跟着E后面的F。
注意：后代选择器是包括子孙后代，子选择器只包括子代
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、伪类
用于给选择器，增加一些效果。
a:link 控制没接触过的链接
a:hover 鼠标放在上面时
a:visited 已经访问的链接
a:active 选定的时候
css的继承和优先级
所谓的css优先级是指在多个选择器同时控制同一个标签时，应该选择哪一个。
1、内联样式表权重为1000
2、ID，一个ID权重为100
3、class，权重为10
4、标签， 权重为1
计算方式是逐个累加。 比如 div .aaa权重为1+10
css 的继承：
所谓的继承就是说父标签的部分属性可以被后代继承，但是这个权重是非常低的，只要是有相同的属性控制，就可以直接被覆盖。
有部分属性是无法被继承的:border, margin, padding, background等
!important
有这个声明的优先级是最高的，除非冲突不然无视一切。当冲突时，再使用权重比较。
css的常用属性
颜色属性
<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>
/*a 透明度*/
字体属性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">hello</h1>
背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
文本属性
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;
边框属性
border-color: red;
border-style: dashed;
border-width: 1px;
可以简写为：border：1px dashed 1px
display属性
none
block
inline
inline-block
其中inline-block拼接的两个元素中间有小空隙，可以通过下面的方法去掉
在外层div下，word-spacing: -5px;
外边距，内边距
- margin 外边距
- padding 内边距
- border 边框
- content 内容
下面的例子中的元素的总宽度为300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
