MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这是 CSS 入门教程的第9部分,介绍了一些通过CSS改变文档内容的方法。这样,仅修改样式表你就能把文本内容及图片添加到文档。

信息: 内容

CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。

在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候,你可以在样式表中指定内容。

更多细节

在样式表中指定内容会使事情变得复杂:你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译,这就意味着你需要将这部分单独保存在多个样式表中,并在不同语言的文档中引用。

如果你指定的内容由通用符号和图片组成的话,就不存在这个问题。

样式表中指定的内容不会成为DOM的一部分。

文本内容

CSS可以在元素的前后插入文本:在选择器的后面加上::before 或者 ::after 。在声明中,指定 content 属性,并设置文本内容。

下面这条规则在所有类名包含 ref的元素前面加上 Reference:

.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";
}
更多细节

样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 4.4 CSS style sheet representation

还可以通过转义机制(通过反斜杠转义)指定单个字符。比如, \265B 是国际象棋黑皇后的符号 ♛。更多参见 Referring to characters not represented in a character encoding 和CSS规范中的 Characters and case

图片内容

可以通过将content 属性值设置为某个图片的URL,可以将图片插到元素的前面或后面。

下面这条规则在所有类名包含glossary的a标签后面插入一个空格和一个图标:

a.glossary::after {content: " " url("../images/glossary-icon.gif");}

将图片设置成元素的背景图:将 background 的值设为图片的URL。这是同时设置背景颜色,背景图,图片如何重复等的快捷写法。

这条规则通过指定图片URL设置特定元素的背景。

这是一个ID选择器;no-repeat表示背景图只出现一次,不重复:

#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
更多细节

了解更多影响背景图的属性,以及其他背景图选项,参见 background

实践: 添加背景图片

这幅图是一个白方块,底部有一条蓝色实线:

Image:Blue-rule.png
  1. 下载上图放到CSS同目录下
  2. 编辑CSS文件,为body设置背景图.
    background: url("Blue-rule.png");
    

    背景图默认是 repeat(重复)的,无需明确指出。图片在水平和垂直方向重复,最终呈现出横格纸的效果:

    Image:Blue-rule-ground.png

    Cascading Style Sheets

    Cascading Style Sheets

挑战

下载图片:

Image:Yellow-pin.png

在样式表中增加一条规则,使得每行前面显示上面的图标

Image:Blue-rule-ground.png

image:Yellow-pin.png Cascading Style Sheets
image:Yellow-pin.png Cascading Style Sheets
Possible solution

Add this rule to your stylesheet:

p:before{
  content: url("yellow-pin.png");
}

 

Hide solution
答案.

接下来?

列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 为列表元素指定样式

文档标签和贡献者

 此页面的贡献者: Kilimanjaro, Robinx, Harvesty, ziyunfei, teoli, Chajn, aztack
 最后编辑者: Kilimanjaro,