视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS技术在网页设计中的运用
2025-09-29 22:27:43 责编:小OO
文档

CSS技术在网页设计中的运用

日期:2003:3:21 刘晖  查看:[大字体 中字体 小字体]

多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText 

  Markup Language, 

  HTML)提供增强补充服务的技术,可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页,对页面内各部分的修饰能力有限且语句烦锁,CSS正是弥补这一缺陷的有力技术,它语句、文法简单,只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。 

  

  

  ---- CSS在HTML中以STYLE标识出现,其格式为:一对代表CSS 技术的STYLE置标,内放被修饰的HTML置标,置标的CSS属性放于紧随其后的一对大括号内,每个属性赋值用":",多个属性之间用";"隔开,例: 

  

  

  < style > 

  a{text-decoration:none; color:yellow} 

  a:hover{text-decoration:underline; color:purple} 

  p{font-size:20; background:red; color:blue} 

  < /style > 

  

  ---- 

  将如上代码插入任一HTML文档后,刷新显示,则所有锚点变为普通字体,颜色为黄,但当鼠标移至其上时,则锚点的提示字符变为带下划线的紫色字体;整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰,可以单独的的形式出现,例如 

  

  

  < p style="font-size:30; font-weight 

  :bolder; background:white;color:blue" > 

  ................ 

  < /p > 

  

  ---- 则此段文字白底蓝字,30个象素大小,且字体加粗。随后是一个带有CSS技术的HTML文档的完整例子: 

  

  < html > 

  < head > 

  < title > 如何使用CSS < /title > 

  < /head > 

  < body > 

  < style > 

  a{text-decoration:none; background:red; color:yellow} 

  a:hover{text-decoration:line-through; background:lime} 

  h1{text-align:center; font-weight:900; 

  border-style:ridge; border-width:medium; border-color:red} 

  p.first{font-size:15; font-face:楷体; 

  color:blue; border-style:dotted; 

  border-width:thin; border-color:blue} 

  p.second{font-size:20; word-spacing:10; background:aqua} 

  < /style > 

  < h1 > 带连框的题头1 < /h1 > 

  < a href=mailto:wow20000@hotmail.com?subject=CSS > 

  鼠标移至此处, 背景变化 

  < /a > 

  < p > 未加CSS修饰的段落 < /p > 

  < p class=first > 指定CSS修饰的段落 < /p > 

  < p class=second > 指定另一种CSS修饰的段落 < /p > 

  < /body > 

  < /html > 

  

  ---- 从上例的显示可以看出,CSS是HTML的一个补充,几乎可以对每一个HTML置标进行扩充,使网页充满活力,显示出更加完美的效果。 

下载本文
显示全文
专题