path: root/files/zh-cn/learn/css/first_steps/getting_started/index.html

---
title: 让我们开始CSS的学习之旅
slug: Learn/CSS/First_steps/Getting_started
tags:
  - CSS
  - 元素
  - 初学者
  - 学习
  - 类
  - 选择器
translation_of: Learn/CSS/First_steps/Getting_started
original_slug: Learn/CSS/First_steps/开始
---
<div>
<p>{{LearnSidebar}}</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
</div>

<p class="summary">在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。</p>

<h4 id="前置知识">前置知识</h4>

<p><font><font>在开始本单元之前，您应该：</font></font></p>

<ul>
 <li><font><font>基本熟悉计算机操作。</font></font></li>
 <li><font><font>基本工作环境的设置（详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>）</font></font><font><font>，基本的文件操作，详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></font></font><font><font>。</font></font></li>
 <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li>
</ul>

<h4 id="目标">目标</h4>

<ul>
 <li>理解 HTML文档链接CSS文档的几个基本套路，</li>
 <li>并能运用所学的CSS，做些文字上的格式化操作。</li>
</ul>

<h2 id="先从HTML开始吧">先从HTML开始吧</h2>

<p>我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;开始学习CSS&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;h1&gt;我是一级标题&lt;/h1&gt;

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

    &lt;p&gt;这是第二段. 包含了一个 &lt;em&gt;强调&lt;/em&gt; 元素.&lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;项目1&lt;/li&gt;
        &lt;li&gt;项目2&lt;/li&gt;
        &lt;li&gt;项目 &lt;em&gt;三&lt;/em&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>

<div class="blockIndicator note">
<p><strong>温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p>
</div>

<h2 id="添加CSS试试看？">添加CSS试试看？</h2>

<p>我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。</p>

<p>在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是CSS文件）</p>

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

<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>

<p> {{htmlelement("link")}} 语句块里面，我们用属性<code>rel</code>，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 <code>href</code> 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p>

<pre class="brush: css">h1 {
  color: red;
}</pre>

<p>保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p>

<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。</p>

<h2 id="样式化_HTML_元素">样式化 HTML 元素</h2>

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

<pre class="brush: css">p {
  color: green;
}</pre>

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

<pre class="brush: css">p, li {
    color: green;
}</pre>

<p>您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>

<h2 id="改变元素的默认行为">改变元素的默认行为</h2>

<p>只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。</p>

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

<pre class="brush: css">li {
  list-style-type: none;
}</pre>

<p>把上述代码加到你的 CSS 里面试一试！</p>

<p>欢迎参阅 MDN 上的 <code>list-style-type</code> 属性，看看到底有哪些值被支持。 <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。</p>

<p>通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 <code>square</code>，它能把默认的小黑球变成方框框。</p>

<h2 id="使用类名">使用类名</h2>

<p>目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。</p>

<p>举个例子吧，咱们把 <a href="/en-US/docs/Web/HTML/Global_attributes/class">class 属性</a>加到表里面第二个对象。你的列表看起来应该是这样的：</p>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;项目一&lt;/li&gt;
  &lt;li <strong>class="special"</strong>&gt;项目二&lt;/li&gt;
  &lt;li&gt;项目 &lt;em&gt;三&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>在 CSS 中，要选中这个 <code>special</code> 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：</p>

<pre class="brush: css">.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>保存再刷新，就可以看到变化。</p>

<p>这个 <code>special</code> 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <code>&lt;span&gt;</code> 一起又橙又粗起来。试试把<code>special</code> 类属性加上去，保存，刷新，哇，生活就是这么美好。</p>

<p>有时你会发现选择器中，HTML 元素选择器跟类一起出现：</p>

<pre>li.special {
  color: orange;
  font-weight: bold;
}</pre>

<p class="brush: html">这个意思是说，“选中每个 <code>special</code> 类的 <code>li</code> 元素”。 你真要这样，好了，它对 <code>&lt;span&gt;</code> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：</p>

<pre class="brush: css">li.special,
span.special {
  color: orange;
  font-weight: bold;
}</pre>

<p>你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。</p>

<h2 id="根据元素在文档中的位置确定样式">根据元素在文档中的位置确定样式</h2>

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

<p>将以下规则添加到样式表。</p>

<pre class="brush: css">li em {
  color: rebeccapurple;
}</pre>

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

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

<p>也将这个规则添加到样式表中：</p>

<pre class="brush: css">h1 + p {
  font-size: 200%;
}</pre>

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

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors</a>章节中介绍。</p>
</div>

<h2 id="根据状态确定样式">根据状态确定样式</h2>

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

<pre class="brush: css">a:link {
  color: pink;
}

a:visited {
  color: green;
}</pre>

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

<pre class="brush: css">a:hover {
  text-decoration: none;
}</pre>

<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?</p>

<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>

<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。</p>

<p>你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。</p>

<p>一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p>
</div>

<h2 id="将选择子和关系选择器组合起来">将选择子和关系选择器组合起来</h2>

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

<pre class="brush: css">/* selects any &lt;span&gt; that is inside a &lt;p&gt;, which is inside an &lt;article&gt;  */
article p span { ... }

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

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

<pre class="brush: css">body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}</pre>

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

<p>在我们提供的原始HTML文档中，与之符合的元素只有<code>&lt;span class="special"&gt;</code>.</p>

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

<h2 id="总结">总结</h2>

<p>在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。</p>

<p>在下一节中，我们将看到样式表的结构是什么样的。</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>

<h2 id="在此模块">在此模块</h2>

<ol>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS?</a></li>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习CSS</a></li>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS代码是如何组织的</a></li>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li>
 <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">开始使用你的新知识</a></li>
</ol>