一、在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援用

九、实体

&nbsp; 空格

&lt; 小于

&gt; 大于

十、其余规定

  • 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%;     } }