和名为“STYLE5”自定义类设计结构和外观显示。如：

相比传统的采用表格设计网站结构的技术，CSS+DIV模式可以更加快捷的设计网页外观，分块设计网页不同区域的内容，同样便利于后期网站的管理和更新。

参 考 文 献

[1] DIV+CSS网页布局实用教程[M].金景文化，人民邮电出版社，2015，02.

[2] 刘西杰，夏晨.DIV+CSS网页样式与布局从入门到精通[M].人民邮电出版社，2015，01.

CSS定位技术的研究与应用 篇3

可能位置,是目标到两个观测基站恒定时间差所能形成的双曲线。多组TDOA能够提供多组双曲线的交点,从而定出目标的位置。

目前在市面上有多种定位系统,包括Zigbee、Wi Fi等,以及最新的CSS定位系统。CSS系统是基于TOA、TDOA时间机制的,而Zigbee系统则基于信号强度RSSI。Zigbee及Wi Fi通常采用测算节点之间连接信号强度(RSSI)的方法,利用无线信号的空间传输衰减模型估算出节点间传输距离。这种测量是区域性的,和节点前端低噪音处理电路、天线有很大关系。同时,由于RSSI采用的信号衰减进行测量,理论测量的精确距离范围在80米以内,80米以外甚至将无法获得粗略的距离信息;在实际使用中,由于环境等因素的影响,达到3米精度左右精确测量的最大范围将在10~20米。通过分析可知,基于信号强度的系统部支持长距离测量,最大的问题在于,当环境变化较大时,原先建立起来的估算模型将不能合理使用,必须重新进行系统的校正,也就是环境适应性差。

针对此种情况,CSS系统是基于时间机制的测量,明显具有更多优势,并能在实际生产中,如隧道施工人员局部定位系统的建立,得到有效的用。

1 CSS定位技术原理

从基本定位原理上说,任何定位系统首先需要获取标签与定位基站之间的距离。CSS采用SDS-TWR的测量方法,获取双向传输的时间,进而获取节点距离。

由图一可知,CSS进行了精确的双向到达时间测量以及内部反应时间测量原理,由于采用了高质量的时钟电路,时间的精确度可以达到3-4ns,因而实际测距精度可以达到1m左右。通过研究可知,由于CSS基于时间测量机制,在测量精度3-4ns情况下,无线电检测精度将达到1-1.2米,而在实际使用中,由于前段多路径到达波检测、时间偏差等原因影响,误差可以控制在1-3米;在测量距离上0dbm时可以达到100米的最大传输距离,且只要信号到达,就可以利用信号测距。

2 CSS定位技术特点

在实际应用中,CSS系统的室内初步测距精度在1-4m,单次测量时间可以低至3.3ms,经过滤波器处理后,精度能够提升到1-2m左右,而在室外测距应用中,即使远达2Km的测量(增加功率放大器),也能维持上述精度,即只要信号到达就能维持相应精度。对于测量范围而言,CSS系统的测量范围将达到节点双向通讯所覆盖的最大范围,即只要节点之间能够通讯,系统就能够进行实际的距离测量,因此才有功率放大器并选择合适的天线后,500-2400米的范围应该不会存在问题,其测量特性也不会因为增加功率放大器这一环节而有所变化。

CSS系统具有很好的功率控制特性:休眠、唤醒、常态收发。同时,由于CSS系统采用Chirp信号,使得射频前端设计容易,能够快速的增加功率模块,进一步低增大测量了范围。

CSS系统采用了80MHz的带宽(属宽带系统),获得相对较低的频谱密度;在处理信号时又能获取较大的处理增益以及较好的到达脉冲分辨率,能够很好的抵御环境干扰;当雨天、雾天、丛林中使用该系统时,CSS系统只会缩短距离而不会产生较大误差。

3 CSS定位技术应用

依据CSS技术在测距、精确定位及通信方面的优势,可以在生产现场对其进行推广应用。例如,一般隧道工程的工作环境电场、磁场强度较大,要求设备的抗干扰能力非常强。在增加容量的时候,信号的碰撞呈现为几何级数的增长。产品的性能急剧恶化,变得极其不稳。设计相关系统,使其基站是一个完整的测距系统,可以在一个比较狭小的区域内,精确的定位。相对于某参考点,有一个相对坐标(X,Y)。在有4个基站的区域内能够实现,半径为200米的圆形区域,精度在10米以内;半径为100米的圆形区域,精度在5米以内;半径为50米的圆形区域,定位精度在2~3米以内。系统采用CSS技术,信号是脉冲信号,采用时域反射技术进行测距,能排除信号出现突然中断,定不了位等问题。在移动标签和基站安装时要求尽量可见,可减少2~3个db的信号损耗。同时在软件上,根据客户对不同工作环境区域对产品的定位的要求不同,采用的软件算法策略也不同。为了减少信息碰撞的机会,采用时分、分段定位技术,减少信号碰撞的机会。在模糊定位的区域,采用的是标签主动发起定位,提高定位标签当然容量,同时作为一种人员登记的基础。在精度要求高的区域,采用主机轮询的方式实现。

综上可见,CSS定位技术在日常生产和生活中都将具有极大的利用空间,同时能够为我们的生产、生活提供更多、更准确的信息。

4 结束语

⑴CSS定位技术相对于Zigbee等无线定位技术而言,在精确定位方面更加具有优势。特别是在环境较差的情况下,CSS技术所产生的误差要小的多。

⑵CSS定位系统可以通过增加射频功率的方式,轻松地达到大范围测量,相比之下,其他定位系统会因测量范围的扩大带来精确度较大降低的不利后果。

⑶CSS定位系统具有更好的抗干扰性,能够在较为恶劣的天气环境下工作,而不较大的影响测量精度。

摘要：本文针对目前存在的多种定位技术进行了分析比较,详细说明了CSS定位技术的原理及特点。同时,根据CSS定位技术的特点,对其应用领域做出了相应的拓展,并结合隧道施工人员局部定位的要求,将CSS定位技术的使用做出了详细说明。

CSS技术 篇4

网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它;我们想要多背景图片，我们实现了它;我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。

为网络而生

CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中，我们将走的更远，看一看变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

rotate

Rotate(旋转)允许你通过传递一个度数值来转动一个对象。

scale

Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。

translate

Translate就是基于X和Y 坐标重新定位元素

skew

顾名思义，skew就是要将对象倾斜，参数是度数

matrix

transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

让我们更深入的了解每一个功能吧。

Rotate

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

12345

#nav{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧?唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

scale

scale并不像你想象的那样工作：简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值可以是正数、负数和小数。

正数值放大一个元素，正如你期望的那样，基于指定的宽度和高度。

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。然而，你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

1234567891011121314

#nav{/* nav元素的宽和高都会被放大双倍 */-webkit-transform:scale(2);-moz-transform:scale(2);}#nav{/* nav元素的宽会是双倍，而高度保持不变 */-webkit-transform:scale(2,1);-moz-transform:scale(2,1);}#nav{/* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */-webkit-transform:scale(-2,1);-moz-transform:scale(-2,1);}

浏览器支持

scale属性目前只有Firefox, Safari 和Chrome支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。

1234

#navli a:hover{/* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}

translate

这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:translate(10px,20px);-webkit-transform:translate(10px,20px);}

浏览器支持

translate属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:skew(30deg,-10deg);-webkit-transform:skew(30deg,-10deg);}

浏览器支持

Skew属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix

没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数转换成新值：

| a b e |

| c d f |

| 0 0 1 |

如果你有兴趣深入研究，可以看一下这里www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

让我们来看一个例子吧：

12345

#nav{/* nav元素将会像右上角倾斜 */-moz-transform:matrix(1,-0.2,0,1,0,0);-webkit-transform:matrix(1,-0.2,0,1,0,0);}

浏览器支持

可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，但是使用它的这个滤镜，基本也可以实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)都支持该功能。

链式变形

变形常常是单独的，但是如果你想同时用到多种变形，代码也是可以快速整合的，特别是使用私有扩展。幸运的是，我们有一些内置的缩写：

12345678

#nav{-moz-transform:translate(10,25);-webkit-transform:translate(10,25);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:scale(2,1);-webkit-transform:scale(2,1);}

这些变形可以被链到一起，从而让你的代码更高效:

1234

#nav{-moz-transform:translate(10,25)rotate(90deg)scale(2,1);-webkit-transform:translate(10,25)rotate(90deg)scale(2,1);}

这些属性的真正的威力是合并到一起，

你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛，我们就可以创建更丰富和更轻量的界面和应用。

transform-origin

transform-origin不是transform的一个子功能，但是和transform关系非常密切。它可以用来指定transform的起点，比如，rotate变形的默认起点是其中间，你可以将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

12345678910

.class1{-moz-transform-origin:00;-webkit-transform-origin:00;...}.class2{-moz-transform-origin:100%100%;-webkit-transform-origin:100%100%;...}.class3{-moz-transform-origin:topleft;-webkit-transform-origin:topleft;...}

浏览器兼容性

该属性目前也只有webkit和firefox支持，而且需要添加各自的私有前缀。

transition(转换)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

12345678

#nava{background-color:red;}#nava:hover,#nava:focus{background-color:blue;/* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗? #foreshadowing)*/-webkit-transition-property:background-color;/* 让它持续两秒钟*/-webkit-transition-duration:2s;}

转换的一些参数

transition-property

指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。

transition-duration

定义转换花费的时间(从旧属性换到新属性花费的时间)

transition-timing-function

可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay

这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

注：参数部分为翻译时添加，原文中没有。

浏览器支持

像transform属性一样酷，但是目前只有WebKit浏览器支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

123456789101112131415161718

#rotate{margin:0auto;width:600px;height:400px;/* 确保我们是在一个 3-D 空间 */-webkit-transform-style:preserve-3d;/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */-webkit-animation-name:x-spin;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}/* 定义要调用的动画 */@-webkit-keyframes x-spin {0%{-webkit-transform:rotateX(0deg);}50%{-webkit-transform:rotateX(180deg);}100%{-webkit-transform:rotateX(360deg);}}

这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。

animation的一些参数

animation的参数和translate有些像，所以如果你理解了translate的参数，这里就不难理解了。

animation-name

动画的名称。

animation-duration

定义动画播放一次需要的时间。默认为0;

animation-timing-function

定义动画播放的方式，参数设置类似transition-timing-function

animation-delay

定义动画开始的时间

animation-iteration-count

定义循环的次数，infinite即为无限次。默认是1。

-webkit-animation-direction

动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

浏览器支持

不幸的是，目前，只有少数浏览器支持CSS动画。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 浏览器中工作。Safari 4 (Snow Leopard)支持3D动画

总结

现在，JavaScript可以在CSS 3完善之前弥补这个差距。遗憾的是，让所有浏览器支持这些很棒的属性可能需要一个很长的过程。不用等待那一天的到来，我们可以先使用一些严谨的渐进增强以及以来Javascript来增强我们的网站和应用。这不是件坏事，至少现在看起来是。

看了最近的IE9的公告，如果IE团队添加这些属性中的一些到这个新的版本的浏览器中我不会感到惊讶，他们已经开始考虑整合CSS3了(border-radius)。

web的前景是光明的，特别是因为这些类似动画的高度实验性的属性。尽管很多属性对客户或高级产品工作还不可用，至少他们很有趣!我们都期待着有一天，我们可以支持所有平台，以建立一些真的很棒的轻量级应用。

参考与资源

A Crash Course in Advanced CSS3 Effects

Net Tuts 发布的一个很酷的关于CSS3效果的视频。

Webkit Announces Support for CSS 3D Transforms

CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit.

Jonathan Snook on CSS Text Rotation

Jonathan Snook 讲述即将到来的CSS3 属性.

DEV Camp CSS3 Tricks

一份来自Dan Kurtz的幻灯演示

W3C Spec on 2-D Transformations

关于2-D 变换的资源.

W3C Spec on 3-D Transformations

一个关于3-D 变换的资源.

W3C Spec on CSS3 Animations

CSS animations的W3C工作草案

Safari CSS参考

MDC:Using CSS transforms

MDC: -moz-transform

关于原作者

Tim Wright是一位网页设计师/开发工程师和博主。他从就成为一名web标准和易用性的倡导者。你可以在CSSKarma.com上找到他写的更多文章，或者follow Tim on Twitter。

译文来自：你需要知道的CSS3 动画技术

使用CSS+DIV布局网页初探 篇5

表格布局方式实际上是利用表格元素具有无边框的特性，在网页中的各个元素按版式划分放入表格的各个单元格中，实现复杂的排版组合。

表格布局的代码最常见的是在HTML标签中间加入大量的设计代码，大量的样式设计代码混杂在表格和单元格中，使得可读性大大降低，维护成本也相对提高。尽管使用DW等网页制作工具进行可视化操作，但不可能帮助缩减代码或删除重复的代码，因而会出现许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。

使用CSS布局可以从根本上解决表格布局带来的问题。CSS布局的重点不在表格元素的设计上，而是采用另外一元素DIV。DIV可以理解为层或者是块，是一种比表格简单的元素。DIV的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个DIV中，成为网页中的结构主体，而样式表现由CSS完成。DIV在使用时不再需要像表格一样通过单元格来组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。

二、CSS+DIV布局网页的主要内容

要掌握使用CSS+DIV布局网页，首先要深刻理解盒子模型。盒子模型可以类比为装手机的盒子，手机可以当成盒子的内容部分，保护手机的海绵可以当成填充部分，手机盒子的棱角就是边框，两个手机盒子之间的距离就是边距。

盒子模型的宽度（高度）=内容的宽度（高度）+填充的宽度（高度）+边框的宽度（高度）+边距的宽度（高度）。盒子模型的宽度（高度）会随着里面内容和填充的增长而增大，这点有别于真实的盒子。

当了解完盒子模型后，就可以使用CSS+DIV对网页进行设计了。可以先把网页用DIV把所有的区块勾画出来，用CSS样式表里对这些DIV进行属性的设置，然后再布局嵌套里面的文字，图片。文字图片可以使用类进行控制，可以把它们也当成嵌套进去的盒子，不妨给它们加上边框，在盒子理论的引导下就能轻松对它们在网页中的位置进行设置。

使用CSS+DIV布局网页应用比较多的一项是使用项目列表制作导航条。可以先把项目列表里每行的文字变成超链接，并把这些超链接CSS样式表里区块的显示属性设置成块，然后把

的内置设置清零，也就是把它CSS样式表列表的类型属性设置为无，将方框的填充和边框属性设置为零。这样就可以把
，
• ，三个元素看为三个嵌套的盒子进行操作了。

  三、CSS网页布局分类

  1.一列固定宽度。一列布局是所有布局的基础，也是最简单的布局形式，即一种固定宽度的布局样式。DIV在默认状态下，宽度将占据整行的空间，因此当设置了宽度属性后，DIV宽度将变为设置的宽度。

  2.一列自适应。自适应布局是网页设计中常见的布局形式。自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上DIV在默认状态下展区整行的空间，便是宽度100%的自适应布局的表现形式。一列自适应布局只需要将宽度由固定值改为百分比的形式即可完成。

  3.一列固定宽度居中。页面整体居中是网页设计中常见的形式，在传统表格布局中，我们可以使用表格的对齐方式属性来实现。DIV本身也支持该属性，但在CSS布局中为了实现表格与内容分离，因此在设置居中属性时，通过边界属性来控制对象的上下左右四个方向的外边距。边界属性中可以直接使用数据，也支持自动，即自动判断边距。如果将左右边距设置为自动，浏览器就会将DIV左右边距设置为相同，从而实现居中效果。

  4.两列固定宽度。我们知道DIV用于对某一个区域的标识，两列的布局需要采用两个DIV。两列固定宽度的实现需要新的属性浮动。该属性用来控制对象浮动布局方式。浮动是CSS布局非常强大的布局功能，也是理解CSS布局的关键问题所在。在CSS中，包括DIV在内的任何元素都可以以浮动的方式进行显示。浮动属性有三个值，无表示对象不浮动。使用左对齐时，表示右侧对象将流到当前对象左侧。使用右对齐时，表示左侧对象将移动到当前对象的右侧。要实现两列的布局的话，定义左栏和右栏中的浮动属性都为左对齐。这样右栏的内容将流入到左栏的右边，并根据左栏的宽度，自动流入并贴至左栏，而贴近的程度则由左栏的右边距和右栏的左边距来控制，不需要一栏对象本身的宽度值。

  5.三列浮动中间列宽度自适应。如果要求左栏和右栏固定宽度，中间栏需要在左栏和右栏中间，并根据左右栏的宽度自动调整间距。需要实现这样的布局，就需要使用定位属性来定位。

  将左栏的定位类型设置为绝对，并将上和左设置为0像素。将右栏的定位类型设置为绝对，并将上和右设置为0像素。将中间栏设置边界属性中左和右设置只要略大于左右栏宽度即可，用于实现两边自适应宽度。

  四、結语

  使用CSS+DIV布局网页可以从根本上解决表格布局带来的问题，能更加随意地对网页的结构进行设置和调整，真正地实现了网页结构、表现和行为的分离。它还提高了网站维护和修改的效率，提高了网页开发的效率和页面下载的速度，是网页布局发展的方向。

  参考文献：

  [1]王海涛.CSS权威教程（第3版）.北京：清华大学出版社，2008-09.

  [2]何福男，密海英.网站设计与网页制作项目教程.电子工业出版社，2011-01.

  CSS技术 篇6

  CSS级联样式表是一种用来表现HTML (标准通用标记语言的一个应用) 或XML (标准通用标记语言的一个子集) 等文件样式的计算机语言。

  CSS最新版本为CSS3, 是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言, CSS能够对网页中的对象的位置排版进行像素级的精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象和模型样式编辑的能力, 并能够进行初步交互设计, 是目前基于文本展示最优秀的表现设计语言。

  而网页中元素的定位则是CSS中的重中之重。使用position定位有四种方式, 分别为relative、absolute、static、fixed, static是静态定位, 也为系统自动定位。下面主要分析其他三种定位方式的特点。

  1 绝对定位:position:absolute

  1) 绝对定位是将元素依据已经定位 (绝对、固定或相对定位) 的离它最近的祖先元素进行定位, 祖先元素没有定位或没有祖先元素则默认依据body浏览器窗口定位。

  2) 绝对定位的元素不论本身是什么类型, 定位后都将成为一个新的块级元素, 如果未指定宽度高度默认自适应实际包含的内容区域 (不再默认浏览器宽度) 。

  3) 绝对定位后的元素将处于浮于其他元素之上, 自身不占位, 它原来在正常文档流中所占的空间同时被关闭, 就是说绝对定位的元素不占据页面空间, 原空间被后继元素使用。

  绝对定位必须用left、right、top、bottom属性之一激活, 用于指定元素左、右、上、下外边距距离已定位祖先元素 (或浏览器) 左、右、上、下内边框的距离。

  如果定义多个属性, 当left、right冲突时以left为准, 当top、bottom冲突时以top为准, 如果一个也不指定则元素仍按普通文档流布局, 但它自己不再占据空间, 后续元素上移与其重叠。

  例如在浏览器四个角各放置一个width:50px;height:50px;的矩形盒框:

  position:absolute;top:20px;left:20px;/*左上角定位*/

  position:absolute;top:20px;right:20px;/*右上角定位*/

  position:absolute;bottom:20px;right:20px;/*右下角定位*/

  position:absolute;bottom:20px;left:20px;/*左下角定位*/

  绝对定位元素定位后相对祖先元素的位置不再变化, 若页面内容较多拖动页面滚动时, 定位元素会随页面一起滚动。

  绝对定位元素重叠覆盖其他元素时可用z-index属性设置它们的叠放次序。

  2 相对定位:position:relative

  1) 相对定位是让元素 (可以是行内元素) 相对于它在正常文档流原位置按left、right、top和bottom偏移量移动到新位置。

  2) 相对定位的元素移动后保持原外观样式大小、移动定位后不会占据新空间会覆盖新位置原有元素, 原位置空间被保留, 其他元素相对它原来的位置不变。

  3) left、right、top和bottom指定相对原位置移动的偏移量, 可以使用带单位数值、相对父元素的百分比%。

  left正值:左边向内—向右移动, 负值:左边向外—向左。

  right正值:右边向内—向左移动, 负值:右边向外—向右。

  top正值:上边向内—向下移动, 负值:上边向外—向上。

  bottom正值:下边向内—向上移动, 负值:下边向外—向下。

  例如:left:20px;元素左边框右移20像素。

  left:-20px;元素左边框左移20像素。

  例如:position:relative;left:50px;bottom:50px。

  3 固定定位:position:fixed

  固定定位与绝对定位absolute相似, 定位后元素也生成为新块级盒框、覆盖新位置原有元素, 在正常文档流中所占的原空间关闭—被后继元素使用。

  固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位—不会随滚动条拖动页面而滚动, 固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置

  通过以上分析, 可以很清楚地了解position定位及应用, 以便更好地精准定位网页中的元素, 设计出更完美的网页。

  参考文献

  CSS技术 篇7

  DIV+CSS的优势在于 (1) 表现和内容相分离。 (2) 提高搜索引擎对网页的索引效率。 (3) 代码简洁, 提高页面浏览速度。 (4) 易于维护和改版。

  1 CSS盒子模型

  CSS+DIV网页设计技术的核心是盒子模型。所有页面中的元素都可以看成是一个盒子, 占据着一定的页面空间。

  一般来说这些被占据的空间往往都要比单纯的内容大。换句话说, 可以通过调整盒子的边框和距离等参数, 来调节盒子的位置和大小。一个页面由很多这样的盒子组成, 这些盒子之间会互相影响, 因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构;二是理解多个盒子之间的相互关系。

  盒子模型包括四种属性:

  边框 (border) 内边距padding外边距margin内容content, 如图1所示

  2 DIV+CSS布局技术在网页设计中的应用

  CSS的排版是一种很新的排版理念, 完全有别于传统的排版习惯。它将页面首先在整体上进行

  标记的分块, 然后对各个块进行CSS定位, 最后再在各个块中添加相应的内容。利用CSS排版的页面, 更新起来十分容易, 甚至连页面的拓扑结构, 都可以通过修改CSS属性来重新定位。

   

  2.1 确定网页布局

  页面布主要内容如下所示:

  Logo页面标志

  Left边栏区域, 一般放置链接信息

  Right主体区域

  Footer页脚, 一般是版权或联系方式区域

  2.2 主要设计部分

  在dreamweaver cs5开发环境中, 新建index.html文件, 并创建CSS文件, 命名为style.css将样式表写在一个独立的扩展名为CSS文件中。

  在

  与中加入

  , 这表示网页文件可以链接到css文件, 可以调用其中内容。在index.html的
  标签之间插入如下代码, 来搭建页面结构:

  2.3 运用CSS技术和JS技术完善网页

  这里只给出了商品展示部分的CSS技术和JS技术的运用。

  2.3.1 css技术的运用

  自定义列表实现图文并排, 网站中图片和文字是不可缺少的元素, 但是实现图文并排的效果会为网站的布局增色不少。

  2.3.2 图片无缝滚动

  图片无缝滚动是图片从右向左无缝滚动, 鼠标停留是图片停止滚动, 移开鼠标图片继续滚动。

  3 结束语

  CSS+DIV样式安排整个网页的布局到真个细节的定位, 要能熟练的掌握CSS+DIV样式, 且能和Java Script编程语言相结合实现图图片功能等。浏览器的兼容和测试是不容忽视的, IE6的性能不够稳定, 我们用火狐、IE8等浏览器各个浏览器中测试, 保证在各个浏览器中文件图片或者文字排版是正确的。CSS样式的文件和JS的文件作为单独的文件存在, 方便以后网站的修改, 部分代码还可以重复利用, 节省文件所占空间。切片的使用使得网页加载变得更加流畅。

  参考文献

  [1]张宏彬.photoshop cs3图形图像处理技术[M].北京:冶金工业出版社, 2009.

  [2]许昭霞, 段欣.网页制作[M].北京:电子工业出版社, 2008.

  [3]前沿科技.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社, 2011.

  [4]温谦.CSS设计彻底研究 (第一版) [M].北京:人民邮电出版社, 2008.

  CSS技术 篇8

  关键词：DIIV,CSS,网页布局,网页设计

  随着互联网技术的不断普及,网页已成为人们获取和交流信息的主要工具之一,而网页布局在网页设计中占重要的地位。由于旧的网页布局技术的弊端逐渐暴露,带来了业界对DIV+CSS的标准化设计的关注,大到各大门户网站,小到许多个人网站,DIV+CSS的网页布局技术已被的越来越多网站采用。DIV+CSS是当前Web标准中常用的术语之一,也是目前最流行的网页布局方法。在网站设计标准中,要求用DIV+CSS的方式来实现各对象的定位,即DIV定义网站结构、CSS创建网站样式,从而实现更加丰富的网页效果,提高网页传输速率、便于对网页的更新与维护。

  1 什么是DIV和CSS

  DIV是指HTML语言中的

  标记元素,DIV元素是用来为HTML文档内大块的内容提供布局结构和背景,一般也称为DIV层定位[1]。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

  CSS即Cascading Style Sheet,中文译作“层叠样式表”,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言[2]。在网页中使用CSS技术,可以有效地对页面的布局、颜色、背景和其他效果实现更加精确的控制,使页面效果更丰富,操作更简单,代码更简洁。

  “DIV+CSS布局技术”准确地说应该是“XHTML+CSS技术”,由于我们在使用XHTML对网站进行标准化重构时,DIV是使用频率最高的一个元素,因此人们习惯称之为DIV+CSS布局[3]。用DIV+CSS技术制作的网站是在HTML中只放置页面的内容,CSS控制内容的样式,实现网页样式和内容的分离。当CSS应用于DIV的时,能让DIV的功能更加强大,也使得DIV的运用更加的灵活和方便。

  2 DIV+CSS的优势

  DIV+CSS作为一种新的网页设计技术,既获得业内的认可和关注,并且被各大网站所应用,已经成为一种网页设计的标准和趋势。与传统的网页布局技术相比,采用DIV+CSS进行网页布局具有以下几个显著优势:

  1)表现和内容相分离:

  即HTML代码和CSS代码分离,CSS可以将样式部分单独放在一个独立的样式文件中。在HTML文件中只存放网页要展示的内容,而网页内容的表现形式完全用CSS来实现。这样减少HTML文件的代码量,提高网页浏览速度,解决了传统表格(Table)布局存在大量的冗余代码,页面结构与表现混杂在一起的问题。

  2)易于网站的维护和更新:

  由于一个CSS文件可以被多个网页导入或链接使用,如果重新布局整个网站的页面,只需要根据区域内容标记到CSS文件里找到相应的ID,简单的修改就可以。当修改CSS文件后,所有使用该CSS的HTML文件都会自动进行套用,而不必在每个HTML文件中重复设置。从而使得修改页面变得更加方便,减少工作量,大大的提高了网站维护和更新的效率,降低了网站的成本。

  3)方便搜索引擎的搜索:

  使用DIV+CSS布局设计网页,代码精简程度高,结构优化,搜索引擎能更容易采集到网页内容。搜索网页时,搜索引擎程序直接抓起HTML文件中DIV的内容,而不去访问CSS文件,这样能在更短时间内检索整个页面。如果一个页面中涵盖了大量的表格标记来布局,当搜索程序遇到多层表格嵌套时,搜索程序往往会跳过嵌套的内容或直接放弃整个页面。因此采用DIV+CSS技术,提高搜索引擎对网页索引效率,更方便让搜索引擎收录网站,提高网站评分以及排名。

  4)保持视觉和网站风格一致性:

  使用DIV+CSS的制作方法,将所有页面或区域统一用CSS文件控制,很好避免了用表格嵌套使得页面与页面或区域与区域之间的显示效果产生偏差。当操作系统及分辨率发生变化时,用表格技术设计出来的网页有时会出现变形现象,而使用DIV+CSS技术让页面更灵活,并可以根据不同的浏览器达到统一的显示效果。

  5)网页加载速度快:

  由于将样式代码写在了CSS文件中,这样代码简洁,让页面体积变小,而且相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载,却不像表格嵌套那样将整个页面圈在一个大表格里,由此更提高了页面的加载速度。

  6)浏览器支持完善,兼容性强:

  兼容性更强DIV+CSS布局符合web标准规范的发展趋势,几乎所有的浏览器上都可以使用,而且具有强大的向后兼容性,将在未来新浏览器中很好的工作。

  3 CSS盒子模型

  CSS盒子模式是DIV+CSS网页布局的核心,通过由CSS定义的大小不一的盒子和盒子嵌套来布局网页。所有页面中的元素都可以看成是一个盒子,盒子里面的内容和盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间还有外边距(margin),如图1所示。

  4 DIV+CSS布局应用实例

  采用DIV+CSS的网页布局,首先用DIV来分块,定义语义结构;然后用CSS来定位和添加样式,如位置、浮动、加入背景、对齐属性等;最后在这个CSS定义的各个块中添加相应的内容,如文字、图片等。下面通过最常用的具体布局实例介绍使用DIV+CSS布局网页的主要方法。

  4.1 三栏式自适应宽度布局

  用

  标记把网页区分成不同的区块,包括header、content(其中有sidebar边栏区域和main主体区域)、footer三个区域,分别作为网页的头部、内容和版权区域。编写HTML文档代码如下:

  设置CSS样式文件代码如下:

  其中,width属性设置为百分比形式,实现当浏览器窗口变化时,页面宽度自动适应窗口的宽度。container的margin属性为0 auto,表示上下边距为0,auto表示左右边距为自动,实现网页的居中显示。sidebar的float属性为left,main的float属性为right,实现中间两列竖栏的显示效果。border属性为solid,表示实线边框。效果如图2所示。

  4.2 三列式固定宽度布局

  网页分成header、menu、content(包括leftcolumn左边栏区域、rightcolumn右边栏区域和main主体区域)、footer四个区块。HTML文档代码如下:

  设置CSS样式文件代码如下:

  其中,leftcolumn的float属性为left,rightcolumn的float属性为right,main的margin属性为0 210px 0 210px,表示上下边距为0,左右边距为210px,实现中间三列竖栏的显示效果。效果如图3所示。

  5 结束语

  基于DIV+CSS方法实现了网页的布局定位,具有表现和内容相分离等优势,已经成为一种网页设计的标准和趋势。通过对DIV和CSS技术的研究,介绍网页布局应用实例和使用该技术布局网页的流程和方法。在实际操作过程中还须要根据不同的风格和内容灵活应用各布局元素及CSS样式。

  参考文献

  [1]Castro E.HTML XHTML CSS基础教程[M].北京:人民邮电出版社,2007.

  [2]Eric A.Meyer.CSS Web站点设计手册[M].北京:机械工业出版社,2007.

  [3]Craig Grannell.CSS与HTML Web设计实践指南[M].北京:人民邮电出版社,2009.

  CSS技术 篇9

  由于CSS3在提高用户体验方面有了很大改观，下面就用户体验方面的内容分别进行阐述。

  1 CSS3利用鼠标交互和伪类提升用户体验

  用户在浏览网页的时候，对鼠标的操作仍然是Web页面的最重要的一个方式，鼠标操作包括链接（link）、滑过（hover）、激活（active）操作等。在CSS2版本中，伪类选择器就已经存在，比如超级链接的四个状态选择器：a:link、a:visited、a:hover、a:ac tive。比如可以通过CSS3制作按钮过渡效果、阴影等属性，能更加细致的模拟整个用户点击的过程，使得用户在整个操作的交互过程都变得愉悦且舒服。

  由于CSS3增加了非常多的选择器，所以在CSS3选择器中，伪类选择器的种类非常多。其中包括:first-line伪元素选择器，first-letter伪元素选择器，root选择器，empty选择器等等。这些伪类选择器是CSS3新增的选择器，它们都能得到在Android和iOS平台下Web浏览器的支持。有的用户在浏览网页的时候，会使用鼠标选中一些文字内容，方便进行阅读，如果使用伪类selection，可以设置相应的属性来设置相应的背景颜色和文字颜色，这样能对文字的阅读更加方便，文字的显示效果更加明显，从而增强了用户的使用感受。

  2 CSS3利用文字渐变提升用户体验

  随着CSS3的广泛使用，文字的渐变效果也越来越受到用户和网页开发设计者的重视。一个良好的渐变可以使文字看起来更加有质感，给用户提供一个更加良好的视觉感受。我们可以利用CSS3对文字透明的支持，通过显示背景渐变的方式来模拟文字渐变。如果再加上一些过渡动画效果，甚至可以实现一个简单的跑马灯效果。因此通过渐变文字，也可以提高用户的体验。

  3 利用过渡效果提升用户体验

  CSS3可以使用过渡效果来增强用户体验，比如以下代码是实现当光标划过按钮时，该按钮会向右移动15像素。但是这个没有过渡效果，在视觉效果上感觉比较突兀。主要的相关代码如下：

  如果将代码进行改写，添加ease-out关键字，开启慢移功能后，就添加了延迟过渡动画效果，这样在视觉效果方面看上去使人感觉更真实。相关代码如下：

  4 利用动画提升用户体验

  与场景过渡相比，CSS动画相对来说会稍微复杂些。如果Web页面希望引起用户注意，可以在页面元素中添加动画效果，利用动画效果吸引用户的眼球。随着浏览器对CSS3支持的不断完善，之前使用JavaScript能实现的动画效果，现在使用CSS3代码就可以很容易的实现，这也显示了CSS3新特性的强大。CSS3动画的属性主要分为三类：transform、transition以及animation。比如在下列代码中是使用的animation属性，但是需要将"myfirst"动画捆绑到div元素，动画的时长为10秒。在这里应用动画的时候，必须注意一点，那就是要定义动画的名称和时长。因为默认值是0，所以如果要忽略时长的话，动画是不会允许的。相关代码如下：

  综上所述，由于CSS3担任在Web页面进行布局和页面装饰的技术，它可以更加有效地对页面的布局、字体和颜色、背景或其他动画效果方面实现精确的控制。由于CSS3是CSS的升级版本，CSS3新标准提供了更全面的规范，并且更加实用。比如有：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，随着越来越多的浏览器已经相继支持CSS3的规范，CSS3在Web页面中的应用也会越来越广泛。在Web页面效果的开发中，使用CSS3技术将会更好的优化我们的应用程序，极大的提高程序的性能，同时也能更好地提高用户体验，使用户能在Web页面的应用中有更好的体会。

  摘要：随着计算机软件和互联网的飞速发展,用户对视觉用户体验提出了更高的要求,而CSS3的产生不仅仅对已有功能进行了扩展和延伸,而且对Web设计理念和方法也进行了革新。CSS3使得Web应用有更好的用户体验。文章论述了CSS3技术在提高用户体验过程中的各种应用。

  关键词：用户体验,CSS3,Web应用

  参考文献

  [1]毛冲.浅谈CSS3在网页开发中的特性[J].江西广播电视大学学报,2014(1):152.

  [2]胡江汇.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息,2012(12).

  [3]何丽.基于CSS3.0技术的网页元素效果[J].软件导刊,2011(8).

  CSS技术 篇10

  关键词: CSS 的构成 多余的代码 清除

  中图分类号: TP39 文献标识码: A文章编号: 1007-3973 (2010) 04-057-02

  CSS是CascadingStyleSheets(层叠样式表单)的简称。中文翻译为样式表。它的作用简单的说:就是可以在同一页面里使用不同的超链接样式。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在人们丰富的想象力下千变万化。

  1 CSS的意义

  1.1 CSS的语法

  CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。

  语法: selector {property: value} (选择符 {属性:值})

  说明:

  选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,可以通过此方法定义它的属性和值,属性和值要用冒号隔开:

  例子:body {color: black},此例的效果是使页面中的文字为黑色。

  如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:

  例子:p {font-family: "sans serif"} (定义段落字体为sans serif)

  如果需要对一个选择符指定多个属性时,使用分号将所有的属性和值分开:

  例子:p {text- align: center; color: red} (段落居中排列;并且段落中的文字为红色)

  1.2 选择符组

  可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:

  h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)

  p, table{ font-size: 9pt } (段落和表格里的文字尺寸为9号字)

  效果完全等效于:

  p { font-size: 9pt }

  table { font-size: 9pt }

  1.3 类选择符

  用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如想要两个不同的段落,一个段落向右对齐,一个段落居中,可以先定义两个类:

  p.right {text- align: right}

  p.center {text- align: center}

  然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:这个段落向右对齐的,这个段落是居中排列的。

  类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:

  center {text- align:center} (定义.center的类选择符为文字居中排列)

  这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

  这个标题是居中排列的

  这个段落也是居中排列的

  注意:这种省略HTML标记的类选择符是今后最常用的CSS方法,使用这种方法,可以很方便的在任意元素上套用预先定义好的类样式。

  1.4 ID选择符

  在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。

  ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:这个段落向右对齐。

  定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id=“intro”的元素:

  #intro

  {

  font-size:110%;

  font-weight:bold;

  color:#0000ff;

  background-color:transparent

  } (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)

  下面这个例子,ID属性只匹配id=“intro”的段落元素:

  p#intro

  {

  font-size:110%;

  font-weight:bold;

  color:#0000ff;

  background-color:transparent

  }

  注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。

  1.5 包含选择符

  可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:

  table a

  {

  font-size: 12px

  }

  在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。

  1.6 样式表的层叠性

  层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:

  div { color: red; font-size:9pt}

  ……

  这个段落的文字为红色9号字

  (P元素里的内容会继承DIV定义的属性)

  注意:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。

  另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:

  div { color: red; font-size:9pt}

  p {color: blue}

  ……

  这个段落的文字为蓝色9号字,我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。

  1.7 注释:/* ... */

  可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以“/*” 开头,以“*/”结尾,如下:

  /* 定义段落样式表 */

  p

  {

  text- align: center; /* 文本居中排列 */

  color: black; /* 文字为黑色 */

  font-family: arial /* 字体为arial */

  }[2]

  2 多余代码清除技巧

  在实际制作的SKIN的CSS文件时,经常会有着许多多余的代码。可以通过以下的办法清除这些多余的代码,让CSS文件更加简洁。

  2.1 margin、padding属性

  margin和padding代表的意思分别是外部边距和内部填充距离,在制作CSS文件中,这两个属性的多余代码是出现得最多的。比如:margin:0px,在制作CSS文件时可以查看一下,是否有许多的margin:0px,其中有的是不需要的,可以尝试删除它。相同:padding:0px也一样。

  另外,margin和padding中各项属性的顺序是:上右下左,你只要记住是顺时针方向就好了。我们再看看这两段代码:

  程序代码

  Margin:0px 0px 0px 10px;

  margin-left:10px;

  其实他们的作用是一样的,下面的则是一种缩写,使用缩写可以减少CSS代码,并使阅读起来更为方便(padding也相同)。

  2.2 !important;属性

  !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。IE是不支持这个语法的,而其他的浏览器都支持,通过这一点,可以得知,设置了优先权的代码是不会被IE执行的。所以可以important的后面添加CSS样式,使其可以区别于IE和FireFox等浏览器。

  在看Miles的CSS代码时,经常会看到了这样一句:

  程序代码

  height:50px?!important;height:50px;

  这里就是多余了,可以这样写:height:50px,这个错误在一般在刚刚开始制作CSS时常会出现。

  2.3 text- align、font样式

  上述两个样式的作用就不说了,但是这两个样式在制作CSS文件中也存在许多多余代码。下面举例说明,层的定义如下:

  程序代码