CSS3

历史

CSS的官方定义是，指定文档该如何呈现给用户的一门语言，不是编程语言，只是层叠样式表

关于CSS3：

它是CSS2.1的升级版本，在原有基础上增加了很多功能，相应的语法，模块，且所有主流浏览器对它的兼容性更加友好, IE10完美支持，所有手机端的浏览器都在用响应式布局，全面支持CSS3

关于HTML:

1990年，第一图灵奖获得者Tim Berners-Lee发明了超文本标记语言，作为结构化标记语言，描述文档的各个部分

1993年，马克·安德森开发了互联网历史上第一个获普遍使用和能够显示图片的网页浏览器，大量的社会资源涌入并对标记语言元素有更细致的要求，刚开始时，没有相应的规范，可以大量使用标签定义字体大小，颜色，层层嵌套，导致页面代码过多时，结构性非常差，代码冗余大，对搜索引擎不友好

为了让网页更简单，代码更清晰，解构更合理，又可以展示更优质的网页效果，CSS的出现解决了当时的这些需求

制定组织：

  • Adobe System
  • Apple
  • Google
  • IBM
  • Mozilla
  • Microsoft
  • Sun

兼容性：

浏览器厂商以前就一直在实施CSS3，虽然它还未成为真正的标准，但却提供了针对浏览器的前缀：

浏览器厂商 写法
Chrome（谷歌浏览器） -webkit-
Safari（苹果浏览器） -webkit-
Firefox（火狐浏览器） -moz-
lE（IE浏览器） -ms-
Opera（欧朋浏览器） -O-

概念

文档：

一个信息集合，非仅仅是一个文件

用户代理(UA)：

文档呈现给用户的程序，如浏览器

版本

  • 1996年12月：CSS 1.0, 不用标签而改用样式去定义文字
  • 1998年5月：CSS 2.0, 实现层叠样式
  • 2004年2月：CSS 2.1，基于2.0, 废弃不兼容的属性如文本阴影
  • 2010年：CSS 3.0，向后兼容，被拆分为各个小模块，对新功能进行模块新增

新增模块

每一个模块都有于CSS2中额外增加的功能，以及向后兼容

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特性
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

选择器

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素

  1. <ul>
  2.   <li><a href="#internal">Internal link</a></li>
  3.   <li><a href="http://example.com">Example link</a></li>
  4.   <li><a href="#InSensitive">Insensitive internal link</a></li>
  5.   <li><a href="http://example.org">Example org link</a></li>
  6. </ul>
  1. /* 以 "#" 字符串开头的页面本地链接 */
  2. a[href^="#"] {
  3.   background-color: gold;
  4. }
  6. /* 包含 "example" 字符串的链接 */
  7. a[href*="example"] {
  8.   background-color: silver;
  9. }
  11. /* 包含 "insensitive" 的链接，不区分大小写 */
  12. a[href*="insensitive" i] {
  13.   color: cyan;
  14. }
  16. /* 以 ".org" 字符串结尾的链接 */
  17. a[href$=".org"] {
  18.   color: red;
  19. }
  21. /* 存在 class 属性并且属性值包含以空格分隔的"active"的<a>元素 */
  22. li[class~="active"] a {
  23.   color: orange;
  24. }

伪类选择器

  1. //权重比html{}更高
  2. :root{ background-color: orange; }
  4. //匹配不符合一组选择器的元素
  5. :not(p){ background-color: orange; }
  7. //匹配没有子元素的元素 子元素只可以是元素节点或文本（包括空格）
  8. div:empty { background: lime; }
  10. //代表一个唯一的页面元素 (目标元素)，其id 与当前 URL 片段匹配
  11. //http://www.example.com/index.html#section2
  12. :target { border: 2px solid black; }

UI元素伪类选择器

  1. //划过之后的状态
  2. :hover{}
  4. //聚集之后的状态
  5. :focus{}
  7. //元素激活 鼠标按需没松开
  8. :active{}
  10. //任何被启用的（enabled）元素
  11. input:enable{}
  13. //表示任何被禁用的元素
  14. input:disable{}
  16. //表示元素不可被用户编辑的状态（如锁定的文本输入框）
  17. input:read-only{}
  19. //表示一组相关元素中的默认表单元素
  20. input:default{}
  22. //表示任何处于选中状态的radio(<input type="radio">), checkbox
  23. input:checked{}
  25. //表示状态不确定的表单元素
  26. input:indeterminate{}

伪元素选择器

  1. //会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容
  2. p::first-letter { font-size: 130%; }
  4. //选中在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小
  5. ::first-line{ background-color: cyan; }
  7. //被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
  8. ::selection { background-color: cyan; }

关系选择器

  1. //后代选择器 通常用单个空格（ ）字符表示 组合了两个选择器
  2. ul.my-things li { margin: 2em; }
  4. //子选择器 当使用  > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代 (子元素) 的第二元素。
  5. div > span { background-color: DodgerBlue; }
  7. //相邻兄弟选择器 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
  8. img + p { font-weight: bold; }
  10. //兄弟选择器 弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素
  11. p ~ span { color: red; }

背景

background-attachment背景图像的位置是在视口内固定，或者随着包含它的区块滚动

  1. //固定背景图片 相对于当前视口
  2. background-attachment: scroll; //不包含border
  3. background-attachment: fixed; //包含border
  5. //图片随滚动条滚动时一起滚动 相对于文本
  6. background-attachment: local;

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域

注：当使用 background-attachment为 fixed时，该属性将被忽略不起作用

  1. //背景图片的摆放以 border 区域为参考
  2. background-origin: border-box;
  4. //背景图片的摆放以 padding 区域为参考
  5. background-origin: padding-box;
  7. //背景图片的摆放以 content 区域为参考
  8. background-origin: content-box;

background-clip 裁剪背景图 是否延伸到边框、内边距盒子、内容盒子下面

3.CSS3 - 图1

  1. //背景延伸至边框外沿（但是在边框下层）
  2. background-clip: border-box;
  4. //背景延伸至内边距（padding）外沿。不会绘制到边框处
  5. background-clip: padding-box;
  7. //背景被裁剪至内容区（content box）外沿
  8. background-clip: content-box;
  10. //背景被裁剪成文字的前景色
  11. background-clip: text;

边框

border-image 允许在元素的边框上绘制图像

  1. //引用资源
  2. border-image-source: url(...);
  4. //切割比例(1-100)
  5. border-image-slice: 100%;

切割原理：

3.CSS3 - 图2

文本

overflow-wrap用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

3.CSS3 - 图3

文本多列布局

columns属性用来设置元素的列宽和列数

3.CSS3 - 图4

渐变图像

CSS 函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的<image>

  1. /* 一个倾斜 45 度的重复线性渐变，
  2.    从蓝色开始渐变到红色 */
  3. repeating-linear-gradient(45deg, blue, red);
  5. /* 一个从右下角到左上角的重复线性渐变，
  6.    从蓝色开始渐变到红色 */
  7. repeating-linear-gradient(to left top, blue, red);
  9. /* 一个由下至上的重复线性渐变，
  10.    从蓝色开始，40% 后变绿，
  11.    最后渐变到红色 */
  12. repeating-linear-gradient(0deg, blue, green 40%, red);

radial-gradient() 函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）

兼容

可以快速查询CSS属性是否存在兼容性问题的网址

https://caniuse.com/?search=box-sizing

HSL

什么是HSL？

人们设计出了 HSL 色彩空间，来更加直观的表达颜色。HSL是色相（Hue）、饱和度（Saturation）和亮度（Lightness）这三个颜色属性的简称。

  • 色相（Hue）是色彩的基本属性，就是人们平常所说的颜色名称，如紫色、青色、品红等等。我们可以在一个圆环上表示出所有的色相。
  • 色环上的 0°、120°、240° 位置，分别对应了 RGB 模型的红、绿、蓝三原色。原色两两混合形成了二次色。比如黄色（60°）就是由红色和绿色混合而成；蓝色和绿色则相加形成青色（180°）；品红（300°）则由红蓝两色组成。
  • 原色和二次色之间，还有各种丰富的色相过渡，比如 270° 的紫色介于品红和蓝色之间。30° 的橙色则是由红色黄色混合而成。
  • 饱和度（Saturation）是指色彩的纯度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡。
  • 亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑。

我们把色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个属性整合到一个圆柱中，就形成了 HSL 色彩空间模型。

在CSS3属性中的写法：

  1. //0度/360度 -> 红色(赤色)
  2. //60度 -> 橙黄
  3. //120度 -> 绿色
  4. //180度 -> 青色
  5. //240度 -> 蓝色
  6. //300度 -> 紫色
  7. background-color: hsl(60角度, 50%饱和度, 50%透明度);

补充：背景图渐变色拾取色网址，可以拾取好看的颜色和花样

盒子模型

box-sizing属性定义如何计算一个元素的总宽度和总高度

示例图

盒子模型中有:

  • W3C盒子模型(标准盒模型)
  • IE盒子模型(怪异盒模型)

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；

而在IE盒子模型的模式下，浏览器的width属性不是内容的宽度，而是内容，内边距，边框宽度的总和;

overflow-x属性，当一个块级元素的内容在水平方向发生溢出时，CSS属性 overflow-x 决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。

resize属性重新定义元素尺寸，如调整<textarea>标签元素的尺寸大小

  1. //默认
  2. resize: scroll;
  4. //元素不能被用户缩放
  5. resize: none;
  7. //允许用户在水平和垂直方向上调整元素的大小
  8. resize: both;
  10. //允许用户在水平方向上调整元素的大小
  11. resize: horizontal;
  13. //允许用户在垂直方向上调整元素的大小
  14. resize: vertical;

布局

传统布局存在的缺陷是用户访问浏览器时，如浏览器可视区域宽度变小时，内容不会完整的展示，而仅展示内容的一部分，造成用户体验不佳

弹性布局(Flex Box)的方案解决以上弊端，多个浏览器良好支持，它是一个一维布局，只能够一次处理一个维度上的元素布局

响应式

@media属性可用于基于一个或多个媒体查询的结果来应用样式表的一部分

  1. //置于代码的顶层
  2. //媒体查询设备的某种条件是否成立
  3. //and 同时成立
  4. //only 其中之一成立 
  5. //not 取反
  6. @media screen and (max-width: 1200px) and (min-width: 900px) {
  7.   article {
  8.     padding: 1rem 3rem;
  9.   }
  10. }
  1. //设备竖屏或横屏时
  2. @media screen and (orientation: landscape) {
  3.   article {
  4.     padding: 1rem 3rem;
  5.   }
  6. }
  1. //link标签引入媒体查询
  2. <link media="(max-width: 1200px) and (min-width: 900px)"></link>
  1. //import关键字引入媒体查询
  2. <style>
  3.   @import url(css/index.css);
  4. </style>

注：

  • <link>引入是异步加载的，通过预加载的方式(已经下载了该资源)是不会阻塞渲染，并且并不会影响window.onload事件的触发，当媒体查询的语句成立时才采用样式
  • @import时先下载外联文件再import加载