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

史春妹 辽宁省凌源市职业教育中心

关键字：网页设计 CSS

目前，市面上流行的网页设计软件较多，如FrontPage、Dreamweaver等，这些软件功能强大，操作简单，而在网页设计中应用CSS技术，能够使网页元素更加生动，使网页布局更加规范合理，更能起到吸引用户的作用。

一、CSS的含义与分类

1.CSS的含义

CSS（Cascading Style Sheets）是层叠样式表单的缩写，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS不仅可以应用于静态网页之中，还可以结合JavaScript等脚本语言实现动态网页的格式化。

2.CSS的分类

CSS可以分为三种，分别是外部样式表、内嵌样式表和行内样式表。其中，外部样式表是独立于网页文件之外的单独的样式文件，其扩展名为.CSS，用户可以使用记事本等文本编辑软件对CSS文件进行编辑修改。在网页设计中，任何链接到该外部样式表的网页文件，均可以应用该样式。例如：＜link rel=”style sheet” href=”first.css”type=”text/css”＞。内嵌样式表是嵌套在网页文件中的样式，一般位于＜head＞和＜/head＞之间，内嵌样式表只在当前网页中起作用，其格式为：＜head＞＜style type=”text/css”＜！--样式表的具体内容--＞＜/stype＞＜/head＞。行内样式表是位于HTML语句中的样式，它仅仅是一条HTML标记，是通过网页“属性”中的“样式”按钮定义添加的，例如：＜table style=”color：red；font-size：10pt”＞。这三种样式中，行内样式表优先级最高，内嵌样式表次之，外部样式表最低。

二、在网页设计中应用CSS样式的优势

1.减少网页文件代码量

CSS样式表具有强大的功能，不仅可以对网页中的文字字体、字号、颜色、字符间距、对齐方式等字符属性进行设置，还可以对图片属性、背景颜色、表格属性、页面布局等进行统一定义，避免了在每个网页中进行分别定义的重复操作，可以有效减少网页文件的代码量，提高网页的访问速度。

2.便于管理人员后期修改维护

很多网站在建成以后会进行修改或改版操作，对于应用了CSS样式的网站来说，修改起来会相对方便很多，修改时只需要修改对应的.CSS文件中的定义就能实现，而不必对每个网页文件进行逐一修改，从而节省修改维护的成本及时间。

3.使网页保持统一的风格

一般情况下，一个网站中的所有网页应具有统一的风格，在文字字体颜色大小、导航条的位置、表格属性的设置等方面都要保持一致，因此，可以将这些属性定义在一个CSS外部样式表中，网站的所有网页文件均链接到此CSS文件中，既能实现网页风格的统一，又可以有效地减少设计人员的工作量。

4.利于被搜索引擎收录

精炼的网站可以增加搜索关键字在网站中的比重，在网页中加入大量的格式化脚本语言，势必增加网页的代码量。而CSS样式具有简洁明了的特点，运用CSS技术设计网页可以缩小网站的体积，减少访问网站的带宽与流量，更加有利于被搜索引擎收录。

三、使用CSS技术应遵循的原则

1.语句尽量清晰明确，通俗易懂

CSS样式的定义一定要简单明确，保持网页样式的简洁明了，既有利于后期的修改，又有利于网页运行。

2.不要过多地定义CSS样式

CSS样式的优势就在于一个CSS文件可以应用到多个网页之中，实现网页的统一设计管理。在定义CSS样式时，要尽可能多的将其应用于多个网页中，如果一个网页定义一个CSS文件，则会使网站变得繁琐，CSS样式定义也变得毫无意义。

3.恰当地为代码添加注释

网站建设是一项庞大的工程，往往由多人组成的团队来完成，为了让其他网页设计人员更好地了解网页样式的功能与作用，在进行网页设计时要养成添加HTML注释的习惯，可以方便地进行查找、对比，方便团队中的其他人员对代码的理解。添加注释的方法很简单，如：＜！--这是一条注释--＞，注释的内容不会在浏览器中显示出来。

4.尽量使用外部样式表进行定义

外部样式表是独立于网页文件之外的.CSS文件，在一个网站中可以将一个.CSS文件应用于多个甚至所有的网页文件，这样不仅可以节省网站空间，在修改网页样式时也可以通过修改CSS文件实现多个网页格式的修改，从而保持网站整体一致，同时可以提高工作效率。

CSS在网页设计中具有重要的作用，合理恰当地运用CSS技术进行网页设计，可以使网页文件代码更加简洁，节省网站带宽，同时CSS技术具有良好的兼容性，可以确保网页在不同的浏览器中得以正常显示，专业网页设计人员应灵活运用这一工具进行页面布局与美化。