用CSS制作美观的标题文字效果.docVIP

用CSS制作美观的标题文字效果摘要：现在CSS3和HTML5已经开始流行，很多网页视觉效果是可以使用CSS来完成的，本文通过案例系统阐述如何用CSS来制作美化网页的标题文字。关键词：CSS；标题；效果中图分类号：G712 文献标志码：A 文章编号：1674-9324（2015）32-0206-02一、什么是CSSCSS意为层叠样式表。“样式”就是格式，是个中元素在网页中呈现的形态，如文本的大小及颜色、图片大小即位置等。而“层叠”就是在网页中如果同时定义了几个样式，而这几个样式如果互相冲突时，将会按照样式表文件的先后顺序进行应用。CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。CSS是一种比较先进的网页控制技术，使用它可以非常精确地控制网页对象的格式，如果网页中应用了CSS技术，当修改CSS样式时，网页中所有应用该样式的文本会自动更新。样式表信息包括在标记中。如下图：二、用CSS实现标题文字效果现在CSS3和HTML5已经开始流行，很多网页视觉效果是可以使用CSS来完成的，今天向大家展示一下如何用CSS来美化大标题文字，如下图效果，只要熟练掌握CSS代码并灵活应用，只需要简单几步就可以制作出来，比起用PS来制作要简单很多。下面一起看看如何用CSS代码来实现。CSS实现3D感文字标题，效果如下图：代码：.a1{color：#fafafa；letter-spacing：0；font-size：60px；text-shadow：0px 1px 0px #999，0px 2px 0px #888，0px 3px 0px #777，0px 4px 0px #666，0px 5px 0px #555，0px 6px 0px #444，0px 7px 0px #333，0px 8px 7px #001135；}美丽的校园var _userid = ;var _siteid =669;var _istoken = 1;var _model = Model03; WebPageSpeed =422; UrchinTrack();应用CSS制作阴影文字，效果如下图：代码：无标题文档.a1 {font-family：隶书；font-size：80px；font-weight：bolder；color：#e79e21；filter：Shadow（Color=#9caebd，Direction=25）；}美丽的校园var _userid = ;var _siteid =669;var _istoken = 1;var _model = Model03; WebPageSpeed =422; UrchinTrack();使网页文字更生动的遮罩字，效果如下图：代码：meta http-equiv=Content-Type content=text/html；charset=utf-8 /无标题文档.a1 {font-family：隶书；font-size：80px；font-weight：bolder；filter：Mask（Color=white）；}table background=../image/bg1.jpg width=470border=0 cellpadding=0 cellspacing=0 美丽的校园var _userid = ;var _siteid =669;var _istoken = 1;var _model = Model03; WebPageSpeed =422; UrchinTrack();利用发光文字制作网页标题，效果如下图：代码：meta http-equiv=Content-Type content=text/html；charset=utf-8 /无标题文档.a1 {font-size：80px；font-weight：bolder；color：#7b96e7；filter：Glow（Color=#c6d3ff，Strength=20）；}美丽的校园var _userid = ;var _siteid =669;var _istoken = 1;var _model = Model03; WebPageSpeed =141; UrchinTrack();通过以上实例，我们可以看到，应用CSS样式可以很轻松的制作网页特效文字，而且稍作代码的更改就可以迅速改变文字的显示效果。但是，通过实践要注意的是，首先，如果对网页文字使用CSS滤镜的样式，一定要先把文字放在表格里，然后对该表格去应用CSS样式文件。尤其是在做网页遮罩文字效果时。实践证明，应对该文字所在的单元格去应用CSS样式才有效，而不是按常规对表格应用了。其次，要注意浏览器对CSS滤镜的兼容性，要适当灵活地调整相