CSS语法与规则 — 重学CSS

时间:2020-9-6 作者:admin


CSS语法与规则 — 重学CSS

我是三钻,一个在《技术银河》中等你们一起来终生漂泊学习。

点赞是力量,关注是认可,评论是关爱!下期再见 👋!

前言

进入重学 CSS 的第一步,首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过,要想建立知识体系骨架,我们需要一个完备性更权威,更全的线索。但是 CSS 现在标准的状态非常复杂,所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准,能把 CSS 的一切都浓缩在内。

不过这种情况也是我们平时学习知识的一种常态,知识并不是有人给我们总结好一本书,或者能有一个地方包含了所有的知识。一般来说知识都会分布在各种不同的文档当中。

根据 Winter 老师比较喜欢学习一个线索,凡是对于编程语言,都会先从它的语法去了解它。

所以 CSS 也不例外,它也有自己的一套语法体系。但是 CSS 标准是分散开的,我们想找到它完整的语法非常的不容易的。所以我们这里先从 CSS 2.1 语法标准开始。

CSS语法与规则 — 重学CSS

CSS 2.1 语法标准

CSS 2.1 确实是一个比较老的版本了,但是它有一个好处,在 2.1 的版本的时候建立了一个 Snapshot,也就是说没有其他版本去替代它。所以 CSS 2.1 的 Grammar Summary 部分是当时一个比较完整的一份语法列表。

当然现在我们已经大量的引入了 CSS3 了,所以这里面会有一些语法差异和不全。但是总体来讲是一个不错的起点,让我们可以先开始认识 CSS 的语法基础。

这里的语法是使用 “产生式” 来表达的。但是这里会有一些 CSS 中特别的表达方式和标准:

  • [ ] —— 方括号代表组的概念
  • ? —— 问号代表可以存在和不存在
  • | —— 单竖线代表 “或” 的意思
  • * —— 星号代表 0 个或 多个

CSS 总体结构

  • @charset
  • @import
  • rules —— 多个规则,这里面的规则没有顺序要求
    • @media
    • @page
    • rule —— 这里基本上就是我们平时写的 CSS 样式规则部分

我们平时写都是在写普通的 CSS 规则,charset 我们基本都不会用,一般我们都会用 UTF-8

这里讲到的是 CSS 2.1 的 CSS 结构,在 CSS3 中我们有更多的 @ 规则 和 CSS 规则,我们首先要在 CSS3 中找到这两块的所有内容,然后补充道这个总体结构中,那么我们就可以形成 CSS 的总体结构。这时候我们对 CSS 的语法认识就有完备性了。

CSS语法与规则 — 重学CSS

CSS @ 规则研究

@charset: https://www.w3.org/TR/css-syntax-3/

  • 在 CSS syntax 3 中在 CSS 2.1 中做了一个重新的定义
  • 但是相对 CSS 2.1 基本没有什么变化

@import: https://www.w3.org/TR/css-cascade-4/

  • 然后 import 就在 css cascade 4 的规范里面
  • 因为 CSS 的全称就是 Cascade Style Sheet(级联表)
  • 所以 import 属于级联规则之一

@media: https://www.w3.org/TR/css3-conditional/

  • Media 不是在我们的 media query 标准里
  • 它在 CSS3 的 conditional 标准里
  • 但是在 media 的 conditional 标准中又去引用了 media query,规定了 media 后面的一部分的查询规则
  • 所以我们常常去讲 media query 是一个新特性,其实它并不是,它是类似一个预置好的函数的一个规范
  • 真正把 Media 特性真正引入到 CSS3 当中,是通过 CSS3 中的 conditional 标准
  • 那么 Conditional,就是 “有条件的”,顾名思义就是用来控制一些规则在有效条件下才会生效

@page: https://www.w3.org/TR/css-page-3/

  • page 是有一份单独的 CSS3 标准来表述它
  • 就是 css page 3 它主要是给我们需要打印的页面所使用的
  • 理论上这个叫做分页媒体,其实主要的分页媒体就是打印机
  • 我们的页面是不会有分页的

@counter-style: https://www.w3.org/TR/css-counter-styles-3/

  • 我们平时写列表的时候会有一个 counter
  • 也就是列表最前面的那个 “小黑点” 或者是 “小数字”

@keyframes: https://www.w3.org/TR/css-animations-1/

  • keyframes 是用于我们的动画效果定义的

@fontface: https://www.w3.org/TR/css-fonts-3/

  • fontface 就是我们使用 web font 功能时候用到的
  • 它可以用来定义一切字体
  • 由此延伸出一个技巧叫 Icon font

@supports: https://www.w3.org/TR/css3-conditional/

  • 这个同样是来自于 conditional 的标准
  • 它是用来检查某些 CSS 的功能是否存在的
  • supports 是一个比较尴尬的存在,自己就是隶属于 CSS3,所以它本身是有兼容性问题的导致没办法用
  • 所以现在基本上不推荐使用 support 来检查 CSS 兼容性
  • 因为我们检查的那个属性,比我们 support 这个规则兼容性要更好,所以根本检查不了
  • 估计可能 4~5年后,CSS 新出来的新特性我们再用 support 来检查会更好一点

@namespace: https://www.w3.org/TR/css-namespaces-3/

  • 现在 HTML 里面除了 HTML 命名空间,还引入了 SVG、MathML 等这样的其他的命名空间的标记和标签
  • 所以 CSS 里面有了对应的设施,其实主要是 一个完备性的考量,并不是一个特别重要的规则

这里不是完整的列表,还有 3 个规则,因为 它们本身状态太年轻在讨论状态,要不就是已经没有浏览器支持了,或者是已经被废弃了。分别有 documentcolor-profilefont-feature

然后最常用的有三种:@media@keyframes@fontface

CSS语法与规则 — 重学CSS

CSS 规则结构

这里我们选中了 HTML 所有的 DIV 并且给予它们一个 blue 的背景颜色。

div {
  background-color: blue;
}

通过以上代码示例,我们看到一段 CSS 代码是有分为 选择器声明 两部分的。在我们《实战中理解浏览器原理》的文章中,我们编写我们的 CSS parsor 的时候,就是把 CSS parse 成 selector 部分和 declaration 部分。我们这里也会按照这个方法来理解 CSS 规则。

  • 选择器 —— selector (div)
  • 声明 —— declaration
    • Key —— 键 (background-color)
    • Value —— 值 (blue)

CSS 规则标准

Selector 选择器

  • Level 3 —— https://www.w3.org/TR/selectors-3/
    • Selectors_group —— 选择器组:用逗号分隔
    • Selector —— 选择器:需要用 combinator (组合器) 把多个简单选择器拼在一起的
    • Combinator —— 组合器:+>~空格
    • Simple_selector_sequence —— 简单选择器:类型选择器* 一定会在最前面,然后可以是 IDclassattrpseudo等选择器
  • Level 4 —— https://www.w3.org/TR/selectors-4/
    • Level 4 和 Level 3 是非常的相似的,但是它的选择器更复杂
    • 增加了很多的伪类选择器、“或” 和 “与” 的关系
    • 而且它的 NOT 也更强大
    • Level 4 的话我们看一看拓展思路就可以了,因为从 2018年12月 开始也没有再更新了
    • 所以目测是遇到问题了,处于比较难推动的阶段,所以投入使用还有很漫长的路要走

Key

  • Properties|性质
  • Variables|CSS 变量—— https://www.w3.org/TR/css-variables/
    • 可以声明一个双减号开头的变量:--main-color: #06c
    • 然后我们可以在子元素中使用这些 CSS 变量了 color: var(--main-color)
    • 可以跟其他的函数进行嵌套:--accent-background: linear-gradient(to top, var(--main-color), white);
    • 使用 var() 函数的时候是可以给默认值的,传入第二个参数就是默认值:var(--main-color, black)
    • CSS 变量处理可以用作 value,还可以用作 key:先声明了--side: margin-top 然后就可以这样使用 var(--side): 20px

Value

  • Level 4 —— https://www.w3.org/TR/css-values-4/
    • 它也是 working draft (工作草稿) 状态,但是实现状态非常的好
    • 而且这个版本一直有保持更新,最后一次更新是 2019年1月份
    • 数字类型有:整型百分比浮点型还有带维度 (Dimensions)
    • 长度单位有:相对单位 (em, ex, cap, ch ... )视口单位 (vw, vh, vi, vb, vmin, vmax)绝对单位 (cm, mm, Q, in, pt, pc px)
    • 其他单位:弧度单位 (deg, grad, rad, turn)时间单位 (s, ms)频率单位 (Hz, kHz)分辨率单位 (dpi, dpcm, dppx)
    • 数据类型:颜色 <color>图片 <image>2D 位置 <position> 等类型
    • 函数:计算 cal()最小值 min()最大值 max()范围剪切 clamp()切换value toogle()属性引用 attr()

CSS语法与规则 — 重学CSS

使用爬虫收集整套 CSS 标准

通过上面讲到的几个部分,我们已经了解了整个 CSS 的架构。但是我们发现整个的 CSS 标准是散落在几份标准当中的,为了我们更好的阅读标准,我们想拿到一份比较完整的标准列表是需要我们做一些工作的。很多时候我们都是需要在零散的标准里面,去搜集一些共性的内容。

接下来我们来做一个小实验,通过类似爬虫的方法,在 W3C 网站上抓取标准的内容。然后我们对他进行一些处理,方便我们后续的一些工作。

首先我们打开 W3C 的标准和草稿的列表页:https://www.w3.org/TR/

这里我们可以看到所有的 W3C 的标准和草稿,但是这里我们只需要 CSS 部分的。如果我们检查元素中查看,我们可以看到其实所有的数据都已经挂载在 DOM 上了,只是前端做了筛选分页而已。

所以我们就可以用一段代码,直接复制到浏览器的 console 中运行就可以筛选出所有 CSS 相关的文章列表了。

// 获取 CSS 相关的标准列表
JSON.stringify(
  Array.prototype.slice
    .call(document.querySelector('#container').children)
    .filter(e => e.getAttribute('data-tag').match(/css/)) // 找到有 CSS tag 的
    .map(e => ({ name: e.children[1].innerText, url: e.children[1].children[0].href })) // 只获取标题名字和链接
);

最终输入的内容如下:

CSS语法与规则 — 重学CSS

然后我们点击下方的 “Copy” 即可复制,把这个 JSON 内容保存在一个 JavaScript 文件里面,并且赋予一个变量叫 standards。在我们后面的爬虫代码中需要用到。

这里我们用一个简单的方法来获取爬取信息,就是在 W3C 原本的页面上开启一个 iframe,这样我们就可以忽略掉跨域的问题。

let standards = [...] // 这里面的内容就是我们刚刚从 W3C 网页中爬取到的内容
                 
let iframe = document.createElement('iframe');
document.body.innerHtml = '';
document.body.appendChild(iframe);

function happen(element, event) {
  return new Promise(function (resolve) {
    let handler = () => {
      resolve();
      element.removeEventListener(event, handler);
    };
    element.addEventListener(event, handler);
  });
}

void (async function () {
  for (let standard of standards) {
    iframe.src = standard.url; // 让 Iframe 跳转到每个 standards 中的详情页面
    console.log(standard.name); 
    await happen(iframe, 'load'); // 等待 iframe 中的页面打开完毕
  }
})();

然后我们需要的信息就是属性表格中的内容:

CSS语法与规则 — 重学CSS

如果我们看一下这个 table 的 HTML 代码,我们会发现这个 table 都是有一个 class 名叫 propdef 的。我们就可以用这个特性来获取这个表格中的内容了。

所以我们就可以在 await happen(iframe, 'load'),后面添加一行代码来答应这个表格的 DOM 元素来看一下:

let iframe = document.createElement('iframe');
document.body.innerHTML = '';
document.body.appendChild(iframe);

function happen(element, event) {
  return new Promise(function (resolve) {
    let handler = () => {
      resolve();
      element.removeEventListener(event, handler);
    };
    element.addEventListener(event, handler);
  });
}

void (async function () {
  for (let standard of standards) {
    iframe.src = standard.url;
    console.log(standard.name);
    await happen(iframe, 'load');
    console.log(iframe.contentDocument.querySelectorAll('.propdef')); // 这里答应出表格的内容
  }
})();

CSS语法与规则 — 重学CSS

推荐专栏

小伙伴们可以查看或者订阅相关的专栏,从而集中阅读相关知识的文章哦。

  • 📖 《数据结构与算法》 — 到了如今,如果想成为一个高级开发工程师或者进入大厂,不论岗位是前端、后端还是AI,算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师,前提面试就需要考算法。

  • 📖 《FCC前端集训营》 — 根据FreeCodeCamp的学习课程,一起深入浅出学习前端。稳固前端知识,一起在FreeCodeCamp获得证书

  • 📖 《前端星球》 — 以实战为线索,深入浅出前端多维度的知识点。内含有多方面的前端知识文章,带领不懂前端的童鞋一起学习前端,在前端开发路上童鞋一起燃起心中那团火🔥

CSS语法与规则 — 重学CSS

CSS语法与规则 — 重学CSS

CSS语法与规则 — 重学CSS

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。