摘要: W3C即万维网联盟(World Wide Web Consortium),是一个制订相关Web标准(如HTML、CSS和XML等)的非盈利组织。微软、Mozilla基金会以及许多其他的公司与组织都是W3C的成员,它们共同协商确定Web标准的未来发展。假如你曾有过Web开发经验的话,你也许知道,同一网页在不同浏览器上的显示效果会存在着天壤之别。要设计一个能在Mozilla、Internet Explorer、Opera及其他现有浏览器上都能良好显示的网页,是件十分费时和令人头痛的事。制订标准的目的就是为了在关于“如何使用Web技术”这个问题上达成统一意见。这意味着,Web开发者只要遵循标准就能确 阅读全文
posted @ 2013-08-14 20:38 Jason_shang 阅读(131) 评论(0) 推荐(0) 编辑
摘要: CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌:在这个例子中,我们采用了1-5五个连续的数字来表示堆叠次序,但是你也可以用五个不同的其他数字来取得同样的效果。这里的要点在于:用数字的大小次序反映希望的堆叠次序。扑克牌这个例子的代码可以这样写: #ten_of_diamo. 阅读全文
posted @ 2013-08-14 20:37 Jason_shang 阅读(146) 评论(0) 推荐(0) 编辑
摘要: CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容:CSS定位的原理绝对定位相对定位CSS定位的原理把浏览器窗口想象成一个坐标系统:CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。假设我们要放置一个标题。通过使用盒状模型(参见第9课),标题将显示如下:如果我们要把这个标题放置在距文档顶部100像素、左边200像素的地方,我们可以在CSS中输入以下代码: h1 { position:absolute; top: 100px; left: 200px; } 得到... 阅读全文
posted @ 2013-08-14 20:36 Jason_shang 阅读(135) 评论(0) 推荐(0) 编辑
摘要: 我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理:举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示:如何实现这个效果?上例的HTML代码如下所示: causas naturales et antecedentes, idciro etiam nostrarum voluntatum... 要实现图片向左浮动、而且被文字环绕的效果,你只需先设定图片所在盒子的宽度,然后再把CSS属性float设为left即可: #picture { ... 阅读全文
posted @ 2013-08-14 20:35 Jason_shang 阅读(181) 评论(0) 推荐(0) 编辑
摘要: 到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。设定宽度[width]设定高度[height]设定宽度[width]你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box { width: 200px; border: 1px solid black; background: orange; } 显示示例设定高度[height]注意上一个例子,盒子里内容的长短决定了盒子的高度。你可以通过height属性来设定一个元素的高度。比方说,我们要把上面... 阅读全文
posted @ 2013-08-14 20:34 Jason_shang 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 边框(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 阅读全文
posted @ 2013-08-14 20:33 Jason_shang 阅读(146) 评论(0) 推荐(0) 编辑
摘要: 上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。为元素设置外边距为元素设置内边距为元素设置外边距一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考第9课的图示。在下面这个例子中,我们将了解如何为文档本身(即body元素)定义外边距。下图显示了我们对外边距的要求。满足上述要求的CSS代码如下: body { margin-top:100px; margin-right:40px; ... 阅读全文
posted @ 2013-08-14 20:32 Jason_shang 阅读(433) 评论(0) 推荐(0) 编辑
摘要: 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 . 阅读全文
posted @ 2013-08-14 20:31 Jason_shang 阅读(205) 评论(0) 推荐(0) 编辑
摘要: span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。用span组织元素用div组织元素用span组织元素span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本增添视觉效果。让我们用一句本杰明·弗兰克林(Benjamin Franklin)的名言来举个例子: 早睡早起使人健康、富裕又聪颖。 假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处,我们可以用标签来标记上述每一点好 阅读全文
posted @ 2013-08-14 20:30 Jason_shang 阅读(213) 评论(0) 推荐(0) 编辑
摘要: 有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。用class对元素进行分类比方说,我们有两个由链接组成的列表,它们分别是用于制造白葡萄酒和红葡萄酒的葡萄。其HTML代码如下: 制造白葡萄酒的葡萄: 雷司令(Riesling) 夏敦埃(Chardonnay) 白比诺(Pinot Blanc) 制造红葡萄酒的葡萄: 卡百内索维农(Cabernet S... 阅读全文
posted @ 2013-08-14 20:29 Jason_shang 阅读(156) 评论(0) 推荐(0) 编辑
摘要: 你在前面几课学到的属性也可以应用到链接上(比如修改颜色、字体、添加下划线等)。但不同的是,CSS允许你根据链接是未访问的、已访问的、活动 的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。你需要通过伪类(pseudo-class)来控制这些效果。伪类是什么?伪类(pseudo-class)令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。我们来看一个例子。正如你所知道的,在HTML里,链接是通过a元素来定义的。因此,在CSS里,我们可以将a作为一个选择器(selector): a { color: blue; } 一个链接可以有不同的状态。... 阅读全文
posted @ 2013-08-14 20:28 Jason_shang 阅读(169) 评论(0) 推荐(0) 编辑
摘要: 文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解:text-indenttext-aligntext-decorationletter-spacingtext-transform文本缩进[text-indent]CSS属性text-indent用于为段落设置首行缩进,以令其具有美观的格式。在下例中,我们为采用p元素的段落应用了30像素的首行缩进。 p { text-indent: 30px; } 显示示例文本对齐[text-align]CSS属性text-align与HTML属性align的功能相同。... 阅读全文
posted @ 2013-08-14 20:27 Jason_shang 阅读(202) 评论(0) 推荐(0) 编辑
摘要: 这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解:font-familyfont-stylefont-variantfont-weightfont-sizefont字体族[font-family]CSS属性font-family的作用是设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表中的下一个字体,依此类推,直到列表中的某个字体是已安装的。有两种类型的名称可用于分类字体:字体族名称(family-name)和族类名称(generi 阅读全文
posted @ 2013-08-14 19:42 Jason_shang 阅读(183) 评论(0) 推荐(0) 编辑
摘要: 本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。本课将对下列CSS属性进行讲解:colorbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground前景色:‘color’属性CSS属性color用于指定元素的前景色。例如,假设你要让页面中的所有标题(headline)都显示为深红色,而这些标题采用的都是h1元素,那么可以用下面的代码来实现把h1元素的前景色设为红色。 h1 { color: #ff0000; } .. 阅读全文
posted @ 2013-08-14 19:22 Jason_shang 阅读(227) 评论(0) 推荐(0) 编辑
摘要: 在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。级联样式表(CSS)里用到的许多CSS属性都与HTML属性相似,所以,假如你熟悉采用HTML进行布局的话,那么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。基本的CSS语法比方说,我们要用红色作为网页的背景色:用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 你会注意到,HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型:但是把CSS代码放在哪里呢... 阅读全文
posted @ 2013-08-14 19:21 Jason_shang 阅读(219) 评论(0) 推荐(0) 编辑
摘要: 也许你曾听说过CSS,但并不真正清楚CSS到底是什么。在这一课,你将学到更多CSS的知识,并了解CSS可以做些什么。CSS是Cascading Style Sheets(级联样式表)的缩写。可以用CSS做什么?CSS是一种样式表语言,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。拭目以待吧!HTML可以用于为网站添加布局效果,但有可能被误用。而CSS则提供了更多选择,而且更为精确、完善。现在所有浏览器都支持CSS。经过下面若干课的学习之后,你将能够制作自己的CSS样式表,为自己的网站增添花样了。CSS跟HTML的区别在哪里?HTML用于结构 阅读全文
posted @ 2013-08-14 19:20 Jason_shang 阅读(153) 评论(0) 推荐(0) 编辑