CSS链接样式在网页设计中的应用及分析
2018-05-14刘鹏
刘鹏
摘要：本文在网页设计中采用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）通过在标签上设置样式，可控制住标签中链接的样式，表格外的链接样式不会被设置，此种样式可以写为：
| 链接标题 |
| 链接标题 |
（6）当采用行内样式时，如果设置了多个链接样式，不要把定义的类加在上，浏览器在解析的时候就会出现错误，不显示设置的效果。需要在的外面套个父元素，将类设置在父元素上，要确定设置的类是父级标签，而不是a标签。如：
文字说明3 网页设计中CSS样式实施
网页设计的目的是满足浏览者的需求，在确定网站性质和定位后，根据需求，抓住要点进行规划，选择相应的网页框架组织结构内容和形式。先将内容分类列表，把各个项目分成逻辑组，形成网页的总体结构。其次，确定各级页面主题、包含内容以及各页之间的层次结构，搭建出合理的HTML结构，使用HTML和CSS对页面进行布局并配合美工设计元素，为网页增添交互效果，设计出具有良好视觉效果的页面。
根据前期准备开始设计草图，确定出需要在首页展示的信息。包括：网站标志、导航栏、Banner大图、项目版块（一）、项目版块（二）、相关链接、页脚相关信息、版权信息等。以下为案例部分设计代码：
4 结语
终上所述，明确了CSS在网页设计中的应用。CSS链接样式在网页设计中使用灵活，有效简化了设计程序，使得网页设计更易于维护和操作，更好的实现文本和色彩等元素设计，丰富了页面样式，满足浏览者体验和审美需求。
