CSS技术的网页设计应用研究——科技论文

作者：中州期刊联盟来源：日期：2014-10-19人气：1814

随着社会的进步和时代的飞速发展，互联网技术正在快速的发展中，目前，我国已经全面的进入了网络化的信息时代，网络已经进入我们的日常生活当中，成为日常生活中不可缺少的一部分，网络中的网络页面是主要的展示平台，为了让网络页面可以更好地在多个网络平台上兼容，因此，推出了CSS规范。CSS可以让网页中的代码变得更加简洁，有效地提高网站的下载速度，统一网络页面的风格，并且可以在多个页面中使用外部的连接样式，提高网络代码的重用率。

1.CSS语法及类型

1.1CSS的语法

CSS是我语法有着基本的格式，基本格式如下：

selector {property:value}（选择符 {属性：数值}）

例如：body {color: blue}

选择符中的body指网页页面中的主体部分，color指文字颜色的控制属性，blue值颜色值，这个格式在网页中表现出来的效果是网页中的文字颜色为蓝色。

1.2ID选择符

与ID选择符相似的还有类选择符，只不过，类选择符中使用的是CLASS，而ID选择符中使用的是ID，ID选择符的局限性大，因此，只能对某个元素样式进行单独的定义，一般在特殊的情况下才会使用，例如：<p id="intro">你好</p>，在ID选择符的名称前加“#”号，ID的属性会把所有的id="intro"元素匹配：#intro{font- size:12pt;color:#000;}[1]。

2.CSS使用

2.1外部样式表

外部样式表适用于需要很多个页面的时候，外部样式表是一种文件，里面包含了多个网站或者网络的页面，并且可以在网页中以独立的形式存在，一般，文件的扩展名是.css。使用了外部样式表的多个网络页面，在链接的过程中可以将相同的.css文件链接到，甚至还可以将一个文件进行改变，以此来改变整个站点外观的形象[2]。

在网络页面中加一个网布样式表，例如：mystyle.css，需要把<link>加在文档的头部，作为标签：

<head>

.........

</head>

在外部样式表的文件中，可以对内部文本在编辑器中进行不同的编辑，但是文件中不能出现html的任何代码，以上述例子为例，该文件的内容就是：

p{color:blue;text-align:center;}

body{background-color:#FFFFFF}

2.2内部样式表

当单独的一个网页不需要特殊样式的时候，普遍使用的都是内部样式表。一般，使用<style>作为内部样式表的定义标记，文档的头部处在<head>和</head>的标签之间，例如：

<head>

p{color:blue;text-align:center;}

body{background-color:#FFFFFF}

</style>

……

</head>

这种样式比较简单且实用，并且可以将网站的页面头部都输入相同的样式，就可以让所有的页面都有统一的样式。

2.3内联样式表

内联样式表是可以在HTML中直接加入style参数的，其中，参数的内容是CSS属性的和值，例如：所定义的段落中，元素样式是绿色居中，内嵌的样式就是：

<p style=“color:green;text-align:center”>This is a paragraph</p>

实质上，内联样式表的效率相较于以上两种而言比较低，在网页当中并不推荐使用内联样式表进行网页设计。内联样式表中的样式内容不能进行重复使用。如果将上面的内联样式表中的p 元素进行重复使用，那么，后面进行使用的网页样式就会将p 元素的定义完全重复，其样式的属性也是完全相同的。除此之外，内联样式表中的样式以及标记的内容全部混杂为一体，在代码的阅读和维护方面产生了很大的困难度[3]。

3.CSS在网页设计中实例

3.1多彩文字的效果

把两个内容一样颜色不同的蚊香相互重合在一起，给它添加clip的属性，让上下文字被剪切的位置不一样，以此产生两种不同的颜色。

clip:auto | rect ( number number number number )

其参数为：

auto:对象没有剪切

rect(number number number number):

根据上右下左的顺序，给对象的左上角作为坐标原点，分别计算四个不同的数值，将其中一个数值用auto进行替换。

.textBottom {color: #333333;position: absolute;left: 3em;top: 1em;font: 26px Century Gothic,Arial, Helvetica, sans- serif;clip: rect(18px auto auto auto);}

.textTop {color:#CC0000;position:absolute;left:3em;top:1em;font:26px Century Gothic,Arial, Helvetica, sans- serif;clip: rect(0 auto 18px 0);}

3.2链接变色的效果

文字为红色，点击是黑色，点击过是黄色。

<! - -

a:link {text- decoration: none ; color: red }

a:active {text- decoration: none ; color: black }

a:visited {text- decoration: none ; color: yellow }

- - >

</style>

4.结束语：

随着网络技术的不断发展，CSS技术在网页中的应用方式以及CSS技术的自身发展还有十分广阔的领域和空间。

【参考文献】