CSS新增

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

什么是 CSS3

• CSS3是CSS（层叠样式表）技术的升级版本，
  于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，
  主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

• CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
  浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，
  CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性
  但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂

渐进增强和优雅降级

• 渐进增强（Progressive Enhancement）：
  一开始就针对低版本浏览器进行构建页面，完成基本的功能，
  然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
  渐进增强相当于向上兼容

• 优雅降级（Graceful Degradation）：
  一开始就构建站点的完整功能，然后针对浏览器测试和修复
  比如一开始使用 CSS3 的特性构建了一个应用
  然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
  优雅降级相当于向下兼容

• 区别
  优雅降级是从复杂的现状开始，并试图减少用户体验的供给

  而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

• 降级（功能衰减）意味着往回看

• 而渐进增强则意味着朝前看，同时保证其根基处于安全地带

CSS3 中的选择器

1. 层级选择器
   使用大于号（>）表示 E ~ F
   子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
   使用波浪线（+）表示 E + F
   相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
   使用波浪线（~）表示 E ~ F
   相邻选择器类似，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

2. 属性选择器
   E[attr]：只使用属性名，但没有确定任何属性值
   E[attr="value"]：指定属性名和属性值(值完整)
   E[attr~="value"]：指定属性名，并且具有属性值，
   此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
   E[attr^="value"]：属性值是以value开头的(一部分也可以)
   E[attr$="value"]：属性值是以value结束的(一部分也可以)
   E[attr*="value"]：属性值中包含了value(一部分也可以)
   E[attr|="value"]：属性值是value或者以“value-”开头的值

3. 结构伪类选择器
   (el):first-child 匹配属于任意元素的第一个子元素的 el 元素
   (el):first-of-type 选择父元素中的第一个 el 元素
   (el):last-child 选择所有 el 元素的最后一个子元素
   (el):last-of-type 选择父元素中最后一个 el 元素
   (el):empty 匹配没有子元素（包括文本节点）的 el 元素
   (el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素
   (el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素
   (el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素
   (el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素
   odd even numN
   (el):only-child 选择所有仅有一个子元素，并且子元素是 el 元素
   (el):only-of-type 选择所有仅有一个子元素中为 el 的元素

4. 否定伪类选择器
   :not(el) 选择所有 el 以外的元素

5. 状态（表单元素）伪类选择器
   :focus 选择元素输入后具有焦点
   :enabled 匹配每个已启用的元素
   :disabled 匹配每个被禁用的元素
   :checked 匹配每个已被选中的 元素
   :required 选择有"required"属性指定的元素属性
   :optional 选择没有"required"的元素属性
   :read-only 选择只读属性的元素属性
   :read-write 选择没有只读属性的元素属性
   :valid 选择所有有效值的属性
   :invalid 在表单元素中的值是非法时设置指定样式
   :in-range 用于标签的值在指定区间值时显示的样式
   :out-of-range 选择指定范围以外的值的元素属性

6. 目标伪类选择器
   E:target
   用来匹配文档中url中某个标志符的目标元素
   url中的标志通常会包含一个#，后面带有一个标志符名称

target 实现 tab 切换的案例

CSS3 中的背景

• background-clip 规定背景的绘制区域
  content-box
padding-box
border-box

• background-origin 规定背景图片的定位区域
  content-box
padding-box
border-box

• background-size 规定背景图片的尺寸 !!!
  length 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
  percentage 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
  cover 完全覆盖背景定位区域的最小尺寸
  contain 完全覆盖背景定位区域的最大尺寸

• 多背景
  background:url(),url();

CSS3 中的边框

• border-radius 设置 圆角边框
  每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
  如果省略左下角，右上角是相同的
  如果省略右下角，左上角是相同的
  如果省略右上角，左上角是相同的

  border-radius: 1-4 length|% / 1-4 length|%;

  按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径
  但是通常我们很少写右边的参数，那就是默认右边等于左边的值
  div { border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
  绘制网站 —— 直通车

• border-image
border-image-source 路径
  border-image-slice 图片边框向内偏移 没有单位 一个数值
  border-image-width 图像边界的宽度
  border-image-repeat 平铺(repeat)铺满(round)拉伸(stretch)
  border-image-outset 边框图像区域超出边框的量

border-image: source slice width outset repeat|initial|inherit;

• box-shadow 设置一个或多个下拉阴影的框
  h-shadow 必需的。水平阴影的位置。允许负值
  v-shadow 必需的。垂直阴影的位置。允许负值
  blur 可选。模糊距离
  spread 可选。阴影的大小
  color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

box-shadow: h-shadow v-shadow blur spread color inset;

多个

box-shadow: h-shadow v-shadow blur spread color inset，h-shadow v-shadow blur spread color inset;

/* 像素点阴影---- */

 filter: drop-shadow(4px 4px 1px #ccc);

CSS3 中的文本效果

• text-shadow 向文本添加阴影
  h-shadow 必需。水平阴影的位置。允许负值
  v-shadow 必需。垂直阴影的位置。允许负值
  blur 可选。模糊的距离
  color 可选。阴影的颜色。参阅 CSS 颜色值

text-shadow: h-shadow v-shadow blur color;

• word-break 规定非中日韩文本的换行规则

  normal 使用浏览器默认的换行规则
  break-all 允许在单词内换行
  keep-all 只能在半角空格或连字符处换行

word-break: normal|break-all|keep-all;

• word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

  normal 只在允许的断字点换行（浏览器保持默认处理）
  break-word 在长单词或 URL 地址内部进行换行

word-wrap: normal|break-word;

• text-overflow 规定当文本溢出包含元素时发生的事情
  clip 修剪文本
  ellipsis 显示省略符号来代表被修剪的文本
  string 使用给定的字符串来代表被修剪的文本

text-overflow: clip|ellipsis|string;

CSS3 中的字体 @font-face

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则

font-family 必需，规定字体的名称
src URL 必需，定义字体文件的 URL
font-stretch 可选，定义如何拉伸字体
font-style 可选，定义字体的样式
font-weight 可选，定义字体的粗细。
unicode-range 可选，定义字体支持的 UNICODE 字符范围

<style>@font-face{font-family: myFirstFont;src: url(sansation_light.woff);	/* IE9+ */}div{font-family: myFirstFont;}
</style>

阿里巴巴矢量图标库 iconfont —— 直通车
选择class方式，按说明引入字体文件