CSS 基础

CSS（层叠样式表）是你用来为网页添加样式的代码。这一节内容会带你了解你所需的基础知识。我们将解答像这样的问题：怎样将文本改成黑色或红色？怎样将内容在屏幕上这样或那样的地方显示？怎样用背景图片或背景颜色来装饰网页？

什么是CSS？

就像 HTML，CSS也不是真正的编程语言。它是样式表语言，也就是说，它允许你有选择性地为 HTML 文档的元素添加样式。举例来说，要选择所有的 p 元素阿然后将它们的文本改成红色，你应该这样写：

p {
  color: red;
}

让我们动手操作一下：将这三行 CSS 代码粘贴到文本编辑器里的新文件中，然后保存文件名为 style.css ，保存到 styles 文件夹内。

但是我们还需要将 CSS 文件引用到 HTML 文档内，否则的话 CSS 代码不会影响到 HTML 文档在浏览器里的表现。（如果你没有完整地跟随我们的指导，在文件处理和 HTML基础中查看你所需的内容。）

打开 index.html 文件，然后将下面一行粘贴到头部，也就是 <head> 和 </head> 标签之间。
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
保存并用浏览器打开文件。你应该看到这样的页面：

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css. 如果你的段落文字现在是红色的了，那么祝贺你，你已经成功地写下了你的第一句 CSS 代码！

解析CSS规则

让我们仔细看一看 CSS ：

整个结构称为 CSS 的规则，注意里面单独的部分也是一样：

选择符（Selector）: HTML 元素放在规则最开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要改变选择符就行了。
声明（Declaration）: 一个单独的规则比如 color: red; 这指定了你想要添加样式元素的属性。
属性（Properties）: 这是你改变 HTML 元素样式的方法。（在这个例子中 color 就是 p 元素的属性。）在 CSS 中，你通过选择合适的属性来改变你的规则。
属性值（Property value）: 在属性的右边，冒号后面，我们拥有属性值，用于从指定的属性里的非常多的外观中选择一个值（我们除了 red 之外还有很多颜色的值可以选择）。

注意其他重要的语法：

规则里除了选择器的部分都应该包含在成对的大括号里({}).。
在声明里，你应该用冒号分离开属性与属性值。
在规则里，你应该用分号分离开各个声明。

如果要同时修改多个属性，你只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

选择多个元素

你也可以选择多种类型的元素然后为它们添加一组样式。记得将不同的选择符用逗号分开。例如：

p,li,h1 {
  color: red;
}

不同类型的选择符

我们拥有许多不同类型的选择符。在上面，我们只看到了元素选择符，用来选择 HTML 文档中给定的元素。但是我们可以选择更加具体的类型。下面是一些常用的选择符类型。

选择符	选择的内容	示例
元素选择符（有时也称作标签或类型选择符）	所有指定的 HTML 元素	`p` 选择 `<p>`
ID 选择符	指定 ID 的元素（在 HTML 页面中，每个 ID 只被允许指定一次）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
Class 选择符	指定 Class 的元素（多个 Class 可以同时出现在一个页面中）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择符	页面上拥有指定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪类选择符	指定的元素，但是需要在特殊的状态，比如悬停	`a:hover` 选择 `<a>`, 但是只在鼠标悬停在链接上时

这里有更多选择符让人探索，在选择符指南中你可以查看更多详细的信息。

字体和文本

既然我们已经探索了一些 CSS 基础，现在就让我们开始添加一些规则和信息到我们的 style.css 文件中来让我们的示例更加美观。首先，让我们的字体和文本变得更加漂亮。

提示：我们还添加了一条注释来解释 “px” 的意思。CSS文档中任何在 /* 和 */ 之间的内容都是注释，浏览器加载代码时会忽略其中的内容。注释是为了让你写下关于你所做的有帮助的笔记所用。

首先，找到我们在之前访问 Google Fonts 中保存的内容。在 index.html 的头部中任意位置添加 <link ... > 元素（注意：在 <head> 和 </head> 之间）。它将看起来像下面这样：
```
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
接下来，删除 style.css 文件中已有的规则。那是一次好的尝试，不过红色的文字看起来并不太舒服。
将下列代码添加到相应的位置，用你在 Google-Fonts 找到的字体替代 font-family 中的占位符。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字体尺寸（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：
```
html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: placeholder: this should be the rest of the output you got from Google fonts
}
```
现在我们将要为 HTML 中 body 元素内的 (<h1>, <li>, 和 <p>)元素设置字体尺寸。我们也会将标题居中显示，同时为 body 元素内的内容设置行高和间距，来让页面可读性更高。
```
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}
```

你可以调整这些 px 值到任何你喜欢的值，来让你的设计更符合你的心意，不过通常你的设计应该看起来像这样：

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

盒模型

在你写 CSS 时你会发现大部分都是关于盒模型的——设置它们的尺寸，颜色，位置等等。大部分 HTML 元素都可以被看作一个一个层叠的盒子。

a big stack of boxes or crates sat on top of one another

毫无惊喜地，CSS 布局就是基于盒模型的。每个占据你页面空间的块级元素都有相似的属性：

内边距（padding）, 围绕着内容的空间（比如围绕段落的空间）
边框（border）, 紧接着内边距的实体线段
外边距(margin), 围绕元素外部的空间

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

在这一部分我们用：

width (属于一个元素的)
background-color, 元素内容和内边距之后的颜色
color, 元素内容的颜色（通常是文本）
text-shadow: 为元素内的文本设置阴影
display: 设置元素的显示模式（暂时不用担心这部分内容）

让我们赶紧开始添加更多的 CSS 到页面转哦给你吧！将这些新规则都添加到页面的底部，不要害怕改变了属性的值会造成的后果，赶紧去尝试吧！

改变整个页面的颜色

html {
  background-color: #00539F;
}

这条规则设置了整个页面的背景颜色。将上面颜色的代码改成你在你的网站呈现什么样子？中选择的主题颜色。

解析 body 元素

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

在 body 元素中有好几条声明，我们现在一条一条的看一下：

width: 600px; — 强制页面永远保持600像素宽。
margin: 0 auto; — 当你在 margin 或 padding 中设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，查看这里。
background-color: #FF9500; — 指定元素的背景颜色。我们给 body 元素用了一种略微偏红的橘色以与 html 元素形成对比。继续实验，尝试下 white 或者其他你喜欢的颜色。
padding: 0 20px 20px 20px; — 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
border: 5px solid black; — 简单地为页面四周设置了5像素的黑色实线边框。

为主标题定位和添加样式

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能发现了我们在页面上方有一个可怕的间隙。那是因为浏览器会提供了一些 默认样式 给 <h1> 元素，即使你没有提供任何 CSS 代码。那可能听起来不太好，但是我们希望一个没有任何样式的网页也有可读性。为了去掉那个间隙，我们通过设置 margin: 0 覆盖掉默认样式。

至此，我们已经设置了标题的上内边距和下内边距为20像素，标题文本与 html 的背景颜色一致。

另一个我们在这使用了的非常有趣的属性是 text-shadow ，它为元素内容的字体提供了阴影。它的四个值如下：

第一个像素值设置了水平方向的阴影值
第二个像素值设置了垂直方向的阴影值
第三个像素值设置了阴影模糊的距离（越大的值表示越模糊）
第四个值设置了阴影的颜色

请尝试不同的值看看你会得出什么样的结果！

居中显示图像

img {
  display: block;
  margin: 0 auto;
}

最后，我们将使图像居中来让它变得更美观。我们可以重新使用 margin: 0 auto 一次，但是我们还要做其他调整。body 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。与之对应的是行内元素，则不能。所以为了使图像有外边距，我们必须使用 display: block 将其改成块级元素。

提示：如果你暂时不能理解 display: block 也没关系；随着你对 CSS 学习的深入，你将明白这个问题。要了解更多 display 属性的值请查看 display参考页面。

结论

如果你一直跟随我们的指导，那么到最后你应该得到如下的一个页面（你也可以在这里查看我们的版本）：

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

如果你有遇到问题，你可以将你的代码与我们GitHub上的代码做对比。

在这里，我们只提到了非常有限的 HTML 知识，要查看更多，请访问我们的CSS学习。