CSS3主要内容

CSS3主要内容

一、CSS选择器

​ CSS3选择器规范地址： https://www.w3.org/TR/2011/RE...

​ CSS3最新选择器规范: https://www.w3.org/TR/selectors

​

!---问题---!

1.CSS的全称是什么？

Cascading Style Sheets

2.样式表的组成：

CSS选择器 + CSS声明块：（一个个CSS声明：属性名+属性值）

3.浏览器读取编译CSS的顺序？

CSS选择器的解析顺序： 从右往左 。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

1.基本选择器 * , html , . , # , 空格 , > , + , ~ , ,

• （1）通配符选择器： * {}
• （2）元素选择器： body {} 任何一个HTML元素
• （3）类选择器： . .list {}
• （4）ID选择器： # #list {}
• （5）后代选择器：空格 .list li{}
• （6）选择器的分组：用逗号 , 隔开各个选择器
  h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符
• 基本选择器扩展

• • （7）子元素选择器： > ，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。

    #wrap > .inner {color: pink;}

• • （8）相邻兄弟选择器： + ，它只会匹配紧跟着的兄弟元素。

    #wrap #first + .inner {color: #f00;}

• • （9）通用兄弟选择器： ~ ，它会匹配所有的兄弟元素(不需要紧跟)。

    #wrap #first ~ div { border: 1px solid;}

2.属性选择器

（1） 存在 和 值 属性选择器

​ [attr] ：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

​ [attr=val] ：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

​ [attr~=val] ：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

​

​（2） 子串值属性选择器

​ [attr|=val] : 选择 attr 属性的值是 val （包括 val ）或以 val- 开头的元素。

​ [attr^=val] : 选择 attr 属性的值以 val 开头（包括 val ）的元素。

​ [attr$=val] : 选择 attr 属性的值以 val 结尾（包括 val ）的元素。

​ [attr*=val] : 选择 attr 属性的值中包含字符串 val 的元素。

3.伪类与伪元素选择器

（1）链接伪类： 注意 :link ， :visited ， :target 是作用于链接元素的！

​ :link ： 表示作为超链接，并指向一个未访问的地址的所有锚 。

​ :visited ：表示作为超链接，并指向一个已访问的地址的所有锚 。

​ :target ： 代表一个特殊的元素，它的 id 是 URI 的片段标识符 。

（3）表单相关伪类

​ :enabled ： 匹配可编辑的表单

​ :disable ： 匹配被禁用的表单

​ :checked ： 匹配被选中的表单

​ :focus ： 匹配获焦的表单

​

（4）结构性伪类

​ index 的值从 1 开始计数！！！！

​ index 可以为变量 n (只能是 n )

​ index 可以为 even 、 odd

​ #wrap ele:nth-child(index) ：表示匹配 #wrap 中第 index 的子元素 这个子元素必须是 ele

​ #wrap ele:nth-of-type(index) ：表示匹配 #wrap 中第 index 的 ele 子元素

​除此之外 :nth-child 和 :nth-of-type 有一个很重要的区别！！ :nth-of-type 以元素为中心！！！

​

• :nth-child(index) 系列

  :first-child
  :last-child
  :nth-last-child(index)
  :only-child
  

• :nth-of-type(index) 系列

  :first-of-type
  :last-of-type
  :nth-last-type(index)
  :only-of-type
  

（5）伪元素

::after ::before ::firstLetter ::firstLine ::selection ​

4. CSS 声明的优先级

（1）选择器的特殊性

选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0

一个选择器的具体特殊性如下确定：

• 1.对于选择器中给定的ID属性值，加 0,1,0,0
• 2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
• 3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
• 4.通配符选择器的特殊性为0,0,0,0
• 5.结合符对选择器特殊性没有一点贡献
• 6.内联声明的特殊性都是1,0,0,0
• 7.继承没有特殊性

特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)

选择器的特殊性最终都会授予给其对应的声明

如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意区分：id选择器和属性选择器

div[id="test"] （0,0,1,1） 和 #test （0,1,0,0）

（2）重要声明

!important
!important
!important
!important

（3）继承

（4）来源

• CSS样式的来源大致有三种：

  • 创作人员
  • 读者
  • 用户代理

• 权重：

  • 读者的重要声明
  • 创作人员的重要声明
  • 创作人员的正常声明
  • 读者的正常声明
  • 用户代理的声明

（5）层叠

• 1.找出所有相关的规则，这些规则都包含一个选择器。

• 2.计算声明的优先级

  • 先按来源排序
  • 再按选择器的特殊性排序
  • 最终按顺序

二、自定义字体

• @font-face ：允许网页开发者为其网页指定在线字体。
• 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。
• font-family ：所指定的字体名字将会被用于 font 或 font-family 属性。
• src ：字体资源。

注意:不能在一个 CSS 选择器中定义 @font-face 。

三、新的UI方案

1.文本新增样式

（1） opacity

opacity
1.0

（2）新增颜色样式 rgba

（3）文字阴影( text-shadow )

text-shadow
none 

（4）文字描边( -webkit-text-stroke )

• 只有 webkit 内核才支持： -webkit-text-stroke （准确的来说不能算是 CSS3 的东西，但需要知道）。

（5）文字排版

• direction :控制文字的方向，一定要配合 unicode-bidi:bidi-override; 来使用。

• text-overflow :确定如何向用户发出未显示的溢出内容信号。

  • 它可以被剪切，
  • 显示一个省略号（'...'）

2.盒模型新增样式

（1）盒模型阴影 box-shadow

• box-shadow
  以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text-shadows 规则相同(第一个阴影在最上面)。
• 默认值: none ， 不可继承。

（2）倒影 -webkit-box-reflect

• -webkit-box-reflect 设置元素的倒影（准确的来说不能算是 CSS3 的东西，但需要知道）。
• 默认值: none ，不可继承。

（3） resize

• resize CSS 属性允许你控制一个元素的可调整大小性。
  （一定要配合 overflow：auto 使用）
• 默认值： none ， 不可继承。

（4） box-sizing

box-sizing
content-box

3.新增UI样式

（1）圆角 border-radius

border-radius
0

（2）边框图片 border-image

• border-image ： CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。

• 默认值： 不可继承

  border-image-source: none
  border-image-slice: 100%
  border-image-width: 1
  border-image-outset: none
  border-image-repeat: stretc
  

（3）背景 background

（4）渐变

• CSS 渐变 是在 CSS3 Image Module 中新增加的图片类型；使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

• 浏览器支持两种类型的渐变：

  linear-gradient
  radial-gradient
  

四、布局扩展

1. flex 布局

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

弹性盒模型，分老版与新版：

老版本的我们通常称之为`box `  
新版本的我们通常称之为`flex`

主轴 与 侧轴

由`flex-direction`/`-webkit-box-orient`确定

有了新版本后，为什么还需要老版本？（新版本比老版本要强大的很多）

很多移动端浏览器内核版本都超低。

（1）老版

容器设置 display 为 webkit-box

（注意:项目永远是在主轴上排列的）

• -webkit-box-orient 属性本质上确定了主轴是哪一根

  horizontal
  vertical
  

（注意:项目永远是沿着主轴的正方向排列的）

• -webkit-box-direction 属性本质上改变了主轴的方向

  -webkit-box-direction: normal;
  -webkit-box-direction: reverse;
  

• 富裕空间的管理（主轴）

  • start
  • end
  • center
  • justify
  • -webkit-box-pack:start; 不会给项目区分配空间，只是确定富裕空间的位置

• 富裕空间的管理（侧轴）

  • start
  • end
  • center
  • -webkit-box-align:center; 不会给项目区分配空间，只是确定富裕空间的位置

• 弹性空间的管理：将富裕空间按比例分配到各个项目上

  -webkit-box-flex: 1;
  0 
  

（2）新版

• 容器的布局方向

  flex-direction: row;
  flex-direction: column;
  

• 容器的排列方向

  flex-direction:row-reverse;
  flex-direction:column-reverse;
  

• 更强大的富裕空间的管理（主轴）

  justify-content: flex-start;
  flex-start
  flex-end
  center
  space-between
  space-around(box 没有的)
  

• 更强大的富裕空间的管理（侧轴）

  align-items: stretch;
  flex-start
  flex-end
  center
  baseline(box 没有的)
  stretch(box 没有的)
  

• 弹性空间的管理

  • flex-grow: 1

2.新版 flex 布局详解

https://developer.mozilla.org...

3.响应式布局核心：媒体查询选择器

CSS3媒体查询是响应式方案核心。

（1）媒体类型

all
braille
embossed
print
projection
screen
speech
tty
tv

（2）媒体特性（媒体属性）

width
height
min-width
max-width
device-width
device-pixel-ratio
orientation：portrait
orientation：landscape

（3）操作符、关键字

• and ： 连接媒体特性

  • 连接媒体属性 、连接媒体类型
  • 对于所有的连接选项都要匹配成功才能应用规则

• or : 和 and 相似

  • 对于所有的连接选项只要匹配成功一个就能应用规则
• not ： 排除指定媒体类型

• only ： 指定某种特定的媒体类型

  • 防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式。

@media only screen and (min-width:800px ){
        规则；
        规则
}

@media  screen and (min-width:800px ){

        规则；
        规则
}

• • 在老款的浏览器下
  • @media only ---> 因为没有 only 这种设备，规则被忽略。
  • @media screen ---> 因为有 screen 这种设备而且老浏览器会忽略带媒体属性的查询。
• • 建议在每次书写 media query 的时候带上 only 。

4.多列布局（分栏布局）

（1）栏目宽度

• column-width 指定每一栏的宽度（这是多列布局的第一种分法）

（2）栏目列数

• column-count 指定要多少栏（这是多列布局的第二种分法）

（3）栏目距离

• column-gap

（4）栏目间隔线

• column-rule

过渡

2d/3d变形

动画