什么是CSS？控制页面样式的，通常放在HTML的head标签内使用
CSS结构
选择器 {css样式}
css样式：{属性:值,属性:值,属性:值}
CSS的引入方式有3种：一般都是在html种的head标签内加css样式
1.style标签内部直接写css样式
<style>
h1 {
color:burlywood;
}
</style>
2.通过link标签引入外部的css文件(最正规的方式)
<link rel="stylesheet" href="csstest.css"> href后面引入的是css文件的全路径
3.html标签内直接加，一般不用这种方式
<h1 style="color: green">老板好，今天哪个队赢啦</h1>
一.CSS选择器语法
选择器
基本选择器：
1.id选择器 #id值 {样式;} 表示所有这个id值的标签都会使用这个样式
2.类选择器 .class值 {样式} 表示所有这个class值的标签都会使用这个样式
3.元素/标签选择器 元素{样式} 表示所有这个元素的标签都会使用这个样式
4.通用选择器 *{样式}
组合选择器：
1.后代选择器：div span {样式}
2.儿子选择器：div>span {样式}
3.毗邻选择器：div+span {样式} 同级别紧挨着的下面第一个span
4.弟弟选择器：div~span {样式} 同级别下面所有的span
属性选择器
1.查找含有某个属性的标签：[username]{样式}
2.查找含有某个属性并且有某个值的标签：[username='值']{样式}
3.查找含有某个属性并且有某个值的某个标签：标签名[username='值']{样式}
分组选择器&嵌套选择器
1.标签1,标签2,标签3 {样式}：表示把标签1-3改成xxx样式
2.多个选择器用逗号隔开 {样式}：表示分贝把选择器指定条件的标签修改样式
伪类型选择器
a:hover {
color: aqua;
}
a:active {
color: black;
}
a:visited {
color: darkgray;
}
input:focus {
background-color: red;
}
伪元素选择器
p:before {
content:'在前面新增文本且不能选中';
color: blue;
}
p:after {
content:'在后面添加文本';
color: orange;
}
选择器优先级:最常见的有以下几个
1选择器相同，选择器的顺序不同的时候：谁距离标签更近 就按照谁的样式
2选择器不同时优先级：行内>id选择器>类选择器>标签选择器
二.CSS属性
基本属性
height：xxpx; 设置长
width：10px; 设置宽
总结：行内标签不能设置长宽
浮动属性(非常重要)
1.浮动有什么用？做布局规划用，例如小米官网等等
2.如何使用？
float:left;向左
float:right;向右
总结：只要是涉及到页面的布局，一般都是用浮动来提前规划好布局
3.浮动有哪些影响如何解决？
会造成负标签塌陷问题,如何解决？
提前写好处理浮动塌陷的css代码，如下，如果谁塌陷 就给加一个 class="clearfix" 即可
.clearfix:after {
content: '';
display: block;
clear: both;
}
溢出属性(常用的有以下2个)
overflow:hidden; 超出区域的文字不展示
overflow:scroll; 设置成上下滚动条形式
字体的属性设置
color:颜色; 设置颜色
color:rgba(xx,xx,xx,xx); 第4个参数是透明度，范围 0-1
font-family:字体; 设置字体
font-szie:16px; 字体大小
font-weight:bolder; 字体加粗
文字属性
text-align:center 居中/左对齐/右对齐
text-decoration:none 给a标签去掉下划线(必会)
背景图片属性
backgroud-image：url(图片路径); 默认全部铺满
backgroud-repeat:no-repeat; 不平铺
backgroud-repeat:repeat-x; x轴平铺
backgroud-repeat:repeat-y; y轴平铺
backgroud-position:center center; 第1个左 第2个上
总结：如果出现多个属性名前缀一样的情况，一般情况下可以简写，只写前缀
边框属性
border-color:边框颜色;
border-style:solid;边框
border-width：5px;边框大小
border-radius:50%;画圆(必须记住)，直接写50% ，长宽一致就是圆
display属性---属性对应的值的作用
display:none; 隐藏标签不展示到前端页面，原来的位置也释放，但是存在
inline：将标签设置为行内标签的特点(一行显示)
biock：将标签设置成块级标签的特点(独占一行且能设置长宽)
inline-block:一行且能设置长宽
visiblty:hidden 单纯隐藏但是位置还在
三.其他
盒子模型
标签与标签之间的距离：margin-上/下/左/右
margin:0; 表示上下左右全是0px
margin：10px 20px; 第1个表示上下 第2个表示左右
margin：10px 20px 30px; 第1个表示上 第2个表示左右 第3个表示下
margin：10px 20px 30px 40x; 表示上 右 下 左
margin：0 auto; 标签水平居中
标签套标签的距离：padding(或者调整里面文本到边框的距离)
padding-left:左
padding-right:右
padding-top:上
pading-bottom:下
用法同上面的margin
总结：浏览器会自带8px的 margin，一般情况下在写页面的时候，上来先把body的margin去除
定位(包含以下几种)
静态：所有的标签默认都是静态的->position:static，无法改变位置
相对定位：相对于标签原来的位置做移动--->relative
position: relative; 相对定位，position默认是static，需要改成relative才能是定位过的，才会移动
绝对定位(常用)：相对与已经定位过的父标签做移动，如果没有父标签就以body为参照
例如：小米网站的购物车
position: absolute;
固定定位(常用)：相对于浏览器窗口固定在某个位置来做移动
例如：小米网站右侧固定的几个标签，再比如进某网站的人工服务等
position: fixed;其他全部参照浏览器窗口
z-index模态框
例如百度登录页面：其实是三层结构
1 最底层是正常内容
2 中间层黑色的透明区
3 最上层白色是注册区
z-index: 99;模框大小
