入门 CSS

发表于 更新于 分类于 ， ， ， 阅读次数：

本文按照 Mozilla 贡献者基于 CC-BY-SA 2.5 协议发布的 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps 改编。

开始之前

好了，经过了前面的 HTML 学习，我们进入了下一个阶段。在这里，你终于不需要忍受那些白底黑字灰按钮的网页了！这里我们将会介绍 CSS（Cascading Style Sheets，层叠样式表），它用于设置和布置网页————例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。但是，这里我们不会太急，先介绍一点点东西，用来给大家提供一个开端。

大家在用 word 的时候，都是把字选择起来，调节字号，字体一类。在这样的操作中，样式和内容是连在一起的。但是 web 就不太一样，它把内容和样式分开了。基本的 HTML 只有一些主要内容，而样式几乎都是放在 CSS 里面的。这样的好处是维护方便，我们以后会提到。

浏览器在得到一个 HTML 之后，就会开始根据这个文档的结构进行渲染。根据各种标签和 CSS 来确定一个文字应该显示成什么样子，所以你在最终的网页上面看不到 <p> 这类的标签。在没有 CSS 的时候，浏览器会采用默认样式进行渲染。而 CSS 则会指定一个 HTML 里的东西应该怎么渲染（当然标记语言不只有 HTML， 还有 XML，SVG 这些，都可以用 CSS）。下面我们简单地讲下语法。至于怎么添加 CSS，我们会在下一章正式进行讲解。

CSS 语法

CSS 就是指定一种规则。听起来有点迷惑，不过我们举个例子就明白了。征文的时候，老师说，“标题用三号黑体，正文用小四号仿宋”，这样的要求就是规则。本质上这两者都是相同的，只是为了给浏览器看，CSS 用了更复杂的语法。比如下面这个 CSS：

1
2
3
4
h1 {
    color: red;
    font-size: 5em;
}

用自然语言讲出来就是“把所有的 h1 的颜色变成红色，字体大小变成 5em”。是不是非常简单？下面我们分析一下。

这里的例子就是一个完整的 CSS 规则。规则以一个 选择器（selector） 开头，它选出我们这条规则影响的元素。在这里它是 h1 ，就是选中所有的一号标题（大标题），让它用上后面紧跟着的大括号内指定的样式。

选择器后面是一个大括号 {}，里面定义一些属性。比如 color: red 就把元素的 color 属性设置成了 red，也就是把颜色设置成红色。我们可以看见冒号前面是属性，冒号后面是值。

像这样按照 属性:值 (property:value) 的格式来指定属性的值句子叫做 声明（declarations）。每个声明以半角分号（;）结尾。不同于 HTML 的是，CSS 的属性是区分大小写的。

属性的值不是随便设置的，比如你给 color 的 red 换成 read ， write 这些乱七八糟的值是没有任何效果的（CSS 会自动忽略那些错误的规则）。如果属性有多个值，那么多个值之间用英文逗号（,）隔开。CSS 当中具有非常多样的属性，给各种元素很大的自定义空间，具体可以查看有关 CSS 的文档（比如 MDN 的文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference）。

一个 CSS 不只有一个规则，它可以包含很多的规则，比如这样：

1
2
3
4
5
6
7
h1 {
    color: red;
    font-size: 5em;
}
p {
    color: black;
}

这里就多了一个把所有的 <p> 里面的字都设置成黑色的规则。

属性一览

因为属性太多，我们不可能一下子全部列出。这一系列的教程可能会把属性随着进度慢慢地讲出来，而不是单独分成一个专题。所以

color

顾名思义，这就是颜色相关的属性，准确来说这是前景色（通常是文本颜色），还可以用 background-color 来设置背景色。刚刚我们提到的是用颜色名称来设置。实际上颜色还可以不止通过这种方式。例如用 rgb 或者 rgba，或者十六进制颜色值。

1
2
3
4
5
6
7
8
9
h1 {
  color: rgb(255, 255, 255) /*设置成白色*/
}
p {
  color: rgba(255, 255, 204, 0.8) /*淡黄色 20% 透明*/
}
ul {
  color: #0000FF;/*蓝色*/
}

更多的内容可以去 MDN 上搜索 color 去看详细的介绍。

font

font 相关的都是字体的属性。其中包括了字体，字号和类型等等。

设置字体大小使用 font-size ，大概就是这样:

1
2
3
font-size: 12px;/*12 像素大小*/
font-size: 0.8em;/*0.8 字符大小*/
font-size: 200%;/*缩放 200% */

其中第一个 px 结尾的就是以像素大小为单位的绝对大小，第二个 em 是以字号为单位的相对大小。使用相对大小有利于去适应不同的设备，我们推荐使用 em 的方式。通常情况下，电脑浏览器上 1em 等于 16px。如果对个别字进行操作，也可以是使用缩放。

设置字体的是 font-family 属性。这个属性可以指定字体。你可以给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

1
2
font-family: Georgia, serif; /*使用 Georgia 字体，如果没有选择默认衬线字体*/
font-family: sans-serif;/*使用无衬线字体*/

font-style 用来设置斜体。例如 font-style: italic 设置字体为斜体。

font-weight 设置粗体。font-weight: bold 将字体设置成粗体。

最后

我们会在下一章开始正式运用 CSS 到我们的网页上面。