CSS 是怎么运作的

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

内容简介：CSS 全称 Cascading Style Sheets，网页内容（HTML）会被浏览器转换为 DOM（Document Object Model）以供显示，而 CSS 就是作用在 DOM 上以改变它们的样式、布局或行为等。对于前端工程师来说，这是很常见的基本操作了，但是对其他不常敲网页代码的程序员来说，却可能会有些陌生。借着最近前端同事事务繁忙的机会，我这客户端工程师赶鸭子上架怼了一个静态网页出来，顺便产下了两篇副产品，都与 CSS 基础相关，这是第一篇，希望能对其他可能有相同需要的同志送上一些帮助。

CSS 全称 Cascading Style Sheets，网页内容（HTML）会被浏览器转换为 DOM（Document Object Model）以供显示，而 CSS 就是作用在 DOM 上以改变它们的样式、布局或行为等。对于前端工程师来说，这是很常见的基本操作了，但是对其他不常敲网页代码的程序员来说，却可能会有些陌生。

借着最近前端同事事务繁忙的机会，我这客户端工程师赶鸭子上架怼了一个静态网页出来，顺便产下了两篇副产品，都与 CSS 基础相关，这是第一篇，希望能对其他可能有相同需要的同志送上一些帮助。

文章的内容基本是翻译 MDN 文档来的，怕有什么遗漏的同学可以直接翻到文末看官文，也欢迎指出本文的错误 :)

CSS 是怎么作用到 HTML 上的？

网页浏览器会把 CSS 规则应用到文档上，以改变文档内容的表现形式，一个单一的 CSS 规则是由下面这两个东西组成的：

一组属性（Properties）：这些参数会更新 HTML 的内容，让它在显示的时候与众不同
一个选择器（Selector）：用来挑选要作用到哪个元素上

一个 CSS 规则约定了某个元素长什么样，一个包含了一组 CSS 规则（Rulesets/Rules）的 stylesheet 就定义了一个网页的长相。

举个例子

来看一个简单的 HTML 文档，这个例子里包含了 <h1> 和 <p> 标签，而 stylesheet 则是通过 <link> 元素实现的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

然后看两个 CSS 的规则：

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

这两个 CSS 规则是写在 style.css 文件里的，跟上面的 .html 文件放在一起就可以通过相对路径引用到

大括号签名的标签（ h1 和 p ）就是选择器，它告诉浏览器这些规则要作用在什么标签上；而大括号里的键值对就约定了这些标签的内容的显示规则。

原理呢？

浏览器在处理网页的时候，会分两步走：

把 HTML 和 CSS 转换为 DOM，DOM 会把内容和样式融合到一起
把 DOM 的内容显示出来

介绍一下 DOM

一个 DOM 的内容是以树状结构保存的。每个通过 markup 语言表述的元素、属性、文字等会变成 DOM 节点保存在树上。

DOM 的真面目

假设我们有一段 HTML 代码：

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

将它转换为 DOM 之后，这个 DOM 会是这样的：

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

现在来加一个 CSS 约束试试：

span {
  border: 1px solid black;
  background-color: lime;
}

emmm…还是跟刚刚一样的 DOM，不过这些 CSS 约束会被加到 span 选择器上面去，于是渲染出来的样子就不一样了。

三种使用 CSS 的方法

外部 stylesheet

就是上面例子里用到的方法，CSS 约束是写在一个单独的 .css 文件里的

内部 stylesheet

即直接通过 <style> 标签来定义元素的长相，这个 <style> 需要写在 <head> 标签下才会生效：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

这个例子跟之前的例子是同样效果的。

内联样式

对于只想改变单独一个标签元素的情况下，可以通过标签的 style 属性实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

然而这种做法并没有很受待见，因为这样定义的样式没办法复用，你可能需要在好几个文档里面写上同样的几个样式，维护成本大大升高了。

另一方面，把 HTML 语法跟 CSS 语法混合在一起，看起来就不那么清晰易懂了，建议是把不同类型的代码分开，保持纯粹。

小结

到这里，我们已经不止能写 HTML 网页了，还能通过 CSS 给这简陋的网页披上华丽丽的外衣。在下一篇文章里，我们会继续深入学习 CSS 的句法，距离踏入前端世界的大门又要近一些了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

自媒体写作，从基本功到实战方法

余老诗 / 清华大学出版社 / 2018-9-1 / 59.00元

《自媒体写作》是一本系统而通俗易懂的自媒体写作指导书。全书共分为10章，分别从写作基本功、新媒体认知、新媒体传播规律和自媒体作者阅读写作素养以及如何进阶等方面展开，结合简书、公众号、今日头条等主流自媒体所选例文，讲解写作知识和新媒体特点，内容详实，有理有据，非常适合自媒体写作爱好者自学。尤其值得一提的是，写作基本功部分从原理、方法和技巧三个层面展开论说，让自媒体写作学习者既能从根本......一起来看看《自媒体写作，从基本功到实战方法》这本书的介绍吧!

码农工具