登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » Introduction 介绍 级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。 本CSS教程能够让你在数小时内入门CSS。它很容易理解，而且将向你介绍所有高级技巧。 学习CSS是很有趣的。你在学习本教程的过程中，记得留有充分的时间来实践你在每一课中学到的知识。 使用CSS要求你有基本的HTML经验。如果你不熟悉HTML，那么请在开始学习CSS之前先学习我们提供的HTML教程。 我需要什么软件？ 在学习本教程时，请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。相反，它们会限制你，并显著减慢你的学习进度。 你所需要的只是一个免费的简易文本编辑器。 例如，微软视窗操作系统（Microsoft Windows）自带的记事本（Notepad）程序。你可以依次点击“开始菜单→程序→附件”找到该程序。如果你用的是其他操作系统，那么也有类似的简易文本编辑器可用，比如Linux上的Pico或Mac（苹果机）上的Simple Text。 采用简易文本编辑器来学习编写HTML和CSS是非常好的，因为它不会影响或修改你所输入的代码。这样，代码的对错完全取决于你自己，而不是软件。 你可以使用任何浏览器。但我们你把浏览器升级至最新版本。 你所需要的全部软件就是一个浏览器和一个简易文本编辑器。 我们现在开始学习CSS吧！ << 目录 第1课：CSS是什么？ >> 讲解 · HTML教程 · CSS教程 · 介绍 · CSS是什么？ · CSS的工作原理 · 颜色与背景 · 字体 · 文本 · 链接 · 元素的分类与标识（class和id） · 组织元素（span与div） · 盒状模型 · 盒状模型——外边距和内边距 · 盒状模型——边框 · 盒状模型——边框 · 浮动元素（float） · 元素的定位 · 用z-index进行层次堆叠 · Web标准与验证 语系 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 页面布局 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 译者 (Translation) 徐涵 (Collin Hsu) 卫建军 (Jianjun Wei) 在线用户: 线上共有 124 位用户：5 位注册用户，0 位隐身用户和 119 位游客 最高在线记录：338，发生于 周二 9月 28, 2010 9:13 am 注册用户： Google [Bot], Google Adsense [Bot], Google Feedfetcher, MSNbot Media, Yahoo [Bot] 统计信息: 发贴总数 4380 - 主题总数：1814 注册用户总数：5220 - 最新注册的用户：junxi714 查看本站用户的完整列表 语系: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Português (Brasil) | Русский | 中文 | 译者 (Translation): 中国万维网联盟(W3CHINA) ( HYPERLINK "mailto:collinATw3china.org" 徐涵 (Collin Hsu) & 周金 (Jin Zhou)) 登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » Introduction 介绍 级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。 本CSS教程能够让你在数小时内入门CSS。它很容易理解，而且将向你介绍所有高级技巧。 学习CSS是很有趣的。你在学习本教程的过程中，记得留有充分的时间来实践你在每一课中学到的知识。 使用CSS要求你有基本的HTML经验。如果你不熟悉HTML，那么请在开始学习CSS之前先学习我们提供的HTML教程。 我需要什么软件？ 在学习本教程时，请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。相反，它们会限制你，并显著减慢你的学习进度。 你所需要的只是一个免费的简易文本编辑器。 例如，微软视窗操作系统（Microsoft Windows）自带的记事本（Notepad）程序。你可以依次点击“开始菜单→程序→附件”找到该程序。如果你用的是其他操作系统，那么也有类似的简易文本编辑器可用，比如Linux上的Pico或Mac（苹果机）上的Simple Text。 采用简易文本编辑器来学习编写HTML和CSS是非常好的，因为它不会影响或修改你所输入的代码。这样，代码的对错完全取决于你自己，而不是软件。 你可以使用任何浏览器。但我们建议你把浏览器升级至最新版本。 你所需要的全部软件就是一个浏览器和一个简易文本编辑器。 我们现在开始学习CSS吧！ << 目录 第1课：CSS是什么？ >> 讲解 · HTML教程 · CSS教程 · 介绍 · CSS是什么？ · CSS的工作原理 · 颜色与背景 · 字体 · 文本 · 链接 · 元素的分类与标识（class和id） · 组织元素（span与div） · 盒状模型 · 盒状模型——外边距和内边距 · 盒状模型——边框 · 盒状模型——边框 · 浮动元素（float） · 元素的定位 · 用z-index进行层次堆叠 · Web标准与验证 语系 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 页面布局 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 译者 (Translation) 徐涵 (Collin Hsu) 卫建军 (Jianjun Wei) 在线用户: 线上共有 124 位用户：5 位注册用户，0 位隐身用户和 119 位游客 最高在线记录：338，发生于 周二 9月 28, 2010 9:13 am 注册用户： Google [Bot], Google Adsense [Bot], Google Feedfetcher, MSNbot Media, Yahoo [Bot] 统计信息: 发贴总数 4380 - 主题总数：1814 注册用户总数：5220 - 最新注册的用户：junxi714 查看本站用户的完整列表 语系: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Português (Brasil) | Русский | 中文 | 译者 (Translation): 中国万维网联盟(W3CHINA) ( HYPERLINK "mailto:collinATw3china.org" 徐涵 (Collin Hsu) & 周金 (Jin Zhou)) 发v登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » 第2课：CSS的工作原理 第2课：CSS的工作原理 在这一课，你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型，以及在HTML文档里使用CSS所必需的代码。 级联样式表（CSS）里用到的许多CSS属性都与HTML属性相似，所以，假如你熟悉采用HTML进行布局的话，那么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。 基本的CSS语法 比方说，我们要用红色作为网页的背景色： 用HTML的话，我们可以这样： 用CSS的话，我们可以这样获得同样的效果： body {background-color: #FF0000;} 你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型： 但是把CSS代码放在哪里呢？这正是我们下面要讲的。 为一个HTML文档应用CSS 为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。 方法1：行内样式表（style属性） 为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

这个页面是红色的

方法2：内部样式表（style元素） 为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

这个页面是红色的

方法3：外部样式表（引用一个样式表文件） 我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。 外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。 例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样： 现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样： 注意要在href属性里给出样式表文件的地址。 这行代码必须被插入HTML代码的头部（header），即放在标签和标签之间。就像这样： ... 这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。 这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。 这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。 让我们来实践刚刚所学到的知识。 自己试试看 打开记事本（或其他文本编辑器），创建两个文件——一个HTML文件，一个CSS文件——它们的内容如下： default.htm

我的第一个样式表

style.css body { background-color: #FF0000; } 然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。 用浏览器打开default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的第一个样式表！ 加快进入下一课，在那里你会学到一些CSS属性。 << 第1课：CSS是什么？ 第3课：颜色与背景 >> 讲解 · HTML教程 · CSS教程 · 介绍 · CSS是什么？ · CSS的工作原理 · 颜色与背景 · 字体 · 文本 · 链接 · 元素的分类与标识（class和id） · 组织元素（span与div） · 盒状模型 · 盒状模型——外边距和内边距 · 盒状模型——边框 · 盒状模型——边框 · 浮动元素（float） · 元素的定位 · 用z-index进行层次堆叠 · Web标准与验证 语系 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 页面布局 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 译者 (Translation) 徐涵 (Collin Hsu) 卫建军 (Jianjun Wei) 在线用户: 线上共有 110 位用户：4 位注册用户，0 位隐身用户和 106 位游客 最高在线记录：338，发生于 周二 9月 28, 2010 9:13 am 注册用户： Ask Jeeves [Bot], Google [Bot], Google Adsense [Bot], Majestic-12 [Bot] 统计信息: 发贴总数 4380 - 主题总数：1814 注册用户总数：5220 - 最新注册的用户：junxi714 查看本站用户的完整列表 语系: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Português (Brasil) | Русский | 中文 | 译者 (Translation): 中国万维网联盟(W3CHINA) ( HYPERLINK "mailto:collinATw3china.org" 徐涵 (Collin Hsu) & 登录周金 (Jin | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » 第3课：颜色与背景 第3课：颜色与背景 本课，你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。本课将对下列CSS属性进行讲解： · color · background-color · background-image · background-repeat · background-attachment · background-position · background 前景色：‘color’属性 CSS属性color用于指定元素的前景色。 例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。 h1 { color: #ff0000; } · 显示示例 颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。 ‘background-color’属性 CSS属性background-color用于指定元素的背景色。 因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。 你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。 body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } · 显示示例 注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。 背景图像[background-image] CSS属性background-image用于设置背景图像。 在下面的示例中，我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。当然，你也可以选用其他你觉得满意的图片。 如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。 body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } · 显示示例 注意我们指定图片存放位置的方式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url("http://www.html.net/butterfly.gif")）。 平铺背景图像[background-repeat] 你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了？CSS属性background-repeat就是用于控制平铺的。 下表概括了background-repeat的四种不同取值。 值 描述 示例 background-repeat:repeat-x 图像横向平铺 显示示例 background-repeat:repeat-y 图像纵向平铺 显示示例 background-repeat:repeat 图像横向和纵向都平铺 显示示例 background-repeat:no-repeat 图像不平铺 显示示例 例如，为了避免平铺背景图像，代码应该这样： body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; } · 显示示例 固定背景图像[background-attachment] CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。 一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。 下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。 值 描述 示例 background-attachment:scroll 图像会跟随页面滚动——非固定的 显示示例 background-attachment:fixed 图像是固定在屏幕上的 显示示例 例如，下面的代码将背景图像固定在屏幕上。 body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; } · 显示示例 放置背景图像[background-position] 缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。 设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。 坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释： 下表给出了一些例子。 值 描述 示例 background-position:2cm 2cm 图像被放置在页面内距左边2厘米、顶部2厘米的地方 显示示例 background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处 显示示例 background-position:top right 图像被放置在页面的右上角 显示示例 在下例中，背景图像被放置在页面的右下角： body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } · 显示示例 缩写[background] CSS属性background是上述所有与背景有关的属性的缩写用法。 使用background属性可以减少属性的数目，因此令样式表更简短易读。 比如说下面五行代码： background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; 如果使用background属性的话，实现同样的效果只需一行代码即可搞定： background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; 各个值应按下列次序来写： [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] 如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话： background: #FFCC66 url("butterfly.gif") no-repeat; 这两个未指定值的属性将被设置为缺省值：scroll和top left。 小结 在这一课，你学会了无法用HTML替代的新技术。下一课同样是充满乐趣的，在那里我们将考察CSS在设置字体方面的各项功能。 << 第2课：CSS的工作原理 第4课：字体 >> 讲解 · HTML教程 · CSS教程 · 介绍 · CSS是什么？ · CSS的工作原理 · 颜色与背景 · 字体 · 文本 · 链接 · 元素的分类与标识（class和id） · 组织元素（span与div） · 盒状模型 · 盒状模型——外边距和内边距 · 盒状模型——边框 · 盒状模型——边框 · 浮动元素（float） · 元素的定位 · 用z-index进行层次堆叠 · Web标准与验证 语系 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 页面布局 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 译者 (Translation) 徐涵 (Collin Hsu) 卫建军 (Jianjun Wei) 在线用户: 线上共有 99 位用户：3 位注册用户，0 位隐身用户和 96 位游客 最高在线记录：338，发生于 周二 9月 28, 2010 9:13 am 注册用户： Ask Jeeves [Bot], Google [Bot], Google Adsense [Bot] 统计信息: 发贴总数 4380 - 主题总数：1814 注册用户总数：5220 - 最新注册的用户：junxi714 查看本站用户的完整列表 语系: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Português (Brasil) | Русский | 中文 | 译者 (Translation): 中国万维网联盟(W3CHINA) ( HYPERLINK "mailto:collinATw3china.org" 徐涵 (Collin Hsu) & 周金 (Jin Zhou)) Zhou) ) 登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » 第4课：字体 第4课：字体 这一课，你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解： · font-family · font-style · font-variant · font-weight · font-size · font 字体族[font-family] CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。 有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。 字体族名称（family-name） 字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。 族类（generic family） 一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。 下面我们通过三个族类的例子来进行解释： 你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。 下面是一个按优先级排列的字体列表的例子： h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} · 显示示例 h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。 注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。 字体样式[font-style] CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。 h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} · 显示示例 字体变化[font-variant] CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子： 如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。 h1 {font-variant: small-caps;} h2 {font-variant: normal;} · 显示示例 字体浓淡[font-weight] CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。 p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;} · 显示示例 字体大小[font-size] 字体的大小用CSS属性font-size来设置。 字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如： h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} · 显示示例 上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像‘%’或‘em’这种允许用户调节字体显示大小的单位。 下面你能看到我们展示如何在Mozilla Firefox和Internet Explorer里调整字体大小。自己试试看！这个功能很不错吧？ 缩写[font] CSS属性font是上述各有关字体的CSS属性的缩写用法。 比如说下面四行应用于p元素的代码： p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } 如果用font属性的话，上述四行代码可简化为： p { font: italic bold 30px arial, sans-serif; } font属性的值应按以下次序书写： font-style | font-variant | font-weight | font-size | font-family 小结 在这一课，你学习了有关字体设置的用法。记住：CSS的一个主要优势就是可以在任何时候设置字体，你花几分钟就可以改变整个网站的字体。CSS节省时间，而且把事情简化。在下一课，我们将学习文本（text）。 << 第3课：颜色与背景 第5课：文本 >> 讲解 · HTML教程 · CSS教程 · 介绍 · CSS是什么？ · CSS的工作原理 · 颜色与背景 · 字体 · 文本 · 链接 · 元素的分类与标识（class和id） · 组织元素（span与div） · 盒状模型 · 盒状模型——外边距和内边距 · 盒状模型——边框 · 盒状模型——边框 · 浮动元素（float） · 元素的定位 · 用z-index进行层次堆叠 · Web标准与验证 语系 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 页面布局 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 窗体底端 译者 (Translation) 徐涵 (Collin Hsu) 卫建军 (Jianjun Wei) 在线用户: 线上共有 107 位用户：3 位注册用户，0 位隐身用户和 104 位游客 最高在线记录：338，发生于 周二 9月 28, 2010 9:13 am 注册用户： Ask Jeeves [Bot], Google [Bot], Google Adsense [Bot] 统计信息: 发贴总数 4380 - 主题总数：1814 注册用户总数：5220 - 最新注册的用户：junxi714 查看本站用户的完整列表 语系: العربية | Deutsch | English | Español | Français | עברית | Italiano | Polski | Português (Brasil) | Русский | 中文 | 译者 (Translation): 中国万维网联盟(W3CHINA) ( HYPERLINK "mailto:collinATw3china.org" 徐涵 (Collin Hsu) & 周金 (Jin Zhou)) 登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » 第5课：文本 第5课：文本 文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解： · text-indent · text-align · text-decoration · letter-spacing · text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。 p { text-indent: 30px; } · 显示示例 文本对齐[text-align] CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。 在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。 th { text-align: right; } td { text-align: center; } p { text-align: justify; } · 显示示例 文本装饰[text-decoration] CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。 h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } · 显示示例 字符间距[letter-spacing] CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写： h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } · 显示示例 文本转换[text-transform] CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。 比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。text-transform属性有四个可选值： capitalize 将每个单词的首字母转换为大写。例如：“john doe”将被转换为“John Doe”。 uppercase 所有字母都转换为大写。例如：“john doe”将被转换为“JOHN DOE”。 lowercase 所有字母都转换为小写。例如：“JOHN DOE”将被转换为“john doe”。 none 不作任何转换——文本怎么写的就怎么显示。 来举个例子，我们将使用一个姓名列表。所有姓名都用

（列表项）标签来标记。我们希望对姓名采用首字母大写的方式，而对标题采用全部大写的方式。 查看过该例的HTML代码后你会发现，其实在HTML代码里我们写的姓名和标题全部都是小写。 h1 { text-transform: uppercase; } li { text-transform: capitalize; } · 显示示例 小结 在上面三课里，你已经学习了一些CSS属性，不过还有更多需要学习。在下一课我们将对链接作有关介绍。 << 第4课：字体 第6课：链接 >> 登录 | 注册 | FAQ · 首页 · 讲解 · 版面 · 关于 窗体顶端 HTMLCONTROL Forms.HTML:Submitbutton.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 HTMLCONTROL Forms.HTML:Hidden.1 窗体底端 首页 » 讲解 » CSS » 第6课：链接 第6课：链接 你在前面几课学到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。 伪类是什么？ 伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。 我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器（selector）： a { color: blue; } 一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。 a:link { color: blue; } a:visited { color: red; } 为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。 我们将逐个解释这四个伪类，并给出示例。 伪类：link 伪类:link用于浏览者从未访问过的链接。 在下面的示例代码中，我们将未访问过的链接设为浅蓝色。 a:link { color: #6699CC; } · 显示示例 伪类： visited 伪类:visited用于浏览者已访问过的链接。比如，下面的代码将已访问过的链接设为深紫色： a:visited { color: #660099; } · 显示示例 伪类： active 伪类:active用于活动的链接（即获得当前焦点的链接）。 下例将活动的链接设为具有黄色背景： a:active { background-color: #FFFF00; } · 显示示例 伪类： hover 伪类:hover用于有鼠标悬停的链接。 这能制造出有趣的效果。例如，如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写： a:hover { color: orange; font-style: italic; } · 显示示例 例1：有鼠标悬停的链接的效果 为链接设置悬停效果十分流行。所以，我们将多看几个:hover伪类的例子。 例1a：字符间距 我们在第5课学过，可以用letter-spacing属性来调整字符间距。现在为了取得特殊效果，我们将它应用到链接上： a:hover { letter-spacing: 10px; font-weight:bold; color:red; } · 显示示例 例1b：大写和小写 同样在第5课我们学过，可以通过text-transform属性来转换字母的大小写。这也可用于为链接制造效果： a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:ye