CSS样式在网页美化中的作用

《CSS样式在网页美化中的作用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5卷第2期实验科学与技术·45·3CSS样式在网页美化中的作用33王显梅(广西职业技术学院计算机技术系南宁530226)摘要:介绍了利用CSS样式表提高网页维护的更新效率的方法,通过设置CSS样式来实现网页滤镜特效,从而改善网页的外观达到美化网页的作用。最后用实例说明了CSS样式在美化网页中的应用及其所达到的效果。关键词:网页制作;CSS样式;滤镜中图分类号:TP393·0文献标识码:B文章编号:1672-4550(2007)02-0045-03ApplyingCSSStyleinbeautifyingWebpagesWANGXian2mei(GuangxiVocational

2、andTechnicalCollege,DepartmentofComputerTechnologyNanning530226,China)Abstract:ThisarticlemainlyexpoundshowtousetheCSSStyletoimprovetheupdateefficiencyofwebpagemainte2nance,andhowtorealizethespecialeffectofWebpagesfilterbyinstallingCSSStyle,therebytobeautifytheWebpages.Someexamplesaregivenint

3、heend.Keywords:webpagemaking;cssstyle;filter3CSS样式表的种类1引言根据应用范围和应用对象样式表分为3大类:随着网络的发展,多媒体技术逐渐网络化,企(1)户自定义样式表;业、公司甚至个体户都逐渐利用互联网来介绍或宣(2)HTML重定义的样式表;传自己的产品。在互联网中,一个网站有时由几十(3)链接相关样式。页,甚至几百页构成,如果单靠手工对网页的外观4CSS样式表的应用进行修改,那将会是一个非常烦琐的过程。针对以上问题,我们可以使用CSS样式表,来提高网页411使用“CSS样式”面板创建样式的维护更新效率,同时通过设置CSS样式来控制

4、单击“CSS样式”面板中的新建CSS规则按钮,网页的布局和网页特效,从而改善网页的外观达到弹出“新建CSS规则”对话框,如图1所示。美化网页的效果。2CSS的基本概念层叠样式表(CascadingStyleSheet,CSS),通常称之为风格样式单(StyleSheet)。顾名思义,是用来进行页面风格设计的,是一系列格式设置规图1新建CSS样式规则则。CSS样式可以看作是对HTML语言功能的一种图1中,“选择器类型”选项组:共有如下3扩展,它主要是控制Web页面内容的外观,在网个单选按钮。页制作过程中起着非常重要的作用,掌握CSS能“类(可应用于任何标签)”:自定义一个样式,够有

5、效地提高制作效率。可以作为class属性应用于页面中。只要在任一页3[收稿日期]2006-12-31;[修改日期]2007-01-1833[作者简介]王显梅(1978-),女,助理实验师,研究方向:网站开发,数据库应用。·46·实验科学与技术2007年4月面元素上设置class属性,即可使之套用该样式。下拉列表框中选择“td”,并选择“仅对该文档”,在名称的下拉列表框中输入一个名称即可。按确定后弹出如图3所示的设置图。“标签(重新定义特定标签的外观)”:每一个标签都代表一种页面元素。例如:body:代表网页的主体;p:代表一个段落;table:代表一个表格。当选中一个标签并为其设

6、置样式后,页面中所有同类型的页面元素都将自动套用该样式。在标签的下拉列表框中选中一个标签名称即可。“高级(ID、伪类选择器等)”:定义特定标签组合,或者包含有指定ID属性的所有标签的格式,如定义超级链接文字效果。在选择器的下拉列表框图3表格方框填充的设置图中选中链接文字的样式。(3)在“分类”下选择“方框”,打开方框页A:link:设置通常情况下链接文字的样式。面,在该页面的填充标签中输入值10,如果上、A:visited:设置单击后链接文字的样式。下、左、右的填充值一样,则勾选“全部相同”,A:hover:设置鼠标指针移到链接文字上时链按确定后表格中的文字将产生如图4的效果。接

7、文字的样式。A:active:设置鼠标指针移到链接文字上并单击时链接文字时的样式。根据需要,在“选择器类型”中选定某种类型,然后选择该样式的保存形式,外部样式表还是内部样式表。如果是内部样式,则当定义完成后即可应图4表格方框填充后的效果图用到页面;对于外部样式表,可以把其他页面链接到该样式表文件,实现一个样式表文件控制多页的比较图2和图4,可以发现利用CSS样式填充效果。单元格的边框,可以使文字看起来比较整齐,没有412如何把样式应用到网页被表格边框挤压的现象。对于网页格式的统一