让我们开始CSS的学习之旅

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

前置知识

在开始本单元之前,您应该:

目标

  • 理解 HTML文档链接CSS文档的几个基本套路,
  • 并能运用所学的CSS,做些文字上的格式化操作。

先从HTML开始吧

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>
    
    <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 one</li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

温馨提示:假设你电脑操作环境不方便创建文件(来跑代码),可以用我们下方给出的在线实时代码编辑器。

添加CSS试试看?

我们最想干的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现,而目前我们更倾向于用,在文档的开头链接CSS的方式(最靠谱、简单的方式)。

在与之前所说的HTML文档的相同目录创建一个文件,名为 styles.css 。(看后缀知道此文件就是CSS)

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

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

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

h1 {
  color: red;
}

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

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

样式化 HTML 元素

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

p {
  color: green;
}

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

p, li {
    color: green;
}

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

 

改变元素的默认行为

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

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

li {
  list-style-type: none;
}

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

欢迎参阅 MDN 上的 list-style-type 属性,看看到底有哪些值被支持。 list-style-type 页首提供互动性示例,您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。

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

使用类名

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

举个例子吧,咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

在 CSS 中,要选中这个 special 类,只需在选择器的开头加个全角句号(.)。在你的 CSS 文档里加上这个:

.special {
  color: orange;
  font-weight: bold;
}

保存再刷新,你看变了吧。

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

有时你会发现选择器中,HTML 元素选择器跟类一起出现:

li.special {
  color: orange;
  font-weight: bold;
}

这个意思是说,“选中每个 special 类的 li 元素”。 你真要这样,好了,它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

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

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

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

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

li em {
  color: rebeccapurple;
}

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

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

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

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

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

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

Styling things based on state

The final type of styling we shall take a look at in this tutorial is the ability to style things based on their state. A straightforward example of this is when styling links. When we style a link we need to target the <a> (anchor) element. This has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated). You can use CSS to target these different states — the CSS below styles unvisited links pink and visited links green.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

You can change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by in the next rule:

a:hover {
  text-decoration: none;
}

In the live example below, you can play with different values for the various states of a link. I have added the rules above to it, and now realise that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold?

 

We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places.

Note: you will often see mention of accessibility in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.

Your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. Or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.

A plain HTML document is generally accessible to everyone — as you start to style that document it is important that you don't make it less accessible.

Combining selectors and combinators

It is worth noting that you can combine multiple selectors and combinators together. So far example:

/* 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 { ... }

You can combine multiple types together, too. Try adding the following into your code:

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

This will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. Phew!

In the original HTML we provided, the only element styled is <span class="special">.

Don't worry if this seems complicated at the moment — you'll soon start to get the hang of it as you write more CSS.

Wrapping up

In this tutorial, we have taken a look at a number of ways in which you can style a document using CSS. We will be developing this knowledge as we move through the rest of the lessons. However you now already know enough to style text, apply CSS based on different ways of targetting elements in the document, and look up properties and values in the MDN documentation.

In the next lesson we will be taking a look at how CSS is structured.

在此模块

  1. 什么是CSS?
  2. 开始学习CSS
  3. CSS代码是如何组织的
  4. CSS是如何工作的
  5. 开始使用你的新知识