CSS链接样式在网页设计中应用及分析.docVIP

CSS链接样式在网页设计中应用及分析 　　摘要：本文在网页设计中采用CSS链接样式表进行分析，针对CSS基本技术以及网页设计中链接样式的应用进行了具体的论述。 　　关键词：CSS；链接样式；网页设计 　　中图分类号：TP37 文献标识码：A 文章编号：1007-9416（2018）02-0162-02 　　随着互联网技术的发展，我国已经全面进入了网络时代，从日常生活中的网络运用来看，各种平台上为了更好地实现网页的兼容，都纷纷采用CSS技术，其编写简单，能够统一管理多个页面，在网页设计中应用广泛。 　　1 CSS样式表概述 　　（1）CSS的英文全称为Cascading Style Sheets，中文名为层叠样式表，可以将样式信息与网页内容分离的一种语言。使用CSS能够控制网页样式，弥补HTML语言的缺陷，实现行间距、字间距的调整，固定背景图像和取消下划线等HTML无法完成的样式表现的效果，对于网页外观来说能够更好地灵活控制布局和美化页面。（2）CSS的作用主要表现在排版布局控制灵活，对网页的显示位置、风格、文本间距、大小、行高、颜色等进行规范设置；方便地为网页中的任何元素设置不同的背景图片和颜色，并且制作的链接效果多种多样。（3）CSS的工作模式是建立外部样式表文件（.css）然后调用该文件，比如：。?@种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页面可以调用，其它页面也可以调用，是最常用的一种形式。 　　2 CSS链接样式的应用 　　（1）在网页制作中采用CSS链接样式，可以用任何CSS属性（如背景、颜色、字体等），同一个CSS设计方案设计多个网页时，需要使用外部样式链接，此种方法的结果是减少网页的代码，修改起来较为方便。 　　（2）CSS链接样式表在网页中存在混用的问题，如何做到混用而不乱。这需要按照从高到低的次序进行执行，保证优先级次序。 　　（3）网页中修改链接的显示效果如何进行，可以通过设置链接标签的样式，改变链接的显示，如下： 　　a：link {color：#FF0000；} 　　a：visied {color：#000000；} 　　a：hover {color：#00FF00；} 　　a：active{color：#0173FF；} 　　此种设置，会将页面的所有链接的效果进行修改。 　　（4）关于链接样式还可以设置到ID或某个类上，再将样式应用某个元素，被应用的元素不会受到整个页面的链接样式的影响，其他元素的链接样式则不会改变。 　　.style1 a：link，.style1 a：visted{color：#000000；} 　　.style1 a：hover，.style1 a：active {color：#00FF00；} 　　比如链接标题 　　链接标题 　　（5）通过在标签上设置样式，可控制住标签中链接的样式，表格外的链接样式不会被设置，此种样式可以写为： 　　 　　 　　 　　.style2 a：link {color：#FF0000；text-decoration：none；} 　　.style2 a：visited {color：#FF0000；text-decoration：none；} 　　.style2 a：hover {text-decoration： none；} 　　.style2 a：active {color：#00FF00；} 　　 　　 　　 　　 　　链接标题 　　链接标题 　　 　　表格外链接 　　var _userid = ;var _siteid =2230;var _istoken = 1;var _model = Model03; WebPageSpeed =125; UrchinTrack(); 　　 　　（6）当采用行内样式时，如果设置了多个链接样式，不要把定义的类加在上，浏览器在解析的时候就会出现错误，不显示设置的效果。需要在的外面套个父元素，将类设置在父元素上，要确定设置的类是父级标签，而不是a标签。如： 　　 文字说明 　　根据前期准备开始设计草图，确定出需要在首页展示的信息。包括：网站标志、导航栏、Banner大图、项目版块（一）、项目版块（二）、相关链接、页脚相关信息、版权信息等。以下为案例部分设计代码： 　　 　　 　　标题 　　 　　body {background：#666666；color：#000000；font-family：”宋体”， “新宋体”；} 　　a：link {color：#666；text-decoration：none；} 　　a：visited {text-decoratio