CSS基本样式

1.
font-famliy:引入字体，font-size:改变字体大小；font-weight设置字体粗细，值没有单位，只加数字
2.
border-radius：是用来调整边角的圆润，50%就是圆形。

例子：box-radius：50px 50px 50px 50px/20px 20px 20px 20px;即通过X轴/Y轴；第一个是左上角
3.
可以拥有好几个class类，例如class=" pink-text blue-text"，如果两个类的样式冲突，在style中
下面的会覆盖上面的。
4.
class类优先级高于继承，id选择器高于class选择器，内联样式高于id选择器。
5.
！import优先级最高
.pink-text {
    color: pink !important; 
  }
6.
CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个。若有很多都应用这个值的时候
在改的时候就不用全部改，只改这个赋值的值就行
例：在最外层:root里定义一个值,在：root里面定义，下面所有的子元素都会继承，会作用于整个页面。一般都在：root里面定义
:root{
--a-color:black;
}
在b类里用的时候：
.b{
background:var(--a-color,red) //red,在--a-color定义的这个颜色值不能用的时候就取red这个背景颜色
}
7.
使用媒体查询，在某个值发生改变，相应的样式也会改变，例：在页面宽度大于350px的时候,之前定义的--a-color变成黄色
@media(max-width:350px){
:root{
--a-color:yellow;
}
}
8.
text-align 文本对齐方式
justify:将文本中用空格隔开，使每行一样长
center：文本都居中
right：右对齐
left：左对齐
9.
strong加粗文本，u给文本添加下划线，em强调文本，即斜体，s添加删除线，hr创建水平线，hr不用闭合标签.
10.
rgba（45，45，45，0.1）前三个都是组合颜色，第四个参数是透明度。opacity也可以设置透明度，只是是所有的透明度，可以继承到子元素
11.
box-shadow 给盒子添加阴影，可以添加多个阴影列表，用逗号隔开，
offset-x 阴影的水平偏移量；
offset-y 阴影的垂直偏移量；
blur-radius 模糊半径；
spread-radius 阴影扩散半径；
color  阴影颜色
其中 blur-radius 和 spread-radius 是可选的。
例：box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
这是添加了两个阴影列表，0是水平偏移量，10px是垂直偏移量，20px是模糊半径，rgba(0,0,0,0.19)是颜色和透明度

11.1text-shadow:文本的阴影：没有扩散属性，其余一样
12.
text-transform： 调整字体的大小写
lowercase：所有字体都小写
uppercase：所有字体都大写
capitalize；首字母大写，其余小写
initial：   默认值
inherit:   使用父元素的text-transform属性
none:    不改变字体
13.
line-height:设置行高，即每行之间的垂直距离
14.选择器
伪类选择器
：hover 鼠标悬停
：link 未访问的链接
：visited 已经访问的链接
：active  已选择的链接
p:first-of-type{}改变所有父元素第一个p标签的样式【p标签不用是第一个孩子，他只找第一个p标签】
p:last-of-type{ }改变所有父元素最后一个p标签的样式
p:last-child{}改变p是任何一个标签的最后一个子元素的样式，若不是最后一个子元素样式不变
p：first chilld {} 改变p是任何一个标签的第一个子元素的样式，若不是第一个子元素样式不变
p i ：first chilld {} 改变所有p元素中第一个孩子是i标签的样式，第一个孩子不是i标签不变，【区别p不用是第一个孩子】
p  ：first chilld i {} 改变第一孩子是p标签，并且p标签中第一个孩子是i标签的样式【p必须是第一个孩子】

伪元素选择器

【 可以一个：也可以两个，写两个是为了与伪类区分，写一个是为了IE的兼容性问题】

注意：通过为元素选择器创建的不是一个标签，是虚假存在的
p::after{ content"你好"}  在p标签后面加入“你好”，与content一起使用，before是在前面加
---
::before 创建一个伪元素，它是所选元素的第一个子元素； ::after 创建一个伪元素，它是所选元素的最后一个子元素。 p::before:在p标签中第一个子元素添加样式
input[type="text"]:disabled{} 为所有 type="text" 的被禁用的 input 元素设置样式
p:empty{}设置空的p元素的样式
input[type="text"]:enabled{ }为所有 type="text" 的已启用的 input 元素设置样式
:lang  
例：q:lang(en) {
  quotes: "~" "~";
}
运用;

Some text A quote in a paragraph Some text.

例子：a：hover ，div:hover p{} 这是把鼠标放div上 标签会怎么样

结构选择器：

后代：选择器1 选择器2         给选择器2添加样式, 但是选择器2 必须满足是选择器1 的后代元素

子代：选择器1 > 选择器2     给选择器2添加样式, 但是选择器2必须满足是选择器1的直系子代元素

        兄弟选择器 +与~

+：选择器1+选择器2        给选择器2 添加样式, 但是选择器2必须满足是选择器1的下一个兄弟元素

~:   选择器1~选择器2        给选择器2 添加样式, 但是选择器2 必须满足是选择器1的后面的兄弟元素

     区别：+是后面第一个兄弟选择器，~是后面所有兄弟选择器，+后面的选择器必须是选择器2.~不需要

 
//.try+p 什么元素也拿不到，因为后面是h2
//而.try~p,后面两个p元素都可以取到

交集并集选择器

交集：

选择器1选择器2  注意: 多个选择器之间不能有空格       意义: 需要标签同时满足以上多个选择器才会生效

并集：选择器1,选择器2        满足选择器1或者选择器2的都会添加样式

结构伪类选择器

（1）:first-child 第一个子元素    :last-child   最后一个子元素 

:nth-child(xn+y) 第几个子元素(从1开始数数）例子：li:nth-child(-n+3) 前三个li有样式

以上几个必须和前置选择器配套，就是第n个孩子必须是前面对应选择器，若不是，则没用

（2）:first-of-type   第一个类型元素

        :last-of-type    最后一个类型元素

        :nth-of-type(xn+y)        第几个类型元素【这些不需要跟前置对象配套，直至把前置选择器全部取出来，然后第几个，第几个】

状态伪类

:checked   选中后样式                                                   :empty  若是空标签的样式

15.
定位position
relative:相对定位   脱离文档流，但还给它留着位置, 他是相对于原来的位置定位的
absolute:绝对定位 ：绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它，之前的位置就会被代替
                                  它的定位是按照他的父元素的position：absolute 来定位的，若都没有就按照body
fixed:固定定位：与absolute区别：没有滚动条的情况下没有差异
在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
position：static 默认值，没有定位，元素出现在正常的流中；
sticky：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：
#sticky-nav {
position : sticky ;
top : 100px ;
}
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
（1）父元素不能overflow:hidden或者overflow:auto属性。
（2）、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
（3）父元素的高度不能低于sticky元素的高度
（4）sticky元素仅在其父元素内生效

16.z-index 显示的顺序1，2
17.linear-gradient(a,b,c,d)实现背景颜色渐变，有四个参数，第一个是渐变的角度，后三个是颜色
例：background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
18.repeating-linear-gradient()也是背景渐变，区别是可以在哪个位置px 渐变到哪个位置px并且如果不会填满盒子，他会重复渐变，
例：background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );90deg是角度，0-40px是黄色，以此往下，若盒子足够大，就会用这些颜色重复渐变。
19.transform:
（1）scale():显示元素的比例
transform:scale( 1.5)就会显示成当前的1.5倍数。
（2）skewX() 沿X轴倾斜的角度。skewX(45deg) ;沿X轴倾斜45度。
（3）shewY()沿Y轴倾斜的角度。
20.动画
animation-name：动画名称
animation-duration：动画执行时间
@keyframes：调用动画的名字，以及动画样式
animation-iteration-count: 3;动画执行的次数，当3为infinite时会无限循环
animation-timing-function：在动画中的速度：
（1）ease默认动画以低速开始，然后加快，在结束前变慢
（2）ease-out：动画以高速开始，以低速结束
（3）ease-in，动画以低速开始，以高速结束
（4）linear：动画从头到尾的速度是相同的。
例;#anim {
  animation-name: colorful;
  animation-duration: 3s;
animation-iteration-count: 3;
animation-timing-function：linear;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}给id为anim添加了动画

21.H5新增标签main、header、footer、nav、article、section ，audio，figure ，label，fieldset
（1）main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
（2）section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。 当内容组之间没有联系时，我们可以使用 div。
例如：

- 一组内容

- 几组相关的内容

- 几组独立的内容
（3）header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。
（4）nav它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。用于包含内部的链接，导航等等
（5）footer：与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。
（6）audio：音频，必须具有controls属性，在