CSS简介

2020-11-01大约8分钟

Cascading Style Sheets (CSS)，直接翻译是“层叠样式表”，听起来有点拗口。直接理解就是，这是一种样式表语言，用于描述如何在屏幕、纸面或其他媒体上呈现元素。比如文字的字体、颜色、大小、装饰等。

比如，这是一段CSS的一个简单例子（先看看样子，看不懂没关系）：

body {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    padding-bottom: 35px;
    color: #41484d;
    background-color: #fff;
    margin: 0;
}

p {
  color: blue;
  font-size: 46px;
}

1991年出现了HTML，当时是没有CSS的，最开始的HTML代码都大概都是这样的：

<!DOCTYPE html>
<html>
  <head>
    <title>内联样式例子</title>
  </head>
  <body>
    <p style="color:blue;font-size:46px;">
      我是一个大的、蓝色的<strong>粗体</strong>段落
    </p>
  </body>
</html>

有什么问题呢？但都从上面的例子来看，似乎没什么问题，也清晰直观。但是如果内容更多之后呢？

<!DOCTYPE html>
<html>
  <head>
    <title>内联样式例子</title>
  </head>
  <body>
    <h1 style="color:blue;font-size:46px;font-style:italic;font-family:sans-serif;letter-spacing:0.5px;line-height:1.6;">
      我是一个大的、蓝色的<strong>粗体</strong>标题
    </h1>
    <p style="color:black;font-size:26px;font-style:italic;letter-spacing:0.5px;line-height:1.5;">
      我是第二个中等的、黑色的<strong>粗体</strong>段落
    </p>
    <p style="color:black;font-size:16px;font-style:italic;letter-spacing:0.5px;line-height:1.5;">
      我是第三个小的、黑色的<strong>粗体</strong>段落
    </p>
  </body>
</html>

这样子的代码，是不是有一些问题呢？

首先，大段的HTML里面，充斥的是样式代码，而HTML的本身的结构和网页的文字则变的很不容易辨识。最开始的html里甚至还有一些表示样式的HTML标签，比如<b>（文字加粗）, <u>（文字加下划线）, <i>（文字加斜体）等等。
其次，样式代码里有些重复的代码，比如color:black;letter-spacing:0.5px;等等，每次用到的时候都要写一遍，以后需要改的时候都得一起改，非常麻烦。

CSS语言的特点主要有这些特点：

丰富的样式定义 。CSS提供了丰富的文档样式外观；
易于使用和修改 。CSS可以将样式定义在HTML元素的style属性中，也可以定义在HTML文档的header部分，还可以定义在专门的CSS文件中，供HTML文件引用。修改是只需要修改定义的那部分代码，不需要修改所以使用这个样式的标签。
易于管理 。CSS可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用 。CSS样式可以供任何页面文件都可以将其引用。
页面压缩 。样式声明在CSS样式表中，而不是和HTML代码混在一起，可以大大的减少HTML页面的内容，减少页面加载的时间。

CSS

前一页