摘要：
W3C即万维网联盟（World Wide Web Consortium），是一个制订相关Web标准（如HTML、CSS和XML等）的非盈利组织。微软、Mozilla基金会以及许多其他的公司与组织都是W3C的成员，它们共同协商确定Web标准的未来发展。假如你曾有过Web开发经验的话，你也许知道，同一网页在不同浏览器上的显示效果会存在着天壤之别。要设计一个能在Mozilla、Internet Explorer、Opera及其他现有浏览器上都能良好显示的网页，是件十分费时和令人头痛的事。制订标准的目的就是为了在关于“如何使用Web技术”这个问题上达成统一意见。这意味着，Web开发者只要遵循标准就能确 阅读全文
摘要：
CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数字较小的元素之上。比方说，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌：在这个例子中，我们采用了1-5五个连续的数字来表示堆叠次序，但是你也可以用五个不同的其他数字来取得同样的效果。这里的要点在于：用数字的大小次序反映希望的堆叠次序。扑克牌这个例子的代码可以这样写： #ten_of_diamo. 阅读全文
摘要：
CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参见第13课），你将能够创建多种高级而精确的布局。本课我们将讨论以下内容：CSS定位的原理绝对定位相对定位CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。假设我们要放置一个标题。通过使用盒状模型（参见第9课），标题将显示如下:如果我们要把这个标题放置在距文档顶部100像素、左边200像素的地方，我们可以在CSS中输入以下代码： h1 { position:absolute; top: 100px; left: 200px; } 得到... 阅读全文
摘要：
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：如何实现这个效果？上例的HTML代码如下所示： causas naturales et antecedentes, idciro etiam nostrarum voluntatum... 要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可： #picture { ... 阅读全文
摘要：
到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。设定宽度[width]设定高度[height]设定宽度[width]你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box { width: 200px; border: 1px solid black; background: orange; } 显示示例设定高度[height]注意上一个例子，盒子里内容的长短决定了盒子的高度。你可以通过height属性来设定一个元素的高度。比方说，我们要把上面... 阅读全文
摘要：
边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。border-widthborder-colorborder-style一些示例缩写 [border]边框宽度[border-width]边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下图所示：边框颜色[border-color]CSS属性border-color用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、 “rgb(123,123,123)”、“ye 阅读全文
摘要：
上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。为元素设置外边距为元素设置内边距为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考第9课的图示。在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。满足上述要求的CSS代码如下： body { margin-top:100px; margin-right:40px; ... 阅读全文
摘要：
CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：CSS中的盒状模型上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）： Article 1: All human beings are born free and equal in dignity and rights. They are endowed with . 阅读全文
摘要：
span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。用span组织元素用div组织元素用span组织元素span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子： 早睡早起使人健康、富裕又聪颖。 假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用标签来标记上述每一点好 阅读全文
摘要：
有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。用class对元素进行分类比方说，我们有两个由链接组成的列表，它们分别是用于制造白葡萄酒和红葡萄酒的葡萄。其HTML代码如下： 制造白葡萄酒的葡萄： 雷司令（Riesling） 夏敦埃（Chardonnay） 白比诺（Pinot Blanc） 制造红葡萄酒的葡萄： 卡百内索维农（Cabernet S... 阅读全文