CSS基础
一、CSS基础
1.Cascading Style Sheet 层叠样式表
2.好处：
1.内容和样式分离
2.重用性、扩展性、统一性
3.先展示HTML内容，再执行CSS进行样式优化
网页速度更快
3.语法
选择器{
样式属性：属性值;
}
二、引入方式
1.行内样式（标签内部 style="样式设置"）
2.内部样式
<head><style type="text/css">
</style>
</head>
3.外部样式
1.外部css文件
2.引入 <link type="text/css" rel="stylesheet" href="css路径">
4.导入样式
@import url("style.css");
5.引入方式的优先级别
1.行内样式>内部样式>外部样式
2.就近原则
三、基本选择器
1.标签选择器
标签名{样式}
1.标签名不区分大小写
2.标签名可自定义
2.类选择器
.class{样式}
1.类名区分大小写
2.类名不能以数字做开始
3.id选择器
#id{样式}
1.id名区分大小写
2.id名不能以数字做开始
3.id名在一个页面中不能重复
4.id名重复之后，浏览器解析不同
4.优先级别
id选择器 > 类选择器 > 标签选择器
选择器的优先级别大于就近原则
四、高级选择器
方便页面元素的选取，提供精确选择
E/F :基础选择器都可以互相替换
1.层次选择器 后代、兄弟关系
1.后代选择器 E F :无论E、F中间包含了多少其他元素
2.子选择器 E>F：F一定是E的直接子元素，中间不能包含其他元素
3.相邻兄弟 E+F: F是E后面相邻的第一个兄弟
4.通配兄弟 E~F:F是E后面的所有兄弟
2.结构伪类选择器： 元素匹配自己任意位置的兄弟
E:first-child E元素的兄弟中排第一的元素
E:last-child E元素的兄弟中排最后的元素
E:nth-child(n) E元素的兄弟中排第n的元素
E:nth-of-type(n) E元素的兄弟中排第n的元素，
n只数与E一样的兄弟，不匹配的直接过掉
even: 偶数
odd: 奇数
3.属性选择器
input[type="radio"]
E[attr] 拥有attr属性的E元素
E[attr="val"] attr属性的值等于val的E元素，关系大小写
E[attr*="val"] attr属性的值包含val的E元素，关系大小写
E[attr^="val"] attr属性的值以val开始的E元素，关系大小写
E[attr$="val"] attr属性的值以val结束的E元素，关系大小写
4.状态伪类选择器
元素的某个状态来进行选择匹配：
1.鼠标悬停 E:hover 鼠标移上产生效果，鼠标移走，恢复原效果
2.鼠标checked E:checked 单选和多选选中状态
3.鼠标文本选中 E::selection 文本复制时常见特效
4.禁用状态 E:disabled 禁用状态
5.可用状态 E：enabled 正常可用状态
5.补充选择器
* 通配符
, 并集选择器 p,a{} 多个选择器满足时
交集选择器 li.class{} 同时满足li标签和class的元素
body{}
五、常见样式属性
注意:
总体设置会把所有值重新设置，尽量写在细节设置的前面！
1.字体样式font
字体类型 font-family:楷体,微软雅黑;
1.客户端电脑中的输入法有关系
2.填写多个字体类型，依次匹配对应的字体*
字体大小 font-size:1.5em;
px em(百分比)
字体风格 font-style:oblique;
斜体
字体粗细 font-weight: 900;
100~900 bold
总体设置 font:oblique 500 30px "楷体";
2.文本样式text
颜色 color: rgba(100,100,100,0.5) a代表透明度 越小越透明
transparent 父级颜色 透明效果
缩进 text-indent:2em
水平对齐 text-align:center left right
垂直对齐 vertical-align:top bottom middle
行高 line-height:px
文本修饰 text-decoration:underline 下划线
line-through 删除线
文本阴影 text-shadow:颜色 X轴偏移 Y轴偏移 模糊度
text-shadow: 0px -30px 10px red;
3.超链接样式
text-decoration: none;/*无下滑化线*/
/*1.未访问时*/
a:link{
color:red;
}
/*2.访问过*/
a:visited{
color: #bcbcbc;
}
/*3.鼠标悬停*/
a:hover{
color:blue;
}
/*4.激活未访问时（鼠标左击未释放）*/
a:active{
color:gold;
}
4.列表样式
list-style
5.背景
background-color: rgba(100,200,300,0.1);背景透明，内容不透明
background-image: url("image/1.jpg");/*背景图片*/
background-repeat: no-repeat;/*平铺*/
background-position: bottom right;/*右下角*/
background-size: cover;/*100% 扩大图片，和div一样宽度*/
background-size: contain;/*扩大图片，和div一样高度*/
background: red url("image/1.jpg") no-repeat right; 总体设置
六、盒子模型
任何元素、无论行级、块级标签，在页面都是以盒子模型进行占位
1.组成部分（高宽组成部分）
内容（content）-- 内边距（padding）--边框（border）--外边距（margin）
2.边框、内间距、外边距都有四边
顺序为：上右下左 top--right--bottom--left 顺时针
3.外边距
两个盒子border与border之间的距离，保持最大外边距，不是累加外边距
margin:0px auto;/*auto水平居中*/
4.高度影响
height/width:影响内容高宽
border: 边框宽度
padding: 内间距宽度
margin: 影响盒子的高宽位置
5.边框样式
border:宽度 样式 颜色
border-left-color: #0d09ff;/*边框颜色*/
border-bottom-style: dashed;/*边框样式*/
border-right-width: 1px;/*边框宽度*/
border-radius: 50%;/*圆角 正圆*/
6.盒子大小设置
box-sizing: content-box;/*默认效果*/
box-sizing: border-box;/*设置盒子高宽规则：content+padding+border=width*/
7.盒子阴影
box-shadow: inset 0px 0px 10px #ff1d17,/*内阴影 x,y,模糊半径,颜色*/
0px 0px 20px #ff8843,/*外阴影：多值*/
0px 0px 30px #fbff1e;
七、标准文档流
1.标签元素从上到下，从左到右依次排放，放不下自动换到下一行。
2.行级标签：高度宽度由内容决定，多个行级标签可放在一行
3.块级标签：另起一行，独占一行，多个标签不能放在同一行
八、浮动
1. 浮动：块级元素放在同一行，图文并茂效果
1.float:left/right
2.浮动元素脱离文档流，其位置在原位置浮动
3.后面未浮动的元素，不保留其位置
4.浮动元素在原页面的上层，无法遮挡内容（文字、图片等）
5.清除浮动 clear：left/right/both
6.浮动之后的元素，margin累加距离
2.避免父级塌陷
1.设置父元素的高度height（扩展性不足）
2.设置父元素内容超出隐藏 overflow:hidden;（下拉列表不可用）
3.在父元素的最后一个子元素，设置clear:both;（页面增加多余元素）
4.伪对象(推荐)
ul:afrer{
content:"";
display:block;
clear:both;
}
3.display:inline-block 与 float对比
display:inline-block 1.可以让元素排在一行，并且支持宽度和高度，代码实现起来方便 2.位置方向不可控制，会解析空格 3.IE 6、IE 7上不支持 float 1.可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float
2.浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
九、定位
position:static 默认值
fixed 固定定位
relative 相对定位
absolute 绝对定位
1.固定定位:
1.以浏览器窗口四个角为坐标原点，left/top/right/bottom控制
2.脱离文档流，不保留原位置
2.相对定位
1.以自身原位置为坐标原点，left/top/right/bottom控制
2.不脱离文档流，保留原位置
3.绝对定位
1.脱离文档流，不保留原位置
2.默认情况以浏览器窗口四个角为坐标原点，left/top/right/bottom控制
3.任何一个做了定位的父元素，以就近原则作为坐标原点。
以最近做了定位父元素为基准。
4.z-index
1.默认为0，设置了定位后，自动增大
2.必须配合position定位使用，才有作用
5.opacity：透明度
0~1 越小越透明
