先从HTML开始吧

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开始学习CSS</title>
</head>

<body>

    <h1>我是一级标题</h1>

    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
并且还有一个 <a href="http://example.com">链接</a>.</p>

    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>

    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目 <em>三</em></li>
    </ul>

</body>

</html>

添加CSS试试看？

与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css .

为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，<head>语句模块里面加上下面的代码：

<link rel="stylesheet" href="styles.css">

<link> 语句块里面，我们用属性rel，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 href 指定，寻找CSS文件的位置。

在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

h1 {
  color: red;
}

保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。

样式化 HTML 元素

通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

p {
  color: green;
}

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

p, li {
    color: green;
}

改变元素的默认行为

对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：

li {
  list-style-type: none;
}

把上述代码加到你的 CSS 里面试一试！

欢迎参阅 MDN 上的 list-style-type 属性，看看到底有哪些值被支持。 list-style-type 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。

根据元素在文档中的位置确定样式

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

将以下规则添加到样式表。

li em {
  color: rebeccapurple;
}

该选择器将选择<li>内部的任何元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的现在是紫色，但是在段落内的那个没发生变化。

另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

也将这个规则添加到样式表中：

h1 + p {
  font-size: 200%;
}

下面的示例包含了上面的两个规则。尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

li em {
    color: rebeccapurple;
}

h1 + p {
    font-size: 200%;
}

<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
    <li>Item <span>one</span></li>
    <li>Item two</li>
    <li>Item <em>three</em></li>
</ul>

Note: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的Selectors章节中介绍。

在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

a:link {
  color: pink;
}

a:visited {
  color: green;
}

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。

a:hover {
  text-decoration: none;
}

将选择子和关系选择器组合起来

你可以将多个选择子和关系选择器组合起来。来看一些例子：

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }

你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的元素的内部，类名为special。

在我们提供的原始HTML文档中，与之符合的元素只有.

如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。

让我们开始CSS的学习之旅