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

栏目: CSS · 发布时间: 5年前

内容简介：在上一篇

在上一篇 【Hello CSS】的序章 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 像素。

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

这是基本规则，具体规则请看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个步骤：

  1. 处理 HTML 来创建 DOM tree ；
  2. 处理 CSS 来创建 CSSOM tree；
  3. 根据 DOM 跟 CSSOM 来合并 render tree；
  4. 根据 render tree 来布局；
  5. 绘制 render tree 。

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

CSS的工作流程

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

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

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

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

  • 重排 ： render tree 的重新构建叫 重排 。也就是当页面布局或者 DOM 元素的几何属性发生变化时，就会发生浏览器重排。以下5种情况便会引发浏览器回流： 
    DOM
DOM
resize
  • 重绘 ： render tree 中只影响外观而不影响风格的属性改变就叫 重绘 。例如 color 与 background-color 的改变。

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

参考资料：

浏览器是如何工作的？

CSS是如何工作的？

CSS语法

CSS参考

层叠样式表

浏览器渲染页面的过程

【Hello CSS】系列

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


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
计算几何

计算几何

邓俊辉 / 清华大学出版社 / 2009-6 / 49.00元

《计算几何:算法与应用(第3版)》的前4章对几何算法进行了讨论，包括几何求交、三角剖分、线性规划等，其中涉及的随机算法也是《计算几何:算法与应用(第3版)》的一个鲜明特点。第5章至第10章介绍了多种几何结构，包括几何查找、kd树、区域树、梯形图、Voronoi图、排列、Delaunay三角剖分、区间树、优先查找树以及线段树等。第11章至第16章结合实际问题，继续讨论了若干几何算法及其数据结构，包括......一起来看看 《计算几何》 这本书的介绍吧!

码农工具
MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3