CSS是什么以及如何应用？

发表时间: 2023-02-19 22:54

之前在上一篇CSS 的前世今生中提到CSS产生的原因及历史。

接下来讲一下什么是CSS？

什么是CSS？

计算机的编程语言总体分为两种，一种叫做DSL(domain-specific language), 另一种叫做GPL(General Purpose Language)

DSL domain是领域，specific 是特定，顾名思义就是运用于特定领域解决特定问题而创作出来的计算机语言，比如我们熟悉的数据库SQL(只能用来查询或编辑数据库)，网页语言HTML(只能用来编辑网页内容)

GPL 翻译过来是通用目的语言，既然是通用就是不限制于某个特定领域，比如 Python, Go 等编程语言, 这一类语言能实现不同类型的软件开发

CSS当然属于DSL用来解决网页排版这个特定问题的，同时CSS也属于declarative programming language 表述性编程语言（表述性编程语言的简单之处在于我们只需要告诉计算机需要实现的效果，而具体怎样实现是由计算机负责的，我们不需要知道具体是怎样实现的）

在这里我们编写CSS描述我们要达到的效果，而浏览器负责帮我们实现，比如我描述需要15号宋体红色字体，浏览器理解CSS的语法所以它会解读我们所指定的这些属性(Property)，并渲染到网页上。

应用CSS方法

我们知道HTML语言主要是负责网页内容，而CSS语言负责排版，像好马配好鞍一样，有好的文字内容也需要赏心悦目的排版。

因为是两种不同的语言，所以有不同的语法(Syntax)。我们需要把它们融合(Integration)在一起（像捏泥人一样把不同的部位捏在一起）, 让它们协同工作，那具体怎样实现呢？具体有三种方法：

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline 顾名思义就是在字里行间，与HTML深度绑定，从逻辑上来讲，深度绑定肯定会弊大于利，在网页开发中一般不常用, 使用方法见下:

<h1 style="color: blue"> This is H1 </h1>

在 HDML <h1> 标记内添加style 属性（attribute）, 用双引号引起对应的属性值 "color: blue"

优点：拥有最高优先级，避免被 Internal 及External CSS 同样类型的属性覆盖
缺点：缺点也很明显，如果每一个标记有自己不同的排版格式，每一个网页上的标记（成千上万）需要添加自己的CSS style

Internal CSS

Internal CSS 类似于 Inline CSS 的进化版，是对深度绑定的一次解耦，避免深度绑定这样的好处是显而易见的，我们之前谈到过代码的复用，这里就可以派上用场

<h1 style="color: blue"> This is H1 </h1><h2 style="color: blue"> This is H2 </h2><h3 style="color: blue"> This is H3 </h3><h4 style="color: blue"> This is H4 </h4>

如上面代码显而易见，它们有相同的CSS属性（color）以及属性值（blue），不同的是使用他们的标记不同（h1, h2, h3, h4），那我们可以用一行代码来实现四行代码的效果, 这就是代码复用强大的威力，节省你现在（一行代码）以及未来（修改一次）的宝贵时间

h1, h2, h3, h4 { color: blue }

这是CSS 解除深度绑定后，衍生出来属于自己的语法规则

Selector 用来标识哪个（些）元素需要运用CSS的样式，如下图CSS 运用于<p></p> 标记, 将该段落所有文字颜色渲染为红色， Selector 也可以运用于多个元素，多个元素之间用逗号分隔，如上面代码段的示例 “h1, h2, h3, h4”

Selector 之后跟着大括号，里面包含所有属性及属性值（属性和属性值之间用冒号风格），属性之间用分号分隔

正如之前所说， Internal CSS 语法规则从字里行间中抽离出来，约定放在HTML的固定位置，标记head中的style标记内

<!DOCTYPE html><html lang="”en”">  <head>    <style>      h2, h1, h3, h4, h5, h6 {        color: crimson;      }    </style>  </head>  <body></body></html>

External CSS

External CSS 进一步将Internal CSS从网页中分离出来，这非常符合逻辑，就像不同的东西，归类后会放在一起一样， HTML与CSS 是两种不同的语言，应该保存在不同的文件中进行维护，HTML的文件拓展名是.html，而CSS是.css

将Internal CSS 语法规则代码保存到.css 文件内

具体实现方法，在head标记内创建link标记，在link标记内用rel属性值"stylesheet"表明是CSS，href属性值来索引CSS文件的具体路径（可以是绝对路径，也可以是相对路径）如下为相对路径文件名是styles.css

<!DOCTYPE html><html lang="”en”">  <head>  <link rel="stylesheet" href=“styles.css">  </head>  <body></body></html>