【Hello CSS】第一章-CSS的语法与工作流

最新推荐文章于 2020-11-29 02:05:25 发布

江三疯~

最新推荐文章于 2020-11-29 02:05:25 发布

阅读量193

点赞数

首发：krissarea.gitee.io (https://krissarea.gitee.io/blog/css/Hello_CSS/第一章-CSS的语法与工作流.html)
作者：陈大鱼头 (https://juejin.im/user/576b433bd342d30057aaa1e9/posts)
github： KRISACHAN (https://github.com/KRISACHAN)

在上一篇 【HelloCSS】的序章CSS起源中介绍了 CSS的诞生原因以及发展历史，了解了 CSS的存在意义。从正篇篇开始将会正式开始介绍 CSS这门语言的特点与功能。本篇则主要介绍 CSS的语法与 CSS是如何工作的。

CSS语法

1. 基本规则

CSS规则主要由两部分组成： 选择器(selector)与 声明(declarations)。

选择器(selector)是开发者希望改变样式的 HTML元素。

声明(declarations)则是开发者制定的希望 HTML改变的元素规则，可以是一条或多条。

每条 声明(declarations)由一个 属性(property)和一个 值(value)组成。

属性(property)是开发者希望设置的 样式属性（style attribute）。

值(value)为属性的具体内容。

属性与值之间由 冒号隔开，声明与声明直接由 分号隔开。

CSS中的注释以 /* 开始并以 */ 结束。

/* selector {property: value} */	
h1 {color:red; font-size:14px;}

上面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

640?wx_fmt=gif

这是基本规则，具体规则请看CSS 基础语法。

2. 样式表书写规则

每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。

HTML的元素样式修改有以下的书写规则。

内部样式表（写在 `<head>`标签内部）

<!DOCTYPE html>	
<html>	
  <head>	
    <style>	
        h1 {color:red; font-size:14px;}	
    </style>	
  </head>	
  <body>	
  </body>	
</html>

内联样式（写在HTML标签中）

<!DOCTYPE html>	
<html>	
  <head>	
  </head>	
  <body>	
      <h1 style="color:red; font-size:14px;"></h1>	
  </body>	
</html>

外部样式表（写在CSS文件中，引入到HTML里）

<!-- style.css -->	
h1 {color:red; font-size:14px;}	
<!-- index.html -->	
<!DOCTYPE html>	
<html>	
  <head>	
      <link rel="stylesheet" href="style.css">	
  </head>	
  <body>	
      <h1></h1>	
  </body>	
</html>

3. @规则（at-rule）

一个at-rule就是一个CSS语句，以 @开头，后接 标识符，最后以 ；结束。

@charset

@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。

/* @charset "<charset>"; */	
@charset "UTF-8";

@import

@import用于导入外部 CSS样式表文件。

/* @import url; */	
/* @import url list-of-media-queries; */	
@import 'custom.css';	
@import url("fineprint.css") print;

@namespace

@namespace是用来定义使用在 CSS样式表中的 XML命名空间的@规则。

/* @namespace <namespace-prefix>? [ <string> | <url> ]; */	
@namespace url(http://www.w3.org/1999/xhtml);	
@namespace svg url(http://www.w3.org/2000/svg);

@media

@media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。

/* @media */	
@media screen and (min-width: 900px) {	
    h1 {	
        color:red;	
        font-size:14px;	
    }	
}

@page

@page用于在打印文档时修改某些CSS属性。 @page规则只能修改 margin、 orphans、 widow 和 page breaks of the document，对其他属性的修改是无效的。

/*	
 *  @page <page-selector-list> {	
 *    <page-body>	
 *  }	
 */	
@page {	
    size: 10in 20in;	
    margin: 10% 20%;	
}

@keyframes

@keyframs通过定义动画序列中的关键帧来控制 CSS动画不同步骤的状态。

/* @keyframes */	
@keyframes slidein {	
    from {	
        margin-left: 100%;	
        width: 300%;	
    }	
    to {	
        margin-left: 0%;	
        width: 100%;	
    }	
}

@supports

@supports用来检测规则组的规则是否生效。规则与 @media类似

/*	
 *  @supports <supports_condition> {	
 *    <specific rules>	
 *  }	
 */	
@supports (display: flex) {	
    div {	
        display: flex;	
    }	
}

@viewport

@viewport用于设置 视口（viewport）的特性。

/*	
 * @viewport {	
 *    <group-rule-body>	
 * }	
 */	
@viewport {	
    min-width: 640px;	
      max-width: 800px;	
}	
@viewport {	
    zoom: 0.75;	
    min-zoom: 0.5;	
    max-zoom: 0.9;	
}	
@viewport {	
    orientation: landscape;	
}

@counter-style

@counter-style用于自定义 counter的样式

/*	
 * @counter-style <counter-style-name> {	
 *   <group-rule-body>	
 * }	
 */	
@counter-style circled-alpha {	
    system: fixed;	
    symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;	
    suffix: " ";	
}	
.items {	
    list-style: circled-alpha;	
}

@font-face

@font-face用于给网页指定文本字体。

/*	
 * @font-face {	
 *    <group-rule-body>	
 * } 	
 */	
@font-face {	
    font-family: "Bitstream Vera Serif Bold";	
    src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");	
}	
body { font-family: "Bitstream Vera Serif Bold", serif }

@doucment

@document如果满足条件组的条件，则规则生效（推延至 CSS Level 4 规范）

/*	
 * @document name(guide) {	
 *    <group-rule-body>	
 * }	
 */	
@document url(http://www.w3.org/),	
               url-prefix(http://www.w3.org/Style/),	
               domain(mozilla.org),	
               regexp("https:.*") {	
  /* 该条CSS规则会应用在下面的网页:	
     + URL为"http://www.w3.org/"的页面.	
     + 任何URL以"http://www.w3.org/Style/"开头的网页	
     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     	
     + 任何URL以"https:"开头的网页 */	
  /* make the above-mentioned pages really ugly */	
    body {	
        color: purple;	
        background: yellow;	
    }	
}

注：上面的@规则属性并非完整，还有少量相关的没有列出，需要详细列表的可以翻阅MDN

CSS是如何工作的？

页面渲染机制

在讲 CSS的工作流程之前，首先来简单看看页面的渲染机制。

页面渲染可分为下面5个步骤：

处理 HTML来创建 DOM tree；
处理 CSS来创建 CSSOM tree；
根据 DOM跟 CSSOM来合并 render tree；
根据 render tree来布局；
绘制 render tree。

以上便是页面渲染的过程。

CSS的工作流程

从上面的页面渲染流程可以知道浏览器在解析了 HTML跟 CSS之后便开始合并渲染，简单来说就是绘制带有样式的 HTML规则。

CSS的工作流程就是把 CSS规则定义到 DOM tree上。

640?wx_fmt=png

HTML与 CSS具体解析规则属于 编译原理的内容，在这里就不作展开了。但是有在 CSS工作的过程中有两个词值得注意的就是重排（reflow）跟重绘（repaint）。

重排： render tree的重新构建叫重排。也就是当页面布局或者 DOM元素的几何属性发生变化时，就会发生浏览器重排。以下5种情况便会引发浏览器回流：
页面渲染初始化；
DOM元素的增删；
DOM元素的位置、尺寸以及引起尺寸变化的内容改变；
resize事件发生时。
重绘： render tree中只影响外观而不影响风格的属性改变就叫重绘。例如 color与 background-color的改变。

注：后面的文章会仔细讲解重排（reflow）跟重绘（repaint）以及相关的性能问题与优化。

参考资料：

浏览器是如何工作的？(https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Thebrowserswewilltalk_about)

CSS是如何工作的？ (https://developer.mozilla.org/zh-CN/docs/Learn/CSS/IntroductiontoCSS/HowCSSworks)

CSS语法 (https://developer.mozilla.org/zh-CN/docs/Learn/CSS/IntroductiontoCSS/Syntax)

CSS参考 MDN (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95)

层叠样式表(https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8)

浏览器渲染页面的过程 (https://github.com/KRISACHAN/front-end-project/tree/master/learning/knowledge-WEB/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E7%9A%84%E8%BF%87%E7%A8%8B)

【Hello CSS】系列

【HelloCSS】是以 CSS基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！

如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣，请添加鱼头微信（krisChans95），添加时注明 “加群”，Mmmm，最后，如果觉得我的文章还不错，请加个关注跟点个“好看”呗！