css复习
啥是css
CSS 指层叠样式表 (Cascading Style Sheets)，就是对html样式的添加，就是让页面骚起来，这也不是编程语言，什么是样式呢，简单讲就是你的眼睛是元素，那你的眼睛很大，很大就是样式。
引入样式
行内样式
<h1 style="color:red;">天行健，君子以自强不息</h1>
内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1 >天行健，君子以自强不息</h1>
</body>
</html>
外部样式
链接样式（写css用这种最好，原因自己查）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- 这种方式引入,rel表示文档和链接的关系，href表示文件的位置 -->
</style>
</head>
<body>
<h1 >天行健，君子以自强不息</h1>
</body>
</html>
在style.css文件中写
h1{
color: red;
}
导入样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(style.css)
</style>
</head>
<body>
<h1 >天行健，君子以自强不息</h1>
</body>
</html>
在style.css文件中写
h1{
color: red;
}
选择器
啥是选择器，看看css的组成
在{}里面的我们叫做声明。选择器的作用就是用来表示这个声明是哪个html标签的
通配符选择器
<h1 >天行健，君子以自强不息</h1>
<h2>地势坤，君子以厚德载物</h2>
<div>随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
*{
color: red;
}
/* 选择全部 */
标签选择器
<h1 >天行健，君子以自强不息</h1>
<h2>地势坤，君子以厚德载物</h2>
<div>随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
h1{
color: red;
}
h2{
color: green
}
div{
color: blue;
}
/* 选择对应的标签 */
类名选择器
<h1 class="a">天行健，君子以自强不息</h1>
<h2 class="b d">地势坤，君子以厚德载物</h2>
<div class="c">随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
.a{
color: red;
}
.b{
color: green
}
.c{
color: blue;
}
.d{
background-color: black;
}
/* 选择对应的class类名，前面加点，一个标签可以有多个类名 */
id选择器
<h1 id="a">天行健，君子以自强不息</h1>
<h2 id="b">地势坤，君子以厚德载物</h2>
<div id="c">随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
#a{
color: red;
}
#b{
color: green
}
#c{
color: blue;
}
/* 选择对应的id名，前面加#，一个标签只能有一个id */
属性选择器
<h1 name="a">天行健，君子以自强不息</h1>
<h2 name="b">地势坤，君子以厚德载物</h2>
<div id="c">随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
h1[name]{
color: red;
}
h2[name='b']{
color: green;
}
/*
[name^='xxx']开头包括xxx
[name$='xxx']结尾包括xxx
[name*='xxx']含有包括xxx
[name~='xxx']连起来含有包括xxx */
/* 选择对应的属性名，[属性名] */
伪类选择器
<a href="#">天行健，君子以自强不息</a>
a:link{
color: red;
/* 未点击的样子 */
}
a:visited{
color: green;
/* 点击结束的样子 */
}
a:hover{
color: yellow;
/* 鼠标经过的样子 */
}
a:active{
color: grey;
/* 点击时的样子 */
}
这个样子就自己看看了，伪类就是后面再加上：条件，还有很多伪类选择器，自己查看吧
伪元素选择器
<div>天行健，君子以自强不息</div>
div::before{
/*就相当于在元素的前面添加了一个元素*/
content:"前面";
color:red;
}
div::after{
/*就相当于在元素的后面添加了一个元素*/
content:"后面";
color:green;
}
选择器分组
<h1 >天行健，君子以自强不息</h1>
<h2>地势坤，君子以厚德载物</h2>
<div>随风巽，君子以申命行事</div>
<span>渐雷震，君子以恐惧修省</span>
h1,h2,div{
color:red;
}
/*一次选取好几个元素，设置同样的样式*/
子代选择器
首先我们要知道什么是子代
<div class="header">
<h1>男人可以不帅，但一定要骚</h1>
<p>来啊，快活啊，反正有大把时光</p>
</div>
<!-- div包裹住了h1和p，此时，h1和p就是div的子代，div就是h1的父代 -->
然后加入css样式
.header>h1{
color: red;
}
/*用>指向自己的子代*/
后代选择器
这里要知道什么是后代
<div class="header">
<h1>男人可以不帅，但一定要骚</h1>
<p>来啊，快活啊，反正有大把时光</p>
<dl>
<dt>如何变帅</dt>
<dd>开车要快，姿势要帅</dd>
<dd>天上天下，唯我独尊</dd>
</dl>
</div>
<!-- 这样dl属于div的子代，但dt和dd不属于，而dl，dt，dd，都是div的后代 -->
.header dd{
color: greenyellow;
}
相邻兄弟选择器
<div class="header">
<h1>男人可以不帅，但一定要骚</h1>
<p>来啊，快活啊，反正有大把时光</p>
<dl>
<dt>如何变帅</dt>
<dd class="first">开车要快，姿势要帅</dd>
<dd>天上天下，唯我独尊</dd>
</dl>
</div>
<!-- 这里两个dd就是兄弟相邻元素 -->
.first+dd{
color: red;
}
/*这个元素相邻的下一个元素*/
权重和继承
继承
元素的文本字体是否可见等，父级设置后，子代也会继承
<div class="header">
<h1>男人可以不帅，但一定要骚</h1>
<p>来啊，快活啊，反正有大把时光</p>
<dl>
<dt>如何变帅</dt>
<dd class="first">开车要快，姿势要帅</dd>
<dd>天上天下，唯我独尊</dd>
</dl>
</div>
.header{
color: red;
}
权重
当两个样式冲突时，就只能选择其中一种作为样式，判断的依据就是权重
引入样式：行内>内嵌>外部
引入样式相同时：！important>id>claa>标签>*>继承
当好几个选择器一起时，比如加了子代什么的自己查
当所有都相同时：后面的比前面的高
一般越具体权重越高
文本样式
有关文本样式
font-family:字体，
font-weight：粗细 normal / bold / bolder / lighter
font-size：大小
大小的单位：px，表示几像素，em，相对于父元素字体的大小，百分比，相对于父元素的大小
color：颜色
颜色的表现方式#xxx，#xxxxxx，颜色单词，rbg（0，0，0），rgba（0，0，0，透明度0~1）
line-height:行高
font-style:字体样式 normal / italic
font-variant:小体大写 normal / small-caps
简写 font： font-family，font-style，font-variant，font-weight，font-size
1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用默认值
text-decoration：线条，下划线，删除线什么的 none / underline / overline / line-through
text-shadow：文字阴影 颜色 ，右偏，下偏，模糊程度
white-space：保存空格，换行 normal / pre / nowrap
text-indent：首行缩进
text-align：水平对齐 left / right / center
vertical-align：基线对齐 middle
单行文本省略
<div class="header">
天不生我程序员，键道万古如长夜，键来！仙之巅，傲世间！有我键盘就有天！大河之键天上来！一键横天镇世间！破红尘！杀尽仙！一键在手，斩九天！倘若世间无真仙？我愿持键化为仙！！！
</div>
.header{
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
盒模型
展现一下div的强大，一个div由content（内容）+padding（内边距）+border（边）+margin（外边距）
普通盒子和ie盒子有一些区别，我只讲普通盒子
conten的属性
width：宽度
height：高度
padding的属性
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding：内边距简写，有四种写法
- 一个数据：四边
- 两个数据：上下 左右
- 三个数据： 上 左右 下
- 四个数据：上 右 下 左
box-sizing：border-box 由于内边距会自动顶开content的大小，设置后就不会影响conten的大小
border的属性
border-style：边框样式
border-top：上边框 边框样式 宽度 颜色
。。。。下左右不写了。。。。。
border：简写，直接四条边 边框样式 宽度 颜色
border-radius：圆角
border-top-left-radius：左上角圆角
。。。其他三个角不写了。。。。
margin的属性
margin-top:上外边距
。。。。下左右不写了。。。。。
margin：外边距 ，格式和内边距一样
小心外边距塌陷
块级元素，行内元素和行内块元素
行内元素：
- 与其他行内元素并排
- 不能设置宽高，默认的宽度就是文字的宽度
块级元素：
- 霸占一行，不能与其他任何元素并列。
- 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
行内块元素
- 又能并排又能设置宽高
但是这三种格式是可以转换的
display： block（块级）/inline（行级）/inline-block（行内块）
显示和隐藏
display为none时，元素消失，啥都没有
visiblity：显示隐藏 hidden元素还在，但看不到了
opacity：透明的0~1
overflow：超出部分隐藏 scroll（隐藏的部分可以滚动查看）/auto（看是否超出，超出滚动查看）/hidden（超出不可看）
盒子阴影
box-shadow：盒子阴影 右偏 下偏 模糊度 颜色
鼠标
鼠标在不同的元素上可以有不同的样子
cursor：鼠标样式
背景
background-color：背景颜色
background-image：背景图片 url(图片地址)
background-repeat：图片重复排列
background-attachment：背景固定，不随滚动
background-position：背景图片的位置
background-size:背景图片尺寸大小
简写background： [background-color] [background-image] [background-repeat] [background-attachment] [background-position]
background：liner-gradient(角度，颜色 多少开始渐变百分比，颜色，颜色) 线性渐变效果
background：radial-gradient(大小/位置，颜色 多少开始渐变百分比，颜色，颜色) 镜像渐变效果
浮动
浮动的目的就是让独占一行的元素并排，整理浮动之前我还是想说一句，我目前的感觉浮动很垃圾，上有行内块，下有flex，都比浮动要香
float：浮动 left/right
浮动后会脱离标准流，飘到父元素的最上面并排且不占位置，父元素无法感知高度
所以用完浮动我们还要清除浮动
清除浮动
clear: 清除浮动 left/right/both
或者利用BFC
定位
有时候你想在原来的元素上加一些其他元素，但位置难以控制时就需要定位了
postion：定位
left：里左边距离
其他三边省略。。。。。
relative：相对定位，相对于原来的位置改变，原来位置还在
absolute：绝对定位，相对于第一个相对定位的位置发生改变，没用就相对于根元素改变，原来位置不在
fixed：固定定位， 相对于可视窗口改变位置，就是滚动条怎么动，位置都不变
sticky：粘性定位，开始一起滚动后面相对于可视窗口改变位置位置不变
