css3入门

一、在html中如何引入css

在style属性中直接填写css样式（行内样式、内联式）
填写到<style></style>标签中（内嵌式）
将css代码写入.css文件，在html文件中引入该文件（外部样式），与内嵌式优先级相当。
- 链接式<link>属于html标签，加载html的同时加载.css文件
- 导入式@import 是css提供的，在html加载完成后再加载.css文件

二、.选择器

2.1核心选择器

标签选择器
h1{}
类选择器
.class{}
id选择器
#id {}
组合选择器
div.one,div.two{}
并且选择器
ul.nav{}
普遍选择器
*{}

2.2层次选择器

父子选择器：
.nav > li {}
后代选择器
.nav li{}
下一个兄弟选择器：
div.b_first + div.b_second{}
之后所有兄弟选择器：
div.b_first ~ div.b_second{}

2.3伪类选择器

:first-child
:last-child
:nth-child（参数）
参数：数字、表达式（n+3，从n=0开始）、关键字（odd、even）
:hover

2.4伪元素选择器

ul::after{ 
    clear:"both"; 
    content:""; 
    display:"block" 
}

2.5属性选择器

[name] 选择具有name属性的元素
[name=username] 选择具有name属性，并且属性值为username的元素
[name^=u] 选择具有name属性，并且属性值以u开头的元素
[name$=u] 选择具有name属性，并且属性值以u结尾的元素
[name*=u] 选择具有name属性，并且属性值中包含u的元素

三、优先级

特权
!important
权值
1000 style属性
100 #id
10 .class、伪类、属性
1 标签（元素）、伪元素
顺序

四、盒子模型

(针对于块元素讨论盒子模型)

4.1样式

外边距
margin-top、margin-right、margin-bottom、margin-left
margin:0 auto（盒子居中，前提是已经设置width值）
内边距
padding(-top/-right/-bottom/-left)
边框
border(-top/-right/-bottom/-left)
borde（速写形式):
- border-width
- border-style :
  soliddotteddasheddouble
- border-color

（上下左右、上右左下、上下右左)

宽：width
高：height

4.2盒子类型

怪异盒子（边框盒子）（IE8）
box-sizing:border-box
盒子宽度为：width（padding+border+内容宽度）
盒子在浏览器中的宽度：width + margin-left + margin-right
传统盒子（内容盒子）（firefox）
box-sizing:content-box
盒子宽度为：padding+border+width（内容宽度）
盒子在浏览器中的宽度：padding + border + width + margin

六、布局

6.1浮动布局

不完全脱离文档流，不会遮挡文本

6.1.1 浮动元素的css样式

float:left\right

浮动元素默认宽度为0，且失去了对父元素的支撑作用，即已脱离文档流。在浮动流中，若多个同级别元素浮动元素已占满一行，则自动换行。

6.1.2 清除浮动

方法一

ul::after{ 
    clear:"both"; 
    content:""; 
    display:"block" 
}

方法二
给父级元素添加overflow:hidden属性

6.2定位布局

position: static(默认)

relative
相对点：该元素所在文档流中的初始位置
是否脱离文档流：不脱离
最佳实践：一般不移动，作为相对点
absolute
相对点：距离最近的父‘定位’元素。如果没有父定位元素，那就只能相对于浏览器视口或者将某个父元素设置为定位元素
是否脱离文档流：脱离
fixed
相对点：浏览器视口，并且不会随着浏览器的滚动而滚动
是否脱离文档流：脱离
sticky
相对点：相对定位和固定定位的结合，达到阈值之前时相对定位，达到阈值之后是固定定位，阈值通过left、top、right、bottom来设定

当position的取值为relative/absolute/fixed/sticky这四个之一。我们就认为当前这个元素为定位元素。定位布局可以使用定位属性，比如left、right、top、bottom

6.3伸缩盒布局

作用：与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列，常用于响应式布局(移动端)

使用：

<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul>

ul容器：
display:flex 让容器成为伸缩盒容器
flex-direction：row 容器中子元素的排列方式，row-沿x轴排列，column-沿y轴排列，即设定主轴。（交叉轴与主轴垂直）
flex-wrap:wrap/nowrap 是否允许换行
jusitfy-content:space-around 元素四周留有空白
align-items:center flex子项在容器中交叉轴上的对齐方式，center为居中放置

一般给容器添加宽高，子元素在容器中排列

li子元素
flex-basis 主轴中基准值
flex-grow 主轴中剩余空间分配所占份数
flex-shrink 主轴中若有亏损，所占亏损份数
flex 速写

七、文本规则

针对盒子内容来进行修饰，具有可继承性。

text-align:center/left/right；
vertical-align:middle 调整行内元素的垂直排列方式
line-height:32px；当文字行高等于父盒子高度时，即可达到垂直居中效果
text-decoraction:
underline/light-through/overline/none
text-decoraction-style:
solid/dotted/dashed
text-indent 缩进
text-transform:
lowercase/uppercase
overflow(overflow-x/-y):
- visible（默认）
- hidden (在父容器上设置该属性)
- scroll

八、字体规则

font-family
font-size
font-weight
font-style
color
font（速写）:font-style font-weight font-size/line-height font-family;
normal normal 12px/3em "微软雅黑"
网络字体( https://www.iconfont.cn/）:
1.获取字体文件
2.在css定义网络字体
3.使用
- 3.1基准样式
- 3.2特殊样式
- 3.3在html引用

九、实体

  空格

< 小于

> 大于

十、其他规则

display:
- block
- inline
- inline-block :
  <input>、<img>、<button>、<textarea>、<label>
列表规则
list-style :none
表格规则
boreder-collapse:collapse; 当td添加边框，加在table上可以合并隔壁的边框
opacity: div元素的透明度级别

十一、单位

绝对单位
10px
相对单位
- 1em，em相对于当前元素的字体大小
- 1rem，rem相对于html元素选择器中设定的字体大小
颜色
- 关键字 pink、red
- 十六进制 #ffffff #000
- 函数 rgb（，，）、rgba( , , )

十二、背景规则

background-color: 可以与背景图共存
background-image:
- url('图片地址')
- linear-gradient (red, yellow, blue) 线性渐变
- radial-gradient 径向渐变
background-repeat:
- repeat（默认）/repeat-x/repeat-y
- no-repeat
background-clip: 背景裁切的方式
- content-box
- border-box 边框以下有背景图
- padding-box 边框以下没有背景图(默认值)
background-origin: 背景铺设的起点
- content-box
- border-box
- padding-box
background-size: 等比例设置
- cover 使背景图可以完全覆盖背景区，有时会被适当裁剪
- contain 使背景图片可以完全装入背景区，周围可能会有空白
- 固定值
background-position:
- center
- 固定值

backgroung（速写）：url() #ccc no-repeat center;

十三、bootstrap（栅格布局）

多页面程序(jquery + bootstrap)

单页面程序教务系统(vue vuex vueRouter elementui[组件库])

模块：

全局样式的重置
布局规则（栅格系统）
样式（表格、列表...）
组件
- 模态框
- 轮播图

使用：

引用bootstrap.css[cdn]
使用

版本：

bootstrap3 浮动
bootstrap4 伸缩盒

十六、动画、过渡、变形

16.1动画

16.1.1 关键帧定义

@keyframe   动画名称{ 
    0%{ 
    } 
    50%{ 
    } 
    100%{ 
    } 
}

16.1.2 动画设定

animation-name
animation-duration
animation-delay
animation-timing-function:
linear/steps/ease/ease-in/...
animation-direction:
- reverse
- alternate
- alternate-reverse
animation-iteration-count:
- 4
- infinte
animation-fill-mode:
- forwards 动画完成后，保持最后一个属性值
- backwards 再animation-delay属性指定的一段时间内，保持初始状态
- both

16.2动画库

打开网页的时候可能一开始有白屏
- 加强服务器
- faster mini
  - 图片压缩
  - 图片合并（图标）
  - cdn加速
    将库【iconfont等】放到cdn服务器上

使用

获取cdn链接

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">

使用class
- 基础规则
  animate_animated
- 特殊规则
  animate_pulse

16.3过渡

（更加简单的动画，没有动画）

需要触发(:hover)

transition-property 需要过渡的属性
transition-duration 持续时间
transition-timing-function：时间曲线函数
- linear
- steps()
- easy
transition-delay 延迟时间

transition（速写）： property duration delay timing；

16.4变形

transform-orgin:
centertopleft
transform：
- scale(2) 整体放大
- rotateZ(默认)/Y/Z(45deg) 旋转
- skew(45deg) 倾斜
- translateX/Y(200px) 移动

十七、响应式布局

17.1pc端

类似于腾讯视频
容器的宽度随着屏幕的分辨率大小的改变而改变
类似于mobile【纯响应式】（与mobile兼容）
完全兼容移动的设备

17.2mobile端

手机型号不同，宽度不同

不要给容器【块元素】指定宽度，让他默认为100%
子元素【列元素】宽度使用相对单位，百分数

17.3媒体查询技术

@media screen{

}

.products { 
    width: 990px; 
    margin: 0 auto; 
} 
.products > ul > li { 
    width: 19.5%; 
    height: 100px; 
    background-color: rebeccapurple; 
} 
@media screen and (min-width: 1300px) { 
    .prodmucts { 
        width: 1200px; 
    } 
    .products > ul > li { 
        width: 16.5%; 
    }  
} 

@media screen and (min-width: 1500px) { 
    .products { 
        width: 1400px; 
    } 
    .products > ul > li { 
        width: 14%; 
    } 
}