网页设计中CSS应用技术.docVIP

网页设计中CSS应用技术 　　【摘 要】本文从讲述CSS产生的背景过渡到解释什么是CSS技术，CSS与网页的关系等。虽然目前我们使用的CSS技术已经能精确控制网页的整体布局、提高网页代码的重用率、能简化HTML静态网页中的各种繁琐标记、提升网页在互联网上的传输连率、使得网页的更新与维护变得方便。但是在一些实际的使用过程中，由于CSS技术依然存在不少缺陷，因此还是需要进行一些局部的优化操作。 　　【关键词】CSS技术 CSS与网页相关性 CSS缺陷 局部优化 　　一、引言 　　从网络诞生到发展至今.HTML的功能也随着网络的发展而日趋完善。然而，网页内容跟控制样式夹杂混合一直是网页设计语言的一大缺陷。为了能够使网页具有更好的兼容性，万维网联盟制定出统一的CSS规范，把需要利用样式来控制的内容彻底地从网页中分离出来。 　　二、什么是CSS 　　CSS的全称是Cascading Style Sheets，中文又称为“层叠样式表”，是一种用于控制网页页面布局的便捷技术，可以较轻松地控制页面的布局，使页面的元素变得合一；与此同时，它不再需要一页一页地修改单个页面（假设每个页面都是修改相同的部分），而可以将多个网页的风格同时进行更新；并且由于CSS具有非常好的兼容性，几乎能在所有浏览器上使用。因此CSS技术在现代网页设计中得到了非常广泛的应用。 　　三、CSS的产生背景 　　CSS是万维网联盟组织为了克服HTML语言在设计网页样式时的不足而制定出的扩展样式标准。CSS在各个方面不仅原本继承了HTML各种标记的属性设定（即样式） ，同时还扩充了HTML中没有实现的功能区，比如它能够通过VBScript程序等设计语言来控制网页，这样便能实现有效地对网页的外观和布局进行更精确的控制，继而使网页的展示、网页的布局更加灵活。CSS可以将网页内容与控制网页内容的样式分开设定，也就是说将网页的外观设定信息从网页内容中独立出来，并集中管理。如果进一步将重用的CSS样式信息存储为单个独立的文件我们就能让多个不同的网页搭配同一个样式，从而实现统一的风格，这样的话在修改网页模板时可单独修改被保存的独立CSS文件，节省出修改每一个网页文件的时间。 　　CSS的每一条定义都有如下的形式： 　　selector{property： value； property： value；……} 　　其中，selector可以是HTML的tag，ID或class，如P，BODY，A；property就是那些将要被修改的性质（属性），如color；value是给property赋的值（参数），如color的值为red。 　　四、CSS与网页的相关性 　　CSS样式跟HTML网页的完美结合，实现了网页的展现效果控制代码跟网页实际内容的分离。使得新的网页设计经常利用CSS技术来控制网页的样式，这其中通常包括控制页面的整体布局、文字、图片、背景等等相关信息，而HTML则干脆只用来罗列网页中的几大元素。一个完备的CSS样式表可以以多种方式应用到HTML页面当中，但外部连接通常是最常用也是最好的方式之一。这种方式采取将CSS样式代码单独放入一个外部文件中，再由HTML中的link标记来进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。 　　CSS样式在HTML中以STYLE标识出现，其格式为： 　　 　　a{text-decoration：none； color：yellow} 　　a：hover{text-decoration：underline； color：purple} 　　p{font-size：20； background：red； color：blue} 　　 　　将如上代码插入任一HTML文档后，刷新显示，则所有锚点变为普通字体，颜色为黄，但当鼠标移至其上时，则锚点的提示字符变为带下划线的紫色字体；整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰，可以单独的的形式出现，例如 　　 　　................ 　　 　　则此段文字白底蓝字，30个象素大小，且字体加粗。 　　五、CSS缺陷 　　（一）DIV+CSS尽管不是高不可攀，但是在网站建设中至少要比表格定位复杂的多，即使是对于网站建设的高手也是容易出现问题，更不要说是初学者了。（二）CSS网站建设的设计元素通常会放在一个外部文件中，或几个文件，有可能相当的复杂，甚至比较庞大，如果在网站建设中CSS文件调用出现异常，那么整个网站将变得惨不忍睹。（三）虽然说DIV+CSS解决了大部分浏览器兼容的问题，但是也有在部分浏览器中使用出现异常。（四）DIV+CSS在网站建设中对搜索引擎优化与否，取决于网页设计的专