Pages (41) « Prev 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Next »

CSS缩写技巧

Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问者的Internet连接情况,以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小。

  为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是,通过使用CSS缩写以及其他的一些简单技巧,你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中,我把文件的大小降低了大约25-50%。

使用CSS的缩写性质

  CSS的缩写性质(shorthand property)是一些专用的性质名,用来代替多个相关性质的集合。例如,间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。

使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。例如,想一想下面的代码:

.sample1 {

  margin-top: 15px;

  margin-right: 20px;

  margin-bottom: 12px;

  margin-left: 24px;

  padding-top: 5px;

  padding-right: 10px;

  padding-bottom: 4px;

  padding-left: 8px;

  border-top-width: thin;

  border-top-style: solid;

  border-top-color: #000000;

}

将它用一些缩写性质来替代就能够把代码减少为下面这样,两者的实际效果是完全一样的:

.sample1 {

  margin: 15px 20px 12px 24px;

  padding: 5px 10px 4px 8px;

  border-top: thin solid #000000;

}

要注意,缩写性质还有多个属性,每一个(属性)都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。

当属性是类似的值的时候,例如用于边框空白性质(margin property)的线性测量的时候,接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部(顶部的边框空白)开始,然后围绕格子(box)按顺时针次序继续。

如果缩写性质的所有属性都是相同的,那么你可以简单地列出单个属性,然后在前面将它复制四遍。因此,下面的两个性质是相等的:

  margin: 5px 5px 5px 5px;

  margin: 5px;

类似的,你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部/底部和右侧/左侧属性对。

  margin: 5px 10px 5px 10px;

  margin: 5px 10px;

属性的顺序在它们是不相似的值的时候是不重要的。因此,边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质(outline property)之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。

下面是CSS缩写性质的列表以及它们所表示的常规性质。

Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复

Border(边框):边框颜色、边框风格、边框宽度

border-bottom(底部边框):底部边框颜色、底部边框样式、底部边框宽度

border-left(左侧边框):左侧边框颜色、左侧边框样式、左侧边框宽度

border-right(右侧边框):右侧边框颜色、右侧边框样式、右侧边框宽度

border-top(顶部边框):顶部边框颜色、顶部边框样式、顶部边框宽度

cue(声音提示):前提示、后提示

font(字体):字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

list-style(列表样式):列表样式图像、列表样式位置、列表样式类型

margin(空白):顶部空白、右侧空白、底部空白、左侧空白

outline(大纲):大纲颜色、大纲样式、大纲宽度

padding(间隙):顶部间隙、右侧间隙、底部间隙、左侧间隙

pause(暂停):后暂停、前暂停

减少空白

减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说,将每条规则打破放进一行代码里,即把原来插入到代码里用来把每个性质/属性分割到不同行的换行符和缩进符删掉。

例如,下面的代码示例在内容上相同,但是第二个要精炼得多:

h1 {

  font-size: x-large;

  font-weight: bold;

  color: #FF0000;

}

h1 {font-size: x-large; font-weight: bold; color: #FF0000}

删掉注释

将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用,但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释,或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的,因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID,以及其他的选择器都使用有意义的名称,你就可以省掉大多数的注释,同时仍然能够保持代码的可读性和可维护性。

h1 {          /* Heading 1 style*/

  font-size: x-large; /* x-large size */

  font-weight: bold; /* Bold */

  color: #FF0000;   /* Red */

}

使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。

如果你想开个设计公司

转载文章来源:http://www.blooms.cn/index.htm

我开的是一家设计公司,主要从事的业务有平面设计,网站设计开发,多媒体动画设计三方面市场。掐指一算到现在快2年了,今是元旦,总有种辞旧迎新的冲动,决定将自己的想法“刻录”下来,以备份查阅。

我是个极其热爱设计的人,有兴趣,有灵感,能开设计公司是我从大学初期时候就萌发的梦想——做个老板,这个念头一直冲击着自己,鞭策着自己,使自己坚强,使自己勤奋!在2002年的时候,终于碰到一贵人,是我一个高中同学,他出大部分资金,一起合伙开了个设计公司,在那时,自己几年的梦想在一杀那就实现了,———我拥有了自己的公司了!

但我忽略了以下几点:

1,开了公司并不一定赚钱,开公司只是手段,赚钱才是最高指令。我忽略了。(丁丁注:的确的确,开公司之前最好要有明确的盈利点)


关于版权声明的写法

从法律角度看,加入了伯尔尼公约的国家,版权保护是随着作品(无论是文字,还是图片)的问世的即刻就得到版权的保护的,并不是必须要声明。但是作为惯例,这一小行文字还是有很好加强意识,提醒浏览者,所观看的内容是受到版权保护的。

正确的格式应该是:Copyright [dates] by [author/owner] ? 通常可以代替Copyright, 但是不可以用(c)。 All Rights Reserved 在某些国家曾经是必须的,但是现在在大多数国家,都不是法律上必须有的字样。

参见下面几个正确的格式:

?1995-2004 Macromedia, Inc. All rights reserved.

?2004 Microsoft Corporation. All rights reserved.

Copyright ? 2004 Adobe Systems Incorporated. All rights reserved.

?1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.

请注意标点符号和大小写的用法,这也是专业精神的一种体现。

现在流行some rights reserved:creativecommons.org some rights reserved 和copyright 本身并不矛盾,但是其中的界限更多是一个道德问题,真正的保留一部分权力,是指给浏览者fair use 的权利,fair use的界定也决不是随便乱用,或者抄袭。 甚至说,除了copyright, 还有copyleft,它的定义是为了程序员开发能够共享源代码的一个方式,英文里free, 并不仅仅是免费。 而且这种的源码公开免费使用,和版权也一点都不冲突。请大家不要误解。

对于从网上下载素材,如音乐,图片等版权问题, 有朋友问这个问题,答案很简单,所有的这些都有版权问题。和这些作品的大小格式没有关系。 这也是为什么经典论坛不讨论下载的原因,包含字体,同时经典网站也希望其他的网站能尊重本站作者的版权。

版权是互相的,因为每个人都在随时的拥有着你所刚刚创造的作品的版权,哪怕你的涂鸦之作已经被丢进垃圾桶,严格意义上,那也不可以被人抄袭的。不然公司就不需要碎纸机了。

只有彼此的尊重,互相的尊重才能有真正意义上的共享,简单的拿来主义,或者因为我是经典的用户,所以别人就必须要尊重经典的版权,而我不必尊重别人的版权,是不会形成好的版权保护意识的。

版权其实并不意味着付费,和商业化也没有直接的关联。很多时候,你如果真想使用版权保护的内容,只要发封邮件,询问一下许可就可以, 大多数的情形下,个人用户是很喜欢甚至欣赏这样的礼貌和尊重的。 版权问题中很多的灰色地带,我想与其总是用法律的角度来要求用户,还不如让我们都从自己的道德来判断,从尊重的角度来取舍。

有关web设计趋势的两篇文章

第一篇原文来自:http://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/ 作者将现在的优秀设计总结为8种风格,建议去原文看看作者所截取的图形举例,不过全是英文的。

1.Web桌面化

www.yahoo.com

mail.yahoo.com

www.live.com

正方:看起来很爽,值得细细欣赏

反方:花销太大

尽可能地接近于桌面上绚丽的图形,这是最优雅的风格。结果呢,这种风格看起来很棒,但是需要极大的工作量,而且很耗 网络资源。总之,桌面风格以其四周的角度、富于表现力的图形、阴影和对桌面应用的模仿而独树一帜。

桌面元素的特征举例:

块级(block):屏幕上一个区域通常伴随着边框、头部、底部(border、header、footer),来连接了逻辑上类似的元素,诸如:链接、文本、记分卡(注:我想到了digg那个分数栏)、文章预览。块 级通常伴随着看似随意的阴影(optional shadow)。

迷你块: 通常他们是小图片和精细文本的组合。

按钮:这种设计元素伴随着一定角度、风格化的边框、看似随意的阴影。按钮可能是玻璃风格,并且有一些从下方投射的灯光产生的阴影,当鼠标移上去还会有视觉反馈效果。

标签(Tabs):它们也使用了角度、风格化的边框、看似随意的阴影。也有鼠标悬浮的反馈。


家乡

上周六回老家,在路上拍的。清新的大自然,鸟语花香,远处飘来的泥土气息...

Pages (41) « Prev 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Next »