内容简介：在上一篇
- 作者：陈大鱼头
- github： KRISACHAN
在上一篇 【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 像素。
这是基本规则，具体规则请看 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 上。
HTML 与 CSS 具体解析规则属于 编译原理 的内容，在这里就不作展开了。但是有在 CSS 工作的过程中有两个词值得注意的就是 重排（reflow） 跟 重绘（repaint） 。
-
重排：
render tree的重新构建叫 重排 。也就是当页面布局或者DOM元素的几何属性发生变化时，就会发生浏览器重排。以下5种情况便会引发浏览器回流：DOM DOM resize
- 重绘 ：
render tree中只影响外观而不影响风格的属性改变就叫 重绘 。例如color与background-color的改变。
注：后面的文章会仔细讲解重排（reflow）跟重绘（repaint）以及相关的性能问题与优化。
参考资料：
【Hello CSS】系列
【Hello CSS】 是以 CSS 基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS 在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！
如果你也喜欢 CSS ，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “ 进击的CSS ”。你可以扫描下方二维码，添加鱼头微信，添加时注明 “ 加群 ”，如果你觉得我的文章有趣，欢迎关注微信公众号“ 鱼头的Web海洋 ”。衷心希望可以遇见你。
以上所述就是小编给大家介绍的《【Hello CSS】第一章-CSS的语法与工作流》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 【Hello CSS】第一章-CSS的语法与工作流
- [JWFD开源工作流]JWFD开源工作流-矩阵引擎设计初步
- 前端工程工作流规范
- SharePoint PowerShell 启动工作流
- Git工作流规范 Beta
- 前端工作流中的hooks
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Game Engine Architecture, Second Edition
Jason Gregory / A K Peters/CRC Press / 2014-8-15 / USD 69.95
A 2010 CHOICE outstanding academic title, this updated book covers the theory and practice of game engine software development. It explains practical concepts and techniques used by real game studios,......一起来看看 《Game Engine Architecture, Second Edition》 这本书的介绍吧!
