css技术在网页设计中的应用_第1页
css技术在网页设计中的应用_第2页
css技术在网页设计中的应用_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

1层叠样式表ss在过去几年中，web的功能有了很大进步，但文档结构与风格的混合一直是web语言的一大缺陷。为了能够让网页更好的在各种平台上兼容,W3C标准化组织推出CSS规范,将描述样式的内容彻底地独立于结构文档。CSS的英文全称是CascadingStyleSheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的便捷技术。它的主要用途如下:可以轻松地控制页面的布局;使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目;你可以将许多网页的风格格式同时更新,不用再一页一页地修改;以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而可以更快地下载页面;在几乎所有的浏览器上都可以使用。正是层叠样式表卓越的功能使得它在现在网页设计中得到了广泛的推广与应用。2ases应用程序的形式2.1网页风格管理在HTML文件里加一个超级链接,引入外部的CSS文档。这个方法最方便管理整个网站的网页风格,它让网页的文字内容与版面设计分开。只要在一个CSS文档内(扩展名为CSS)定义好网页的风格,然后在网页中加一个超级链接连接到该文档,那么网页就会按照在CSS文档内定义好的风格显示出来。2.2形成文件的文件这种方式与外部链接式的区别在于它是将风格直接定义在文档头<head>和</head>标签之间,而不形成文件。这种风格定义产生作用的范围也只限于本文档,格式如下:2.3段+时长对风格的确定在HTML文件的文本内容中,随时有需要,可随时加一小段CSS的描述指定风格。如规定一个Table标签中字体为红色,字体大小为10pt,则可书写为:这个方法主要用于对具体的标签做具体的调整,其作用范围只限于本标签。2.4输出属性叠加如果在同一个选择器上使用几个不同的样式表时,这个属性值将会叠加几个样式表,遇到冲突的地方将以最后定义的为准。例如,我们首先链入一个外部样式表,其中定义了h3选择符的color、text-alig和font-size属性:h3{color:red;text-align:left;font-size:8pt;}。然后在内部样式表里也定义了h3选择符的text-align和font-size属性:h3{text-align:right;font-size:20pt;}。那么这个页面叠加后的样式就是:color:red;text-align:right;font-size:20pt;字体颜色从外部样式表里保留下来,而对齐方式和字体尺寸都按照后定义的内部样式表执行。因此,多重样式表叠加时,执行规则为后定义优先的原则。3减少图像质量为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量,影响网站的美观。由CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑采取措施减少CSS样式表文件的大小。但是,通过使用CSS缩写以及其他的一些简单技巧,就可以在很大程度上减少样式表的大小。在对样式表的优化测试中发现,可以让其文件的大小降低25-50%。3.1在图形中组合一个/属性CSS的缩写性质(shorthandproperty)是一些专用的性质名,用来代替多个相关性质的集合。例如,间隙性质(paddingproperty)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。使用缩写性质能够把多个性质/属性对压缩进CSS样式表的一行代码里。例如下面的代码:将它用一些缩写性质来替代就能够把代码减少,两者的实际效果完全一样:此外,缩写性质还有多个属性,每一个(属性)都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。当属性是类似的值的时候,连接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部开始,然后围绕格子(box)按顺时针次序继续。如果缩写性质的所有属性都是相同的,那么你可以简单地列出单个属性,省略后面三项的书写。因此,下面的两个属性设置是相同的:属性的顺序在它们是不相似的值的时候是不重要的。因此,边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质(outlineproperty)之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。3.2检测样式的改进代码重用是CSS的优势之一,虽然基本的CSS编写已经使网站中大部分样式代码得到了重用,但是基于设计者本身的原因,CSS的众多样式中往往有很多样式代码一样,但没有得到很好的重用,例如如下CSS代码:这段代码是用于一篇文章页面显示的CSS样式表,通过CSS对页面的各个元素进行了定义,编写了样式,并成功的在浏览器中达到了预想的效果。代码虽然简单,但是如果仔细看,会发现其实还可以继续优化使CSS更简单。在页面中我们发现有不少元素都具有相同的属性,如body与#contentul都有margin;0px;而#nav与#content都具有相同的padding值,因此可以从这两个地方入手将代码进行合并优化,找出其中相似的代码,通过群组选择符进行样式的集中,改进后的代码如下:改进后的代码我们使用了群组选择符,将大部分公用代码进行了集合,如因为页面中大部分元素都具有的margin:0px;属性,因此使用*选择符直接对页面中所有元素进行margin与padding值的设置,本页中的#header与链接都采用白色,因此使用#header,a选择符将两个白色放置在了一起,以此类推,将页面中公共选择全部进行了集中编写,而剩下的各个部分的代码相当简单,而这些公共属性在实际编码中相当于只使用了一句代码就完成了对大多数元素的设置。3.3ss样式的公共属性前文我们已经讨论了多重样式表的叠加,得出了后定义优先的原则,利用这一原则,可以使用覆盖方式使得代码得到重用,如以下CSS样式:对于这样的一段CSS样式,已经根据代码重用的原则将其公共属性使用群组选择符进行了共用,但是仔细分析3个样式的边框属性,除了颜色不同之外,并没有别的不同。这时我们可以将其归为公共属性,通过单独的颜色修改来控制各个不同的样式,优化后的样式如下:优化后的代码,使3个样式都具有了一种颜色的边框设置,在根据每一个样式的边框颜色有所不同,我们只需要用border-color设置新的颜色即可,新的颜色将覆盖掉之前的样式设置,从而实现了使用覆盖进行优化。4层叠样式表的优化方法在本文中,对CSS技术进行了详细阐述。

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论