前言

CSS3是CSS（层叠样式表）技术的升级版本, 对盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块进行了规范, 使表现层结果更加可控

基本概念回顾

• 样式表由规则组成
• 规则由选择器与声明块组成
• 声明由CSS属性与键值对组成
• CSS选择器渲染是从右向左寻找

选择器

• 基本选择器

  1. 通配符 *
  2. id选择器 #
  3. 类选择器 .
  4. 后代选择器 空格
  5. 元素选择器 元素名
  6. 分组 ,(结合符)

• 基本选择器扩展

  1. 子元素选择器 >
  2. 相邻兄弟选择器 +
  3. 通用兄弟选择器 ~

• 属性选择器

  1. 存在及值选择器

     [attr] 选中存在attr属性的元素

     [attr=val] 选中值为val的属性

     [attr~=val] 选中值中以空格分隔时带有val属性的元素

  2. 子串值属性选择器

     [attr|=val] 选中值为val或者以val-开头的元素

     [attr^=val] 选中以val开头的元素

     [attr$=val] 选中以val结尾的元素

     [attr*=val] 选中值包含有val值的元素

• 伪类选择器

  1. 链接伪类 只能给链接标签a使用

     :link

     :visited 由于隐私问题, 这个伪类只能控制color, background-color, border-color

     :target 点击a元素, a元素的锚点充当id选择器来选中的某个元素, 锚点会在URL中显示出来

  2. 动态伪类

     :hover

     :active

  3. 表单伪类

     :enable

     :disable

     :checked

     :focus

  4. 结构性伪类

     • index从1开始

     1. :nth-child(index)

        • 例子：

          #wrap li:nth-child(1) 找到#wrap下第一个子元素且这个子元素必须为li

          li:nth-child(1) 找到所有标签的第一个子元素且这个子元素必须为li

        • 延伸

          :first-child

          :last-child

          :nth-last-child

          :only-child 相当于:first-child:last-child

     2. :nth-of-type(index)

        • 例子：

          #wrap li:nth-of-type(1) 找到#wrap下第一个li子元素

          li:nth-of-type(1), 找到所有标签的第一个li子元素

          重要问题：这个属性以元素为中心, 当父元素中有多个不同子元素, 此选择器可能同时选中不同元素

          #wrap .inner:nth-of-type(1), 找到#wrap下各种元素中的第一个子元素且类为inner的而不是找到#wrap下第一个子元素且类为inner的

        • 延伸

        :first-of-type

        :last-of-type

        :nth-last-of-type

        :only-of-type 相当于 :first-of-type:last-of-type

     3. :empty

        不能含有任何内容, 包括空格

  5. 伪元素选择器, 可以使用单冒号或者双冒号,位于dom树之外, 是由css进行创建

     ::after

     ::before

     ::firstletter 第一个字母

     ::firstline 第一行

     ::selection 光标选中的部分

自定义字体与字体图标

CSS3提供, 不能放在声明块中

@font-face{
    font-family: "字体名",
    src: url(路径)
}

上传矢量图到icomoon转换成字体demo再根据demo修改自己的页面 由于字体图标属于font, 当想修改样式时通过修改font相关的样式来修改字体图标

新增UI样式

1. opacity

   性能较visibility高, 不继承但是子元素会应用透明效果

2. rgba

   第四个参数是设置opacity值, 可以省略0, 例子rgba(0,0,0,.5)

3. text-shadow

   默认值为none, 不可继承

   可选值：[(x偏移量, y偏移量, 模糊程度, 颜色)]{1,}

   可以添加多层阴影

   • 浮雕文字

     字体设为白色, 使用字体阴影

   • 模糊字体

     使用text-shadow的第四个参数

   • 模糊图片

     使用浏览器过滤器filter: flur(10px)来对指定元素模糊(不是对元素背景)

4. transition

   给元素添加指定时长的动画效果, 参数为s

5. direction

   设置文字呈现方向

   可选值：ltr, rtl等, 配合unicode-bidi:bidi-override

6. -webkit-text-stroke 非CSS3内容, 由浏览器自主实现

   文字描边功能

   -webkit-text-stroke: <length> <color>;

新增盒模型样式

1. box-shadow

   默认值为none, 不可继承

   可选值：[(inset/outset, x偏移量, y偏移量, 模糊程度, 模糊面积, 颜色)]{1,}

2. -webkit-box-reflict 非CSS3内容, 由浏览器自主实现

   box倒影

   *可选值：-webkit-box-reflict: <方向> <间距>*

   第三个参数可以设置为渐变ilnear-gradient/radial-gradient

3. resize

   控制块元素伸缩

   常用可选值：vertical, horizontal, both

4. box-sizing

   border-box 使盒模型在设置宽高时会自动调整内容区使宽高包括内边距与边框

   content-box 默认值

新增UI样式

1. border-radius

   默认值0, 不可继承

   百分数水平参照于盒模型的宽度, 垂直参照盒模型高度, 最高值为50%, 超出将被设置为50%, 在IOS5或者安卓4之前不能使用, 尽量不要使用

   • 可选值:

     当没有/时, 内部画的圆按照参数不同分别按顺序应用于左上, 右上, 右下, 左下

     radius

     当有/时, 内部画的圆对于4个角来说X轴半径固定, Y轴半径按照参数不同分别按顺序应用于左上, 右上, 右下, 左下

     (first radius)/radius

2. border-image-source

   设置边框图片, 参数为url()

   必须配合border-width与border-style使用, 但是border-style的效果不会生效只显示图片

   配合border-image-slice来决定图片在边框的分布, 对图片按照上右下左的顺序根据设定值规定的距离进行切割再放置在边框上

   例如border-image-slice:33.3333%,就是对这个图片距离上右下左33.3333%的地方切割放置在边框上, 当加上fill值时才将图片中心内容当做background-imgage给图填充否则不填充

   浏览器会将切割好的部分平均分成三部分放置在边框角和边框上, 边框上的图片默认会被拉伸, 由border-image-repeat的值决定

   • border-image-repeat

     1.repeat 边框上的部分从边框中心开始平铺, 两边可能会被截断 2.round 平铺图像 当不能整数次平铺时, 根据情况放大或缩小图像。 3.stretch 拉伸 4.space 平铺图像 当不能整数次平铺时, 会用空白间隙填充在图像周围（不会放大或缩小图像）

3. border-iamge-outset

   使边框图片向外扩张, 不能为负值

4. CSS3背景样式

   1. background-origin

      决定背景从哪里开始绘制,在没设置no-repeat或者clip的情况下其余部分会被平铺占满

      border-box

      padding-box为默认值

      content-box

   2. background-clip

      决定背景从哪里剪去

      border-box为默认值

      padding-box

      content-box

   3. background-size

      修改图片大小

      默认为auto

      • 固定值, px, em, xm等
      • 百分比, 背景盒模型的百分比, 根据background-origin值决定
      • contain 使图片在不改变比例的情况下全部被父元素包含
      • cover 使图片在不改变比例的情况下将父元素填充满

5. 线性渐变(应用给background-image)

   • background-image: linear-gradient(to right, red,yello,green) (颜色参数可以是rgba进行透明度渐变)

     第一个值可以是角度N deg, 正上方为0, 顺时针为正, 逆时针为负

     从第二个颜色参数起在每个颜色后可以添加百分比或者固定值表示在这个值后的颜色就是自己写定的颜色, 第一个颜色参数是指这个值前的颜色是自己写定的颜色

   • background-image: repeating-linear-gradient(toright, red 100px,yello 200px)

     从第100px开始以red开头渐变, 渐变到200px以yello结束, 剩余像素采用平铺的方式

6. 径向渐变

   background-image: radial-gradient([closest-side|farthest-side|closest-corner|farthest-corner][circle|ellipse][at 渐变圆心X轴的位置, 渐变圆心Y轴的位置], red,yello,green);

   (第一个参数默认为farthest-corner ellipse)

过渡

1. transition

   存在简写形式, 可以使CSS在可动画化属性发生变化的过程时按照指定时间内产生渐变动画

   给元素增加此属性后即便是js改变的属性也会发生动画

2. transition-property

   默认值为all, 指定需要产生动画效果的属性, 可以指定多个属性

3. transition-duration

   指定动画过程的时间, 单位可以是s与ms, 默认为0s, 不接受负值, 必须加单位 可以指定多个参数, 当此参数数量少于指定的属性时, 整个时长列表会重复放置

4. transition-timing-function

   • ease 先快后慢, 默认值

   • linear 线性

   • ease-in 加速

   • ease-out 减速

   • ease-in-out 先加速后减速, 速度比ease快

   • cubic-bezier 贝塞尔曲线

   • steps(num, [start|end]) 默认为end, start意思为触发此状态时立刻前进一步状态, end指触发此状态后等待一个间隔再前进一步状态

     可以有多个参数, 当参数数量少于property时, 不足的部分使用默认值

5. transition-delay

   表示延迟时间, 规则与duration一致

• 过渡完成事件

  • transitioned, 只能在dom2事件中触发(addEventListener)

    • transition难点1：

      css属性存储在内存中会快于浏览器渲染

    • transition难点2：

      transition在首次渲染未结束前是不会触发的

      • css渲染慢于同步下的js引擎, 此时会导致许多可能的预期外影响

        在js中直接设置元素样式, 此时不会触发动画

        在js中先设置alert()后设置元素样式, 会触发动画, 因为alert的异步特点 在js中将样式写在onload的事件函数中会触发动画

        在js中将两个不同样式同步地写在onload事件函数中只会触发第二个样式的动画

        使用settimeout等待css渲染完后才可以触发动画

        先修改样式再添加duration仍然会触发动画

  • transition简写

    严格遵循书写顺序, 按照duration, property, timing-function, delay的顺序书写

    可以用逗号分隔不同的动画效果, 在遇到第一个可以解析为时间的值时会赋值给duration

2D变换

• transform 只支持块级元素

  rotate 旋转, 单位为deg

  translate 平移, 可设置单值, 与X轴平移相同

  translateX

  translateY

  skew 倾斜, 单位为deg, 可设置单值, 与X轴倾斜相同

  skewX

  skewY

  scale 缩放, 可设置单值, 使X轴与Y轴按同比例缩放

  scaleX

  scaleY

• 基点的变换

  transform-origin 设置X轴Y轴上的基点位置, 百分比是基于元素的宽高 对除translate外的属性才产生影响

  2D变换中所有的变换都是基于矩阵运算

• 变换组合

  在变换组合时矩阵运算方式是从右向左的, 感官上可认为坐标系按照从左向右的顺序发生了变换

  transition难点3

  在绝大多数变换组合进行切换时, 如果两次变换的数量, 顺序不同时, 不会触发过渡动画 因此在涉及到变换组合内的变换改变的时候要注意数量和顺序问题

  transition难点4

  过渡变换只关注变换起始状态与最终状态, 无法控制中间状态

3D变换

• perspective 景深

  景深可以理解为肉眼距离显示屏的距离, 景深越大, 变换效果越不明显

  可以使3D效果产生近大远小的功能, 不可继承, 但是效果是作用给后代元素

• transform: perspective

  写在需要作用的元素中, 但必须放在tranform所有变换的首位, 其他位置会使变换失效 灭点

  控制视图的焦点即景深

  景深越大灭点越远, 元素变形更小

• perspective-origin(x, y, z) 景深基点

  控制视角的位置, 默认值为50% 50% 50%, 参照border-box模型, 常与perspective结合使用

• transform-style

  preserve-3D, 常用值

  none, 默认值

  营造有层级的3d舞台, 不可继承属性, 但只作用于子元素

景深叠加

祖先元素增加多个景深会产生景深叠加, 由于叠加规则不可控因此要避免

• backface-visibility

  • visible
  • hidden 隐藏背面
• rotate3D(x,y,z,angle) x, y, z的值只有0,1的区别, 大于1没有影响
• rotateX()
• rotateY()
• rotateZ()
• translate3D(translateX,translateY,translateY)

• scaleZ()

  单独使用时没有意义, 组合使用会影响到Z坐标轴

• 难点

  当对某个元素进行变换时, 这个元素结构内部的所有元素都会发生变换, 而不仅仅只有设置了变换的这个元素会产生变换效果

动画

1. 动画内属性

   • animation-name

     • 指定关键帧的名字

   • 关键帧基本写法：

       @keyframes name{
           from{}
           to{}
       }
     

   • animation-duration

     • 指定动画周期, 无单位与负值无效

   • animation-timing-function

     • 指定关键帧周期的运动方式

     • *语法: steps(step, end默认值

       start)*

       设置end时动画的起始位置会占用一步, 否则不会, 即start看不见第一帧, end看不见最后一帧

   • animation-direction

     • 反转关键帧执行顺序, 使顺序为to-from, 同时也反转动画运动方式, 即timing-function
     • normal 默认值
     • reverse 反转
     • alternate 播放顺序为from-to然后to-from然后循环
     • alternate-reverse 播放顺序与alternate相反

2. 动画外属性

   • animation-delay

     • 指定延迟时间

   • animation-literation-count

     只影响动画内的属性

     • infinite 无限次数
     • num

   • animation-fill-mode

     管理元素在动画外的状态

     • none 默认值, 动画外的属性保持在动画之前
     • backwords from之前的状态保持的和from的状态保持一致
     • forwords to之后的状态与to的状态保持一致
     • both 包含以上两种情况

   • animation-play-state

     控制动画是否暂停或运动

     • paused
     • running 默认值

   • 关键帧进阶

       @keyframes name{
           from(0%){
     
           }
           百分比{
     
           }
           百分比{
     
           }
           百分比{
     
           }
           to(100%){
                     
           }
       }
     

     百分比为duration时间的百分比, 整个关键帧中的百分比为一个动画周期, 两个百分比算作一个关键帧周期

   • 简写属性

     • animation

       与transition类似, 前两个能被解析成时间的参数被看做duration与delay

flex布局

常用于移动端

安卓4.3及之前版本使用需要-webkit-flex

更老的版本使用flex的老版本称为box, 使用时加上-webkit-前置

• 用法

  **display: flex

  -webkit-flex

  -webkit-box**

flex布局分为主轴与侧轴, 方向为向右与向下, 整体又分为容器与项目, 容器属性作用于容器, 项目属性作用于项目

表格中没有写属性的表示老版本不存在此属性

• 老版本：

  start 表示富裕空间在右边(x轴)或下边(y轴)

  end 表示富裕空间在左边(x轴)或上边(y轴)

  center 表示富裕空间在两边

  justify 表示富裕空间在项目之间

  老版本不能控制侧轴方向, 因为老版本无法在侧轴堆砌, 想要在侧轴有堆砌效果必须使用多个容器

• 新版本：

  flex-start 表示富裕空间在按轴方向的后面

  flex-end 表示富裕空间在按轴方向的前面

  center 表示富裕空间在两边

  space-between 表示富裕空间在所有项目的最中间

  space-around 表示富裕空间在任意两个项目之间

  baseline 基线对齐

  stretch 等长/高布局, 项目不能有高度

  align-content中的stretch 侧轴的等长/高布局, 富裕空间会按照1:1的比例填充给每一个项目

• 放大的规则

  将主轴上的富裕空间按照设定的比例分配个每个项目上, 参数为纯数字

  • 计算规则

    1. 可用空间 = 容器大小 - 所有相邻项目的flex-basis总和(没有设置时默认为height(y轴), width(x轴))

    2. 可扩展空间 = (可用空间) / 所有相邻项目的flex-grow的总和

    3. 每个项目伸长后大小 = 每个项目自身的flex-basis(没有设置时默认为height(y轴), width(x轴)) + 可扩展空间 * 每个项目自身的flex-grow

    在老版本中没有flex-basis因此此值就是每个项目自己的width / height

  老版本可以控制伸缩, 伸缩的计算规则都与新版本的flex-grow相同

• 缩小的计算规则

  1. 需缩减大小 = 容器大小 - 所有相邻项目的flex-basis总和(没有设置时默认为height(y轴), width(x轴))

  2. 总权重 = 每一个项目flex-basis * flex-shrink 之后求和

  3. 每个项目的权重 = 每一个项目flex-basis * flex-shrink / 总权重

  4. 每个项目缩减后大小 = 每一个项目flex-basis - 需缩减大小 * 每个项目的权重

  在flex-wrap值不是nowrap时, 此属性失效

  flex-grow与flex-shrink在计算时的区别在于后者要将flex-basis考虑进权重

flex练习

• flex应用

  1. 等分布局

     flex-basis: 0

     flex-grow: 1

     flex-shrink: 1

     • 简写属性

       flex: 1

       等同于上面三行代码

响应式布局核心

• CSS2媒体查询

    <link rel="stylesheet" type="text/css" href="index.css" media="screen and (min-width: 400px)"/>
  

  指定媒体才引入相应css代码

• CSS3媒体查询

    @media 媒体类型 [关键字 媒体属性: value]{0,} {
  
    }
  
    @media (媒体属性: value){0,} {
  
    }
  

  对声明特殊性没有任何贡献

  • 媒体类型

    screen|print|all(默认值)

  • 媒体属性(常用)

    width 可添加min或max前缀, 当为min时表示大于某个值有效

    height 可添加min或max前缀, 当为max时表示小于某个值有效

    orientation 指定显示的屏幕, portrait表示竖屏, landscape表示横屏

  • 关键字

    and 代表与, 一般用来连接媒体类型与媒体属性

    only 老版本浏览器不支持媒体查询会使媒体查询的样式生效, 因此添加后会使老浏览器无法识别而不执行这段查询

    逗号, 代表或的意思, 逗号前为一组规则, 后为一组规则, 可以有3组及以上规则

    not 同样在老浏览器中无法识别且效果是对媒体查询取反

• 多列布局

  column-width 指定一列宽度, 由于文字间隔等原因一般会比width / column-width的列数少1

  column-count 分成指定列数

  column-gap 指定两列之间间距

  column-rule 指定每列间的分隔线样式

题外话: 前端规范

• 了解前端规范有助于对各个API兼容性及功能有个大概认识

ECMA262 JS基础规范

DOM0 浏览器厂商自主实现, 非W3C规范

DOM1 开始成为W3C规范, 专注于html与XML文档

DOM2 增加了样式表对象模型, addEventListener等

DOM3 对DOM2增加了内容模型(DTD,schemas)和文档验证

• Previous
  CSS 基本概念与使用
• Next
  CSS 理论进阶之布局