网页编程学习过程

1、一、 HTML标签（tag）指示元素的起始与结束，以小于号“<”开头，以大于号“>”结尾。有两种标签首标签（start tag）（如<html>）和尾标签（end tag）（如</html>） 粗体显示 <b>这句话应显示为粗体。</b> 多级标题 h1、h2、h3、h4、h5及h6分别表示六级标题 <h1>这是标题</h1> <h2>这是子标题</h2> 首标签和尾标签不是必须的，如下面的换行换行标签：<br />浏览器读HTML就跟你读书一样，也是从上往下，从左到右进行的

2、。 <html> <head> 提供关于当前文档的信息 </head> <body>提供文档的内容 </body> </html>指定HTML文档的网页标题<title>我的第一个网站</title>网页标题（title）不是显示在网页里，而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在body元素里。文本段落<p>哇！这是我的第一个网站。</p>HTML通用模板</html>。 <head><title>我的网站</

3、title> </head> <body><h1>标题</h1><p>一些文字。</p><h2>子标题</h2><p>一些文字。</p> </body> </html>设置斜体<i>这句话应显示为斜体</i> i表示斜体（italic）显示小字体<small>这句话应显示为小字体</small>画水平线<hr />列表：ul代表“无序列表（unordered list）” ol代表“有序

4、列表（ordered list）” li代表“列表项（list item）<ul><li>一个列表项</li><li>另一个列表项</li></ul>该例在浏览器中将显示如下：· 一个列表项 · 另一个列表项<ol><li>第一个列表项</li><li>第二个列表项</li></ol>该例在浏览器中将显示如下：1. 第一个列表项 2. 第二个列表项属性属性应写在元素的首标签上。具体写法是：属性名称（attribute name）后紧

5、跟一个等号（“=”），后面写上用双引号括起来的属性值（attribute value）。对于style属性的值，可以用分号（“;”）来分隔多个样式指令。每个颜色都有其对应的十六进制代码十六进制代码由“#”打头，后面跟六位数字或字母。FFFFFFFFCCFFFF99FFFF66FFFF33FFFF00FFFFFFCCFFCCCCFF99CCFF66CCFF33CCFF00CCFFFF99FFCC99FF9999FF6699FF3399FF0099FFFF66FFCC66FF9966FF6666FF3366FF0066FFFF33FFCC33FF9933FF6633FF3333FF0033FFFF

6、00FFCC00FF9900FF6600FF3300FF0000CCFFFFCCCCFFCC99FFCC66FFCC33FFCC00FFCCFFCCCCCCCCCC99CCCC66CCCC33CCCC00CCCCFF99CCCC99CC9999CC6699CC3399CC0099CCFF66CCCC66CC9966CC6666CC3366CC0066CCFF33CCCC33CC9933CC6633CC3333CC0033CCFF00CCCC00CC9900CC6600CC3300CC000099FFFF99CCFF9999FF9966FF9933FF9900FF99FFCC99CCCC9999

7、CC9966CC9933CC9900CC99FF9999CC9999999999669999339999009999FF6699CC6699996699666699336699006699FF3399CC3399993399663399333399003399FF0099CC0099990099660099330099000066FFFF66CCFF6699FF6666FF6633FF6600FF66FFCC66CCCC6699CC6666CC6633CC6600CC66FF9966CC9966999966669966339966009966FF6666CC666699666666666633

8、6666006666FF3366CC3366993366663366333366003366FF0066CC0066990066660066330066000033FFFF33CCFF3399FF3366FF3333FF3300FF33FFCC33CCCC3399CC3366CC3333CC3300CC33FF9933CC9933999933669933339933009933FF6633CC6633996633666633336633006633FF3333CC3333993333663333333333003333FF0033CC0033990033660033330033000000FF

9、FF00CCFF0099FF0066FF0033FF0000FF00FFCC00CCCC0099CC0066CC0033CC0000CC00FF9900CC9900999900669900339900009900ff6600cc6600996600666600336600006600FF3300CC3300993300663300333300003300FF0000CC00009900006600003300000000制作链接：<a href=" URL（统一资源定位符）URL里必须包含http:/如何在同一网站的网页之间添加相互链接？在同一网站的不同网页间做链接，那就不必拼

10、写出网页的完整URL。假如你有两个网页（比如说page1.htm和 page2.htm），而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样，page1.htm到page2.htm的链接将如下所示：<a href="page2.htm">点击这里转到第2页</a>如果page2.htm被放在下一级文件夹中（比如“subfolder”），那么链接将是这样：<a href="subfolder/page2.htm">点击这里转到第2页</a>反之从page2.htm（在下级文件夹中

11、）到page1.htm的链接将是这样：<a href="./page1.htm">转到第1页</a>在一个网页内部做链接：比如在网页开始处提供一个目录，在其中列出指向下面各章的链接。用id属性标出要被指向的元素。例如：<h1 id="heading1">标题1</h1>然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值，表明链接指向该id属性被定义的地方。例如：<a href="#heading1">转到标题1</a>例子：<h

12、tml> <head></head><body><p><a href="#heading1">转到标题1</a></p><p><a href="#heading2">转到标题2</a></p><h1 id="heading1">标题1</h1><p>一些文字。</p><h1 id="heading2">标题2</h

13、1><p>一些文字。</p> </body></html>为e-mail地址做链接：<a href="mailto:ecnuzhengchen">给辰哥发邮件</a>链接上使用title属性：title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上（别点击它）时，会有相应的提示文字。<a href=" title="上网站学习HTML"></a>在网页中加入图片：img元素没有尾标签，它与<br />一样，不与特定的

14、文本相关。alt属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。加入同文件夹的图片：<img src="david.jpg" alt="David" />加入不同文件夹的图片：<img src="本地路径路径logo.png">加入互联网中的图片：<img src="图片用作链接：<a href=""> <img src="logo.png"></a>width和hei

15、ght属性：width和height属性分别用于设置图像的宽度和高度，以像素为单位。表格：创建表格的3个基本元素1.首标签<table>和尾标签</table>分别表示一个表格的开始与结束。2.tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。3.td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。例子<table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td&g

16、t;单元格3</td><td>单元格4</td></tr></table>表格属性：border用于指定表格四周边框的厚度<table border="1"><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table>width <table bor

17、der="1" width="30%">显示一个表格，其宽度是屏幕宽度的30align: 指定整个表格、某行或某个单元格里内容的水平对齐方式，比如左对齐、居中或右对齐。valign: 指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下。例子：<td align="right" valign="top">单元格1</td>表格的高级属性：colspan是“column span（跨列）”的缩写，colspan属性用在<td>标签中，用来指定单元格横向跨越的列数：<

18、table border="1"><tr><td colspan="3">单元格1</td></tr><tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr></table>执行完之后将在浏览器中如下显示：单元格1单元格2单元格3单元格4如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列

19、数。<table border="1"><tr><td colspan="2">单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr></table>显示入下：rowspan指定单元格纵向跨越的行数<table border="1"><

20、;tr><td rowspan="3">单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td></tr><tr><td>单元格4</td></tr></table>显示效果如下：在进行HTML编码之前，你最好先在纸上把表格设计好。页面布局（CSS）级联样式表（Cascading Style Sheets，简称CSS）为网站设计布局页面。例子：<p style=&q

21、uot;font-size:20px;">这里的文字大小为20</p><p style="font-family:黑体;">这里的文字字体为黑体</p><p style="font-size:20px; font-family:黑体;">这里是文字大小为20、采用黑体的文字</p> /在这里同时进行了字体类型与字体大小的设置，请注意用分号将它们隔开。CSS可以对页面布局进行集中管理。也就是说，你不必在每个标签里都使用style属性；相反，你可以只声明一次，浏览器便会按相应的页面布

22、局效果来显示文本：例子：<html><head><title>我的第一个CSS页面</title><style type="text/css"> h1 font-size:30px; font-family:宋体; h2 font-size:15px; font-family:黑体; p font-size:8px; font-family:"隶书"</style> /集中管理</head><body><h1>我的第一个CSS页面</h1&g

23、t;<h2>欢迎参观我的第一个CSS页面</h2><p>你可以在这里了解CSS的原理</p></body></html>CSS的其他功能：设置文字颜色<p style="color:green;">绿色的文字</p>设置背景图片：<body style="background-image:url('http:/ 或者路径或者同文件夹下的文件名');"> </body>两种方法使用css1. 使用style属性2. 把cs

24、s放在文档的头部head在网页中某一个位置加上框框<p style="padding:25px;border:1px solid red;">我爱CSS</p>显示效果关于css中的paddingpadding 简写属性在一个声明中设置所有内边距属性。例子：<html><head><style type="text/css">td.test1 padding: 1.5cmtd.test2 padding: 0.5cm 2.5cm</style></head><bod

25、y><table border="1"><tr><td class="test1">这个表格单元的每个边拥有相等的内边距。</td></tr></table><br /><table border="1"><tr><td class="test2">这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。</td></tr></table>&

26、lt;/body></html>效果:float属性：定义元素的漂浮方式：靠左还是靠右。例子：<img src="sch.bmp" alt="Bill Gates" style= "float:left;" /><br/><br/><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremag

27、na aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>控制图片出现的位置<img src="sch.bmp" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />在该例中

28、，图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子，实际上你可以把它放在你所期望的任何位置上。二、 CSS加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。<head><style type=”text/css”>Code here</style></head>CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：选择器 属性: 属性值; 例子:h1 font-size: 12px;h

29、2,h4 font-size: 12px; display:inline; 在CSS中，注释以“/*”开始，以“*/”结束Css中的class和id类名和id名不可以用数字开头。class的定义方法： 指定标签. 类名 样式id的定义方法：指定标签#id名 样式<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

30、/1999/xhtml"> <head> <title>我真惨!被用来演示CSS!</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!- h1.dabiaoti font-weight: bolder; text-align: center; h1#daohang font-size: 12px;

31、 font-weight: bolder; text-align: left; h1.xinwen font-size: 16px; font-weight:bold; text-align: center; color:green; -> </style> </head> <body> <h1 class="dabiaoti">我是页面最上端的标题1</h1> <h1 id="daohang">我是页面左侧的标题1，用来导航</h1> <h1 class=&

32、quot;xinwen">我是页面新闻的标题1</h1> <p class="xinwen">我是新闻的内容。</p> </body><p class="xinwen">我是新闻的内容。</p>这里是错误的因为类"xinwen"是给标签h1定义的，而没有给标签p定义。然后我们在想要应用类的标签上加上class(类)或者id属性：class的应用方法：<指定标签 class="类名">id的应用方法：<指定标签

33、id="id名">也可以不指定标签的类或id就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签<p>。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。class(类)与id的区别同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的身份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。为网页添加样式表的几种方式：A：内部样式表<head> <style t

34、ype="text/css"> /*符合CSS语法结构的CSS语句，例如*/ body background-color: blue; </style> </head> B：内嵌样式表<p style="text-indent:24px;">段落内容</p>C：外部样式表使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：<head> <link rel="styles

35、heet" type="text/css" href="文件位置/你的CSS文件名.css" />/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/ </head> 为同一个标签多次设置样式表为同一个标签多次设置样式表，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：p text-align: left; 而在内部样式表中又定义了如下样式：p text-indent: 24px;那么最终网页内p标签的样式将为： p text-align: left;text-indent: 24

36、px;几种方法插入的样式表的优先级1. 行内样式表(内嵌样式表) 2. 内部样式表 3. 外部样式表 4. 补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。 例子：外部样式表的内容：p text-align: center; 内部样式表的内容：p text-align: left; 最终页面中的段落将是左对齐CSS文字属性(font属性)定义字体 font-family<head><style type="text/css"> <!- p.song font-family: "宋体" /*注意中文字体要加引号，英

37、文就不用了*/ p.hei font-family: "黑体" p.eng font-family: Arial; -> </style></head><body> <p class="song">我的字体是宋体</p> <p class="hei">我的字体是黑体</p> <p class="eng">My font family is Arial.</p> </body>p font-f

38、amily: "黑体", "宋体", "新宋体" 这样，当客户的计算机中不存在黑体的时候，它就会以后面的备用字体显示文字。定义文字大小：font-sizep.f16 font-size: 16px; 定义文字样式font-style: p.ita font-style: italic; <p>我是正常样式</p> <p class="ita">我是斜体</p> 定义文字粗细：font-weightp.b font-weight: bold; <p>我是正常

39、的字体。</p> <p class="b">我是粗体</p>文本属性：文本属性主要用于控制页面内文本的属性，例如颜色、间距和首行缩进等等首行缩进：text-intendp text-indent: 24px; 加入上面CSS语句的页面，所有的段落首行都将自动缩进24个像素。文本颜色：color p.lv color: green; p.hong color: red; <p class="lv">我是绿色的</p><p class="hong">我是红色的<

40、/p> 文本对齐属性：text-alignp.zhong text-align: center; p.zuo text-align: left; p.you text-align: right;<p class="zhong">我的对齐方式是居中</p><p class="zuo"><span class="lv">我的对齐方式是左对齐</span></p><p class="you"><span class="

41、;lv">我的对齐方式是右对齐</span></p> 文本修饰：text-decorationp.shang text-decoration: overline; p.xia text-decoration: underline; p.zhong text-decoration: line-through;a.none text-decoration:none; <p class="shang">上划线</p><p class="xia">下划线</p><p c

42、lass="zhong">中划线</p><p ><a href=" class="none">我是一个链接，但是没有下划线。</a></p>一些常用的英文文本修饰：背景属性：background背景颜色属性：background-color<style type="text/css"> body background-color:red ;</style> 背景图片：background-image<style type=&quo

43、t;text/css"> body background-image:url(images/logo.gif);</style> 背景图片注意事项：默认情况下背景图片将会不断重复，直到添满整个页面，下面我们来看看如何控制图片的重复。A：不重复<style type="text/css"> body background-image:url( background-repeat:no-repeat; </style> B：只在水平方向重复<style type="text/css"> body

44、 background-image:url( background-repeat:repeat-x;</style> C：只在垂直方向重复<style type="text/css"> body background-image:url( background-repeat:repeat-y;</style>背景图片位置：background-position<style type="text/css"> body background-image:url( background-position:cent

45、er; background-repeat:no-repeat;</style> 背景图片出现的位置可以是：top、left、right、bottom、center。将背景图片固定在页面的某个位置：background-attachment通过该属性可以设置背景图片是否随着滚动条滚动而改变位置。<style type="text/css"> body background-image:url( background-attachment:fixed; background-repeat:no-repeat </style>backgrou

46、nd-attachment属性值有：fixed（固定）、Scroll（滚动）。列表：Word中有一个“项目符号和编号”的功能。在XHTML中我们无法对列表项目符号做出更改，而CSS赋予了我们这样的能力。因为在CSS中，已经提供了进行列表的专用列表属性。列表属性包括了list-style（列表样式）、list-item（列表项）等多种属性，我们先来看一下列表属性的详细列表：<html><head> <title> fenji css </title> <style type=“text/css”>/*定义CSS*/ <!-pdis

47、play：block；white-space：normal /*定义显示属性为“block”，意思是在新的区域里显示； white-space的属性normal使多重空白合成为一个*/ emdisplay：inline/*定义EM的显示属性为“inline” 目的是为了其控制下的文本显示中不折行*/lidisplay：list-item；list-style：square/*定义li的显示属性为“list-item”，显示在列表项中加入一个符号标记， 而list-style属性值定义为square使列表项前的标记为方块*/imgdisplay：block /*定义图片属性为block使图片在新

48、的位置打开*/ -> </style> </head> <body> <p><em>sample</em>text<em>sample</em>text<em>sample</em> text<em>sample</em> text<em>sample</em></p>/*定义一段文本*/<ul>/*定义列表项*/ <li>list-item 1</li> <li>

49、;list-item 2</li> <li>list-item 3</li> </ul> <p><img src=“ss01068.jpg” width=“280”height=“185” alt=“invisible”></p>/*定义一幅图片*/ </body> </html> Div和spandiv和span是XHTML中比较特殊的标签。结合CSS他们可以实现许多方便的功能。相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1>&

50、lt;/h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。<style type="text/css"> <!-.box background-color: #EEFAF

51、F; width: 30%; float: left; .boxhead font-size: 14px; font-weight: bold; background-color: #AEC6FD; text-align: center; width: 100%; color: #FFFFFF; -> </style> </head> <body><div class="box"><div class="boxhead">我在div内，类为boxhead</div><p&

52、gt;我在div内</p><p>我在div内</p><p>我在div内</p><p>我在div内</p></div></body> </html> 在上面的例子中，我们首先在页面内放了一个class为box的div，而在它的内部又放了一个class为boxhead的div。为了便与观察，我们为div添加了背景颜色。下面我们来看看对这两个div定义的前面教程中没有的属性：对box的属性：width: 30%;表示这个box div占页面宽度的30%，而浮动属性float: le

53、ft; 则表示box div浮动在页面的左侧。 对boxhead的属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。 行级标签<span>(行内标签)本实例在上面实例的基础之上，只修改一段文本的颜色。修改如下代码：将第一个“<p>我在div内</p>”修改为<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p> 盒子首先要清楚，CSS中没有box这个属性。CSS的

54、盒子(box)是由以下几个部分组成的：内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。CSS边框(border).box background-color: #EEFAFF; width: 30%; float: left; border: 1px so

55、lid #000000; 在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，其实它等效与下面的CSS语句：border-style:solid;border-color:#000000;border-width:1px; 下面让我们来看看如何控制某一侧的边框属性。下面的例子添加一个1像素的虚线下侧边框。修改的代码如下：border-bottom:1px dashed #000000;CSS填充属性(padding)填充属性定义的是内容(content)与边框(border)的距离下面我们来为boxhead div添加一个5像素的填充：.box

56、head font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; padding:5px; 与边框属性(border)一样，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。填充距的属性列表CSS边界属性(marging)边距属性的详细列表： 定位(position)相对定位(relative)相对定位是

57、指相对它本来应该处的位置所做的移动。 <style type="text/css">.dingwei position:relative; left:50px; </style> <p>我是一段正常的文本</p> <p class="dingwei">我本来应该在它的正下方，可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p> 绝对定位(absolute)绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。 .dingwei1

58、 position:absolute; top:35px; left:35px; color:#FF0000 .dingwei2 position:absolute; left:50px; top:50px; color:#0000FF; <p class="dingwei1">CSS</p> <p class="dingwei2">绝对定位</p>定位中使用的left属性表示元素距离左侧的距离，而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。绝对定位会按照

59、我们给定的坐标x，y来准确地定位你一个元素。但是问题在于，坐标系的原点在哪里呢？答案就是父元素。上例中，class为"dingwei2"的元素设置为绝对定位，它的父元素为body，所以它其实是相对body位置来定位的的。如果有如下代码：<p> 段落正文 <strong>强调文字</strong><p>若给strong元素设置绝对定位，那么坐标原点将会是父元素p的位置。定位属性详细列表：链接（a）对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。<style type="text/css"

60、;> a:link color: #FF0000; text-decoration: none; a:visited color: #333333; a:hover text-decoration: none; color: #FFFFFF; background-color:#0000FF; a:active text-decoration: none; color: #FFFFFF; </style> 其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码

61、看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。改变局部的链接样式：就以菜鸟吧本身为例子吧。您也许已经注意到了，在菜鸟吧页面的导航部分(页面上方)的链接和教程部分的链接具有不同的样式。事实上是我们只为导航部分的链接定义了样式，而教程主体部分的链接则是正常的链接样式，不受定义影响。如何实现这种对局部链接的样式定义呢？其实这是很简单的。我们只要在链接样式的定义前面加上相应class或者id即可。例如本页面导航部分的id是navbar，那么定义的语句就应该是：#nvbar a:link color: #003366; t

62、ext-decoration: none; #nvbar a:visited text-decoration: none; color: #000000; #nvbar a:hover color: #FFFFFF; background-color:#FF0000; #nvbar a:active text-decoration: none; 这样链接样式的定义就只对id为nvbar的内容起作用了。相应的，如果你希望这些链接的样式只对某个类起作用只要上面的#nvbar替换成该类即可。例如只对class为rightbox的内容起作用，那么就可以定义为：.rightbox a:link color: #003366; text-decoration: none; 假设我们现在有一个页面，它使用了上面的CSS代码。页面中有一个链接，它的代码